Skip to content

Vanilla JS

The core is one function, createEditor(options). Use it with any bundler, or from a CDN with one script tag.

On this page
Packageopen-wysiwyg-editor(opens in a new tab)

Install

Terminal
npm install open-wysiwyg-editor

Usage

import { createEditor } from "open-wysiwyg-editor";
import "open-wysiwyg-editor/style.css";

const editor = createEditor({
  element: "#editor", // or an HTMLElement
  onUpdate: (editor) => console.log(editor.getHTML()),
});

Good to know

  • Load the stylesheet once, call createEditor() in the browser after the element exists (it throws during server-side rendering), and call editor.destroy() when the element goes away.
  • On a <textarea> the editor hides the field and keeps its value in sync. The textarea's <label> becomes the editor's accessible name.

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