Editor.js Example

by jonjieviduya

HTML

<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<div id="editorJS" class="form-control"></div>
<button id="save-button">Save</button>
<pre id="output"></pre>

CSS

*{ font-family: arial; }

.form-control {
    background-color: #fff;
    border: 2px solid #aaa;
    transition: all 0.3s ease;
}

JavaScript

class SimpleImage{
	static get toolbox() {
    return {
      title: 'Image',
      icon: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>'
    };
  }
  
	render(){
    return document.createElement('input');
  	}
   
   save(blockContent){
    return {
      url: blockContent.value
    }
  }
}


const editor = new EditorJS({
   holder: 'editorJS',
   tools: {
      header: Header,
      image: SimpleImage,
      embed: Embed,
      quote: Quote
   }
});

const saveButton = document.getElementById('save-button');
const output = document.getElementById('output');

saveButton.addEventListener('click', () => {
   editor.save().then( savedData => {
      output.innerHTML = JSON.stringify(savedData, null, 4);
   })
})