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 —
holderId in default value — «codex-editor»
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 own logic.
There is an 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 a Blocks you need and follow the installation guide in their README.md files.
- Link embeds
- Raw HTML blocks
- Simple Image (without backend requirement)
And some others.
After Tools installation, you should connect them to the Editor via configuration object.
At first, take a look on the simpliest config we just created
Lets add some more Tools to our page with
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 example above, we configure available Inline Toolbar settings: Header tool will have only Link at the Inline Formatting Toolbar (aka Inline Toolbar), and List Tools will have all available Inline Tools at the Inline Toolbar