To get started using Editor.js, follow these steps:
- Install Editor.js
- Configure and initialise the Editor
- Install and connect Tools
Choose the most usable method of getting Editor.js for you.
- Node package
- Source from CDN
- Local file from project
Install the package via NPM or Yarn
Include module in your application
You can load specific version of package from jsDelivr CDN.
Copy editor.js file to your project and load it.
You can init Editor.js with zero-configuration option
It equals the simplest config with one required option —
holder in default value — «editorjs»
See Configuration page for the further tunings.
As described in Base Concepts, each Block in Editor.js is provided by a Plugin. There are simple external scripts with their own logic.
There is the only Paragraph block already included in Editor.js. Probably you want to use several Block Tools that should be installed and connected.
You can find some available Blocks here. Select the Blocks you need and follow the installation guide in their README.md files.
And some others.
After Tools installation, you should connect them to the Editor via the configuration object.
At first, take a look on the simplest config we just created
Let's add some more Tools to our page with the
tools property. Tools` scripts should be installed as explained above.
in this case, we connect Tools` Plugins without any options.
You can specify some settings of connected Tools:
In the example above, we configure available Inline Toolbar settings: Header tool will have the only Link at the Inline Formatting Toolbar (aka Inline Toolbar), and List Tools will have all available Inline Tools at the Inline Toolbar
||Tool specific configuration passed to Tool constructor|
||controls which Inline Tool should be available in your Block Tool. Accepts boolean value or array of Inline Tools names|
||shortcut for Tool. You can read more about the format here|
||option to rewrite Tool`s internal toolbox icon and title. The format is the same as here|