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.

# From the download page, grab the package tarball, then:
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