### Install Project Dependencies
Source: https://editorjs.io/core-development
Install the necessary dependencies for Editor.js using Yarn.
```bash
yarn install
```
--------------------------------
### Example Output Data with Multiple Blocks
Source: https://editorjs.io/saving-data
This example shows the structure of the output data for a page containing Header, Paragraph, and List blocks, illustrating the `type` and `data` fields for each block.
```json
{ "time": 1550476186479, "blocks": [ { "id": "oUq2g_tl8y", "type": "header", "data": { "text": "Editor.js", "level": 2 } }, { "id": "zbGZFPM-iI", "type": "paragraph", "data": { "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration." } }, { "id": "qYIGsjS5rt", "type": "header", "data": { "text": "Key features", "level": 3 } }, { "id": "XV87kJS_H1", "type": "list", "data": { "style": "unordered", "items": [ "It is a block-styled editor", "It returns clean data output in JSON", "Designed to be extendable and pluggable with a simple API" ] } }, { "id": "AOulAjL8XM", "type": "header", "data": { "text": "What does it mean «block-styled editor»", "level": 3 } }, { "id": "cyZjplMOZ0", "type": "paragraph", "data": { "text": "Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core." } } ], "version": "2.8.1" }
```
--------------------------------
### Install Editor.js via Yarn
Source: https://editorjs.io/getting-started
Install the Editor.js package using Yarn for Node.js projects.
```bash
yarn add @editorjs/editorjs
```
--------------------------------
### Install Editor.js via NPM
Source: https://editorjs.io/getting-started
Install the Editor.js package using npm for Node.js projects.
```bash
npm i @editorjs/editorjs --save
```
--------------------------------
### Initialize Editor with Block Settings
Source: https://editorjs.io/making-a-block-settings
Example of initializing Editor.js with a custom block and initial data, including block settings like 'withBackground'.
```javascript
const editor = new EditorJS({
autofocus: true,
tools: {
image: SimpleImage
},
data: {
time: 1552744582955,
blocks: [
{
type: "image",
data: {
url: "https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_1280.jpg",
caption: 'Here is a caption field',
withBorder: false,
withBackground: true,
stretched: false
}
}
],
version: "2.11.10"
}
});
```
--------------------------------
### Connect Basic Tools to Editor.js
Source: https://editorjs.io/getting-started
Configure Editor.js to use the Header and List tools. Ensure these tools are installed separately.
```javascript
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
const editor = new EditorJS({
/**
* Id of Element that should contain the Editor
*/
holder: 'editorjs',
/**
* Available Tools list.
* Pass Tool's class or Settings object for each Tool you want to use
*/
tools: {
header: Header,
list: List
}
});
```
--------------------------------
### Initialize Editor with Saved Data
Source: https://editorjs.io/fill-block-with-saved-data
Example of initializing Editor.js with autofocus and pre-defined data, including an image block.
```javascript
const editor = new EditorJS({
autofocus: true,
tools: {
image: SimpleImage
},
data: {
time: 1552744582955,
blocks: [
{
type: "image",
data: {
url: "https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_1280.jpg"
}
}
],
version: "2.11.10"
}
}); // ... save-buttons stuff
```
--------------------------------
### Example: Defining Block Tunes with MenuConfig
Source: https://editorjs.io/tools-api
This snippet shows how to return an array of tune configurations using the MenuConfig format. Each tune is defined with an icon and a label, suitable for the standard Block Tunes menu.
```javascript
class SimpleImage {
// ... other methods
renderSettings(){
return [
{ icon: ``, label: 'With border' },
{ icon: ``, label: 'Stretched' },
{ icon: ``, label: 'With background' }
];
}
}
```
--------------------------------
### Tool Class Constructor
Source: https://editorjs.io/tools-api
Example of a Tool class constructor accepting data, api, config, readOnly, and block arguments.
```javascript
class MyTool {
constructor({data, api, config, readOnly, block}) {
// ... use or store arguments as you want
}
}
```
--------------------------------
### Block Tune: Render with MenuConfig
Source: https://editorjs.io/block-tunes-api
Implement the render method to define how a tune appears in the Block Tunes menu using MenuConfig. This example shows returning an icon and label, with an activate handler.
```javascript
class MyBlockTune {
constructor({ api }) {
this.api = api;
}
render() {
return {
icon: '',
label: 'H',
onActivate: () => {
// do smth
}
};
}
}
```
--------------------------------
### Example: Creating Custom Block Settings UI with HTML Element
Source: https://editorjs.io/tools-api
This snippet demonstrates returning a custom HTML element for block settings, suitable for advanced use cases. It manually creates and appends setting buttons to a wrapper div.
```javascript
class SimpleImage {
// ... other methods
renderSettings(){
const settings = [
{ name: 'withBorder', icon: `` },
{ name: 'stretched', icon: `` },
{ name: 'withBackground', icon: `` }
];
const wrapper = document.createElement('div');
settings.forEach( tune => {
let button = document.createElement('div');
button.classList.add('cdx-settings-button');
button.innerHTML = tune.icon;
wrapper.appendChild(button);
});
return wrapper;
}
}
```
--------------------------------
### Implement MarkerTool for Highlighting
Source: https://editorjs.io/inline-tool-basics
This example implements a basic `MarkerTool` that highlights selected text with a <MARK> element. It includes logic to prevent re-highlighting and to determine if the current selection is already marked.
```javascript
class MarkerTool {
static get isInline() {
return true;
}
constructor() {
this.button = null;
this.state = false;
}
render() {
this.button = document.createElement('button');
this.button.type = 'button';
this.button.textContent = 'M';
return this.button;
}
surround(range) {
if (this.state) {
// If highlights is already applied, do nothing for now
return;
}
const selectedText = range.extractContents();
// Create MARK element
const mark = document.createElement('MARK');
// Append to the MARK element selected TextNode
mark.appendChild(selectedText);
// Insert new element
range.insertNode(mark);
}
checkState(selection) {
const text = selection.anchorNode;
if (!text) {
return;
}
const anchorElement = text instanceof Element ? text : text.parentElement;
this.state = !!anchorElement.closest('MARK');
}
}
```
--------------------------------
### HTML Content Example
Source: https://editorjs.io/sanitize-saved-data
An example of editable HTML content within a caption field, including unwanted `div` tags.
```html