editor.js

by Imabot

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/link@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/raw"></script>
<script src="https://cdn.jsdelivr.net/npm/editorjs-paragraph-with-alignment@latest"></script>
<div id="editorjs"></div>
<button id="save">Print to console</button>

CSS

#editor {
    border: 2px solid;
}

JavaScript

const editor = new EditorJS({

   // Id of Element that should contain the Editor
   holder : 'editorjs',
   	minHeight : 0,
  	autofocus: true,
  	tools: {
    	header: {
      		class: Header,
      		config: {
        		placeholder: 'Enter a header',
        		levels: [1, 2, 3, 4, 5, 6],
        		defaultLevel: 3
      		}
    	},
		
		list: {
      		class: List,
      		inlineToolbar: true,
      		config: {
        		defaultStyle: 'unordered'
      		}
    	},
	
		paragraph: {
      		class: Paragraph,
      		inlineToolbar: true,
    		},
		
		raw: RawTool,
	
		linkTool: {
      		class: LinkTool,
      		config: {
        		endpoint: 'http://localhost:8008/fetchUrl',
      		}
    	}
		
  	},	
	data : {blocks:[{data:{level:1,text:"Editorjs"},id:"GtRsHIs2An",type:"header"},{data:{text:"This page is a demo of <b>Editorjs</b> rich content editor."},id:"Gw0naGAfqh",type:"paragraph"},{data:{text:"Here is a link to <a href=&quot;https://editorjs.io/&quot;>Editorjs</a>."},id:"ZVXmWKoT94",type:"paragraph"}],time:1676461313687,version:"2.26.5"}
	
});


const el=document.getElementById('save');
el.addEventListener('click', () => {
	editor.save().then((outputData) => {
		console.log (outputData);
	})
})