Web component

<owe-editor> is the full editor as an HTML tag. It is a form-associated custom element in the light DOM, so there is no Shadow DOM and it is CSP-safe.

On this page

Packageopen-wysiwyg-editorRequires Safari 16.4+ for forms

Install

Terminal

npm install open-wysiwyg-editor

Usage

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/open-wysiwyg-editor@1.0.2/dist/style.min.css"
  integrity="sha384-M7pJYu9d/6az43r7DEu11V2wYVSim/wfYwQjrNdn2lOz7ZEiPSh4lW4jwhjKC4RP" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/open-wysiwyg-editor@1.0.2/dist/open-wysiwyg-editor.global.js"
  integrity="sha384-nj2QvSEBeAy8VfG/L3M7Hq+IbVQVrj5RyDnuO0Hy3p7EJrIaMo2Dku4YJoqUiK89" crossorigin="anonymous"></script>

<owe-editor id="editor" placeholder="Write something…">
  <template><p>Hello <strong>world</strong></p></template>
</owe-editor>

<script>
  document.querySelector("#editor").addEventListener("input", (event) => {
    console.log(event.target.value); // '<p dir="auto">Hello <strong>world</strong></p>'
  });
</script>

Good to know

The form submits the editor's HTML under name, and form.reset() restores the starting content. A <label for> pointing at its id becomes the accessible name.
Use the value attribute or a <template> child when the content comes from users: neither can run anything before the editor sanitizes it.

Always sanitize on the server

The editor sanitizes what it loads and produces, but that is not a security boundary: anyone can post any string to your API. Sanitize the HTML again with a library you trust before you store it or render it for other users.

Edit this page on GitHub