Getting started

From install to a typed editor in four steps.

TS RichTextEditor is a typed wrapper around the shipping RichTextEditor runtime. Install the package, call createRichTextEditor, and you have a fully-typed editor instance.

Get the package View demos

1 — Install

Add the package to your project.

Download the package tarball from the download page and install it. The typed declarations and the bundled runtime come with it.

npm install ts-rich-text-editor

# Or, for an air-gapped / version-pinned install, grab the tarball
# from the download page and install it from disk instead:
npm install ./ts-rich-text-editor-0.1.0.tgz

2 — Mount the editor

One async call returns a typed instance.

createRichTextEditor takes the host element, an optional config, and optional asset options, and resolves to a RichTextEditorInstance — the full editor API, typed.

import { createRichTextEditor } from "ts-rich-text-editor";

const host = document.getElementById("editor")!;

// createRichTextEditor(container, config?, assetOptions?) -> Promise<RichTextEditorInstance>
const editor = await createRichTextEditor(host, {
  height: "480px",
});

// The instance is the full RichTextEditor API, typed.
editor.setHTMLCode("<p>Hello <b>world</b></p>");
console.log(editor.getHTMLCode());

3 — Point at your assets (optional)

Serve the runtime from your own path.

By default the loader resolves the bundled runtime. If you host the editor assets under a custom path, pass assetOptions.basePath so the styles, plugins, and language files load from the right place.

// The runtime assets ship inside the package. If you serve them from a custom
// path, point the loader at it with assetOptions.basePath.
const editor = await createRichTextEditor(host, { height: "480px" }, {
  basePath: "/assets/richtexteditor",
});

4 — Lean on the types

Options and the instance are fully typed.

Import RichTextEditorOptions and RichTextEditorInstance to get autocomplete and type-checking on the configuration you actually use and the editor you get back.

import type {
  RichTextEditorOptions,
  RichTextEditorInstance,
} from "ts-rich-text-editor";

const config: RichTextEditorOptions = {
  height: "480px",
  toolbar: "full",
};

function attach(editor: RichTextEditorInstance) {
  editor.focus();
}

Ready to evaluate?

The download bundle includes the typed package, full source, and a self-contained HTML evaluation you can host anywhere.

Download See all features