cnc-html-editor
A block-based document editor built on Editor.js — headers, lists, checklists, tables, quotes, embeds, images and more, each a draggable block. It has NO properties: everything goes through the editor instance on the element.
Quick start
Drop the element in and it mounts an editor. There is no value to bind: the widget
exposes the Editor.js instance as _editor on the host, and reading or writing the
document goes through that.
Click into the editor and press Tab, or the plus, to see the block menu.
<cnc-html-editor id="notes"></cnc-html-editor>
<script>
// after the editor has mounted
const el = document.getElementById('notes')
const doc = await el._editor.save() // { blocks: [ … ] }
</script>On the element
The editor is built from a dozen CDN modules inside an async mount, so
_editor
does not exist immediately — and there is no ready event to wait on. Code that touches it
has to poll or be driven by user action.
| Member | Purpose |
|---|---|
| _editor |
The Editor.js instance, assigned to the host element after mount.
_editor.save()
returns a promise for the document as a block array;
_editor.render(data)
loads one. Everything else is Editor.js's own API.
|
The block tools it ships with
The tool set is fixed in the widget source rather than configurable: header, link, raw HTML, image, checklist, list, embed, quote, warning, delimiter, alert, toggle block, table and marker, with drag-and-drop reordering enabled. Changing the set means changing the widget.
Usage guidance
The document is BLOCKS, not HTML or markdown. save() gives you a structured block
array that needs rendering back into HTML somewhere, so this is the right editor when you own
both ends and the wrong one when the value must be portable text — that is
cnc-markdown-tiptap, whose value is markdown.
Every tool comes from a CDN at mount, most of them pinned to @latest. That means a
network dependency on first paint and a version that can move underneath you, so it suits
internal authoring surfaces rather than anything on a critical path.
Without a ready signal, hold the element and check for _editor before using it. A
save button the user presses is naturally late enough; code running alongside the page is not.