Developer Tools

For the people integrating the editor: a state inspector, a content minimap, custom node types with their own export output, importing your site's CSS classes, multiple editable roots, and an editor running inside Shadow DOM.

Release checklist

Features marked PRO ship to paid plans first.

Before release

Run the full test suite and the accessibility audit.

Release day

Publish packages, deploy the site, then announce.

After release

Watch error reports for 48 hours.

Status

Loading the editor...

Multiple roots

Article title

Article body.

Shadow DOM

Demo Code

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<script>
  var editor1 = new RichTextEditor("#div_editor1");

  editor1.stateInspector.toggle();    // live tree, selection, plugins and issues
  editor1.contentMinimap.toggle();    // overview of a long document

  // --- custom node types ------------------------------------------------------
  editor1.nodeTypes.register({
    name: "plan",
    match: "span.plan-tag",           // a selector or a function
    atomic: true, inline: true,
    toMarkdown: function (el) { return "[" + el.textContent + "]"; }
  });
  editor1.toMarkdown();               // uses the node type's own output

  // --- use your site's CSS classes in the style menus -------------------------
  editor1.importStyles();             // -> { applied, truncated, droppedCount, ... }

  // --- one toolbar, several editable regions ----------------------------------
  var title = new RichTextEditor("#title", { multiRootGroup: "article", multiRootName: "title" });
  var body  = new RichTextEditor("#body",  { multiRootGroup: "article", multiRootName: "body" });
  body.multiRoot.getRoots();          // -> ["title", "body"]
  body.multiRoot.getCapabilities();   // shared toolbar; undo stays per root

  // --- inside a web component -------------------------------------------------
  var shadow = host.attachShadow({ mode: "open" });
  var inner = new RichTextEditor(shadow.appendChild(document.createElement("div")));
  inner.isInShadowDom();              // -> true; editor styles adopted into the shadow root
</script>