Skip to content

Solid

A use:richText directive for Solid 1.6+ and SolidStart. The object you pass is read reactively.

On this page
Package@open-wysiwyg-editor/solid(opens in a new tab)Requires Solid 1.6+

Install

Terminal
npm install @open-wysiwyg-editor/solid

Usage

import { createSignal } from "solid-js";
import { richText } from "@open-wysiwyg-editor/solid";
import "@open-wysiwyg-editor/solid/style.css";

richText; // keeps the import from being tree-shaken

export default function App() {
  const [html, setHtml] = createSignal("<p>Hello <strong>world</strong></p>");

  return (
    <>
      <div
        use:richText={{
          content: html(),
          placeholder: "Write something…",
          onUpdate: (editor) => setHtml(editor.getHTML()),
        }}
      />
      <pre>{html()}</pre>
    </>
  );
}

Good to know

  • Keep the richText; line. TypeScript and Babel drop imports that look unused, and use:richText is only a reference to the function.
  • Directives only run in the browser, so there is nothing to guard with isServer.

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