JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<div class="container">
<div id="editorjs" class="column"></div>
<div id="output" class="column"></div>
</div>
<script>
var editor = new EditorJS({
/**
* Id of Element that should contain the Editor
*/
holder: 'editorjs',
tunes: [],
/**
* Available Tools list.
* Pass Tool's class or Settings object for each Tool you want to use
*/
tools: {
},
/**
* Previously saved data that should be rendered. Load it from local storage.
*/
data: {
"time": 1713204528921,
"blocks": [
{
"id": "CLAw1GQkIK",
"type": "paragraph",
"data": {
"text": "Link me.<br>"
}
}
],
"version": "2.29.1"
},
onChange: () => {
editor.save().then((outputData) => {
console.log(outputData);
const outputElement = document.getElementById('output');
const escapedJson = JSON.stringify(outputData, null, 4)
.replace(/</g, "<")
.replace(/>/g, ">");
outputElement.innerHTML = `<pre><code class="language-json">${escapedJson}</code></pre>`;
}).catch((error) => {
console.log('Saving failed: ', error)
});
},
});
</script>