38 lines
1.2 KiB
HTML
38 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.30.8/dist/editorjs.umd.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="editorjs"></div>
|
|
<script>
|
|
class CustomTool {
|
|
static get toolbox() { return { title: 'Custom', icon: 'C' }; }
|
|
constructor({api}) { this.api = api; }
|
|
render() {
|
|
const div = document.createElement('div');
|
|
div.innerHTML = '<input type="text" placeholder="Click me">';
|
|
div.addEventListener('click', () => {
|
|
const count = this.api.blocks.getBlocksCount();
|
|
for(let i=0; i<count; i++) {
|
|
const b = this.api.blocks.getBlockByIndex(i);
|
|
if (b.holder.contains(div)) {
|
|
console.log("Setting to block", i);
|
|
this.api.caret.setToBlock(i);
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
return div;
|
|
}
|
|
save() { return {}; }
|
|
}
|
|
const editor = new EditorJS({
|
|
holder: 'editorjs',
|
|
tools: { custom: CustomTool },
|
|
data: { blocks: [ { type: 'paragraph', data: { text: 'Block 1' } }, { type: 'custom', data: {} } ] }
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|