クイックスタート

1. エディターを入手する

方法は 3 つあります。CDN はインストールがまったく不要で、エディターが動くのを見るもっとも手早い方法です。ほかの 2 つは本番環境のデプロイで使われる方法です。

方法 A — ライセンス版のバンドルをダウンロードする

/download にアクセスし、お使いのフレームワーク用のバンドルを入手します。エディターが /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

方法 B — npm（推奨）

npm install @richscripts/richtexteditor

# or scaffold a complete working example app:
npm create @richscripts/richtexteditor my-app -- --react   # also: --vue, --angular, --svelte

次に、ビルドパイプラインからスタイルとバンドルをインポートします。

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

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

方法 C — CDN（インストール不要）

jsDelivr と unpkg はどちらも公開されている npm パッケージをミラーしているので、空の HTML ファイルに 2 つのタグを書くだけでエディターが動きます。ダウンロードもビルドの手順もアカウントも不要です。これを CodePen に貼り付ければ動作します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/rte_theme_default.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/rte.js"></script>

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

これでコアのエディターとそのツールバーが使えます。AI Toolkit、コメント、スラッシュコマンド、メンション、レイアウト用の表など、すべてのプラグインを使うには、タグをもう 1 つ追加します。

<script src="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/plugins/all_plugins.min.js"></script>

省略可能な 1 行。編集面は、自分のオリジンの /richtexteditor/runtime/richtexteditor_content.css にあるコンテンツ用のスタイルシートを要求します。CDN だけを使うページにはこのファイルがないため、ネットワークパネルに 404 が 1 つ表示されます。エディターは同じ既定値をインラインで持っており、どちらにしても編集面にはスタイルが適用されるので、何も壊れません。ただし、CDN 上のコピーを指定すれば、このリクエストはなくなります。

var editor1 = new RichTextEditor("#div_editor1", {
  contentCssUrl: "https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/runtime/richtexteditor_content.css"
});

バージョンを固定してください。上記のパスはすべて、意図的に @2.16.0 を指定しています。固定した URL は変更されず 1 年間キャッシュされるので、知らないうちにページが変わることはありません。@2 は最新の 2.x リリースを指すので、評価中には便利ですが、本番環境では賢明ではありません。ホストを https://unpkg.com/ に替えても、同じパスで動作します。

または、当社のドメインから配信する。同じファイルは cdn.richtexteditor.com でも公開しています。このサイト自体が動かしているのとバイト単位で同じビルドで、Cloudflare のエッジでキャッシュされ、利用者と当社の間に第三者は入りません。

<link rel="stylesheet" href="https://cdn.richtexteditor.com/richtexteditor/rte_theme_default.min.css" />
<script src="https://cdn.richtexteditor.com/richtexteditor/rte.js"></script>
<script src="https://cdn.richtexteditor.com/richtexteditor/plugins/all_plugins.min.js"></script>

トレードオフはバージョンの固定で、こちらは逆になります。これらのパスにはバージョンが含まれないため、常に最新のリリースが配信され、ページを古いバージョンにとどめておくことはできません。ブラウザーには 4 時間ごとに再確認するよう指示しています。上記の jsDelivr の URL はバージョンごとに変更されないので、数か月後にも再現する必要のあるビルドにはこちらが適しています。ページに第三者を加えたくない場合は cdn.richtexteditor.com を、バージョンを確実に固定する必要がある場合は固定した jsDelivr の URL を使ってください。

リリースする前に知っておくべきことが 2 つあります。CDN はページを配信する第三者です。試用、プロトタイプ、バグ報告には便利ですが、エディターを完全に自社のインフラの中にとどめておけるのは、上記のセルフホストの方法であり、それこそが永久ライセンスの意義です。また、CDN によって変わるのはファイルがブラウザーに届く方法であって、ライセンスで許可されている内容ではありません。/license を参照してください。

2. スクリプトを追加して、最初のエディターを作成する

<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>

これで、既定のツールバーを持つエディターが動作します。ブラウザーで開いて入力してみてください。

3. ツールバーをカスタマイズする

2 番目の引数に設定オブジェクトを渡します。

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
});

グループを明示したカスタムのツールバーの場合は次のとおりです。

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

すべてのコマンド名はツールバーとメニュー項目のリファレンスを参照してください。

4. コンテンツを読み書きする

// 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. フォームでコンテンツを送信する

エディターが <form> の中にある場合、RichTextEditor は、エディターのコンテナーの id に対応する非表示のフィールドに、エディターの HTML を自動的に書き込みます。サーバー側では、ほかのフォームのフィールドと同じようにリクエストから読み取ります。動的に送信する場合は、submit ハンドラーから editor.getHTMLCode() を呼び出します。

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

6. 次のステップを選ぶ