Documentation

1. Get the editor

Two paths, pick whichever fits your build.

Option A — Download the licensed bundle

Visit /download.aspx and grab the bundle for your framework. Unzip it into your site so the editor lives at /richtexteditor/:

your-site/
├── richtexteditor/
│   ├── rte.js                       ← protected production build (~410 KB)
│   ├── rte_theme_default.css
│   ├── plugins/
│   │   ├── all_plugins.js           ← AI Toolkit, comments, slash, mentions, etc.
│   │   ├── aitoolkit.css
│   │   ├── crdt-engine.min.js       ← Per-node Yjs CRDT (load only if you use collab)
│   │   └── ...
│   └── lang/                        ← optional translations
└── your-page.html

Option B — npm

npm install @@richscripts2/richtexteditor

Then import the styles + bundle from your build pipeline:

// Side-effect import attaches `RichTextEditor` to `window`.
import "@@richscripts2/richtexteditor/richtexteditor/rte.js";
import "@@richscripts2/richtexteditor/richtexteditor/plugins/all_plugins.js";

// Or via the typed React wrapper (Vue / Angular wrappers shipped too):
import { RichTextEditorComponent } from "@@richscripts2/richtexteditor/react";

2. Add the script and create your first editor

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<div id="div_editor1">Hello RichTextEditor</div>
<script>
    var editor = new RichTextEditor("#div_editor1");
</script>

That's a working editor with the default toolbar. Open it in a browser and start typing.

3. Customise the toolbar

Pass a config object as the second argument:

var editor = new RichTextEditor("#div_editor1", {
    toolbar:    "basic",      // "basic" | "full" | "mobile" | "custom"
    height:     "500px",
    showStatistics:  true,    // word / character count in the bottom bar
    showFloatTextToolBar: true
});

For a custom toolbar with explicit groups:

var editor = new RichTextEditor("#div_editor1", {
    toolbar: "custom",
    toolbar_custom:
        "{bold,italic,underline}|" +
        "{insertorderedlist,insertunorderedlist}|" +
        "{insertlink,insertimage}|" +
        "{aiassist,aichat}|" +
        "{undo,redo}"
});

See toolbar & menu items reference for every command name.

4. Read and write content

// Get the current HTML
var html = editor.getHTMLCode();

// Replace the editor's content
editor.setHTMLCode("<p>New content</p>");

// Get plain text (no markup)
var text = editor.getPlainText();

// Get a structured-content JSON document (lossless round-trip with setJSON())
var json = editor.getJSON();
editor.setJSON(json);

5. Submit content with a form

If your editor sits inside a <form>, RichTextEditor automatically writes the editor's HTML into a hidden field that mirrors the editor's container id. Server-side, you read it from the request like any other form field. For dynamic submissions, call editor.getHTMLCode() from your submit handler:

document.getElementById("save").addEventListener("click", function () {
    fetch("/api/save", {
        method:  "POST",
        headers: { "Content-Type": "application/json" },
        body:    JSON.stringify({ html: editor.getHTMLCode() })
    });
});

6. Pick your next step