ドキュメント
エディターをインストールして設定し、コードから制御する方法を解説します。ガイドとリファレンスは全 108 ページです。
まずはここから
クイックスタート
RichTextEditor 2.6.12 を動かしましょう。セットアップの方法を選び、最初のエディターを作成し、HTML を読み取って保存し、よくあるセットアップの問題を解決します。
設定リファレンス
RichTextEditor の設定一覧です。コア設定、スマートタイポグラフィ、iframe の安全性に加え、AI、出力、ページ分割、アクセシビリティ、コンテンツの安全性に関する 100 以上のプラグイン設定を説明します。
すべてのメソッド
RichTextEditor のインスタンスの JavaScript API メソッドの完全なリファレンス。コンテンツ、選択範囲、コマンド、ダイアログ、ライフサイクルのメソッド。
AI Toolkit
AI Toolkit のリファレンス：Ask AI ダイアログ、AI Chat、AI Review、aiToolkitResolver フック、オペレーションの仕様、カスタムアクション、BYOK。
はじめに
エディターのインストール、セットアップ、設定の方法。
クイックスタート
RichTextEditor 2.6.12 を動かしましょう。セットアップの方法を選び、最初のエディターを作成し、HTML を読み取って保存し、よくあるセットアップの問題を解決します。
インストール（div）
div 要素に RichTextEditor をインストールします。rte.js を読み込み、インスタンスを作成し、独自のスクリプトから HTML コンテンツを読み取りまたは設定します。
インストール（textarea）
textarea に RichTextEditor をインストールします。エディターは HTML を自動的にフォームのフィールドに同期するので、既存のフォームの POST はそのまま動作します。
初期化
RichTextEditor JavaScript global enables you to create, modify and interact with instances of the editor. This is the starting point for any integration.
設定
RichTextEditor は、編集の使い勝手に合わせて、さまざまな方法で設定できます。
設定リファレンス
RichTextEditor の設定一覧です。コア設定、スマートタイポグラフィ、iframe の安全性に加え、AI、出力、ページ分割、アクセシビリティ、コンテンツの安全性に関する 100 以上のプラグイン設定を説明します。
スキン
スキンとテーマの設定。ツールバーのスキンを切り替え、CSS 変数を上書きし、エディターの外観を自社の製品に合わせてスタイル変更します。
コンテンツの設定と取得
JavaScript から RichTextEditor の HTML コンテンツを設定・読み取りする一般的な方法。フォームを送信する前に読み戻す方法も含みます。
React の state とカーソルの問題
RichTextEditor の React での状態を、制御されたもの（controlled）にするか非制御（uncontrolled）にするかを選びます。現在の HTML を保存し、古い自動保存のレスポンスを防ぎ、カーソルが飛ぶ問題、再マウント、Strict Mode のクリーンアップを診断します。
フォームの検証と必須項目
空の HTML をコンテンツとして数えずに、RichTextEditor の必須フィールドを検証します。textarea を同期し、アクセシブルなエラーを表示し、サーバーでも検証を繰り返します。
よくある質問
RichTextEditor の組み込み、設定、ライセンス、ブラウザーのサポート、トラブルシューティングに関するよくある質問への回答。
AI
AI 執筆ツールと、任意のプロバイダーの接続。
AI Toolkit
AI Toolkit のリファレンス：Ask AI ダイアログ、AI Chat、AI Review、aiToolkitResolver フック、オペレーションの仕様、カスタムアクション、BYOK。
AI プロバイダー、ストリーミング、DOCX
組み込みの OpenAI / Anthropic / Azure OpenAI のプロバイダーリゾルバー、Server-Sent Events によるストリーミング、サーバー側での DOCX エクスポート。
BYOK キー保管庫（テナントごとのキー）
Charge AI traffic to each tenant's own provider account via the IAiKeyVault abstraction, with reference implementations, admin REST API, and cost ledger.
文書作成
Word へのエクスポート、ページレイアウト、構造化コンテンツ、入力。
DOCX の再現性とセキュリティ
テスト済みの HTML から DOCX への対応表、リクエストの仕様、レビューのマークアップの規約、画像のセキュリティ境界、意図的な制限。
ページ分割と法律文書形式の番号付け
ページ分割表示（A4、Letter、Legal。ヘッダー、フッター、ページ番号付き）と、多階層の法律文書形式の番号付け。標準ライセンスに含まれます。
脚注、書式のコピー、大文字と小文字の変換
番号が自動で振られる脚注、文字の書式をコピーする書式のコピー、大文字と小文字の変換（UPPER、lower、Title、Sentence）。標準ライセンスに含まれます。
構造化コンテンツ
構造化 JSON、Markdown への変換、静的な HTML のレンダリング、検証に関する RichTextEditor のドキュメント。
音声入力
Web Speech API による音声のテキスト変換。ツールバーのマイクボタン、リアルタイムの途中の書き起こし、オプトイン。
モバイルツールバーモード
44x44 のタップ領域、横スクロールするツールバー、固定表示のヘッダー、ボトムシートのダイアログを備えた、オプトインのモバイル用スタイルシート。
共同編集
コメント、変更履歴、リアルタイム編集。
画像とアップロード
画像やファイルのアップロード、保存、閲覧。
ファイルのアップロード
カスタムハンドラー、検証、進捗のコールバック、サーバー側の保存の制御を使って、RichTextEditor の安全なファイルアップロードを設定します。
画像ギャラリーのパス
「Insert Gallery」ダイアログを自分の画像に向けます。フォルダーの JSON の仕様、フォルダーを URL に変換する方法、ASP.NET、ASP.NET Core、PHP のエンドポイントのコード。
画像をファイルとして保存する
本番環境向けの画像の構成：アップロードとギャラリーのフォルダーを作成し、アップロードハンドラーを接続し、base64 の埋め込みを無効にし、サーバーで base64 を拒否し、既存の base64 の画像をファイルに移します。ASP.NET Core、ASP.NET、PHP。
画像アップロードの問題を解決する
RichTextEditor の画像アップロードを順を追って診断します。リクエストが送られない、403 と 413 のエラー、無効なレスポンス、壊れた画像の URL、保存後に消える画像。
クラウドアップロードプロバイダー
Send uploads to S3, Azure Blob, Cloudinary, or any custom backend via IRichTextBoxUploadStore. Reference implementations included.
カスタマイズと拡張
ツールバー、コマンド、イベント、独自のプラグイン。
API の基本
エディターには、コンテンツの読み取りと更新を行うクライアント側のメソッドがあります。
ツールバーとメニュー項目のリファレンス
Every toolbar and menu item identifier RichTextEditor supports, grouped by category, for building custom toolbars in config.toolbar strings.
すべてのコマンド（execCommand）
execCommand() のコマンドの完全なリファレンス。書式設定、ブロック、リスト、表、メディア、ダイアログのコマンドと、その引数のシグネチャ。
すべてのプロパティ
RichTextEditor のインスタンスの読み取り専用プロパティ。独自のコードからエディターに関連するオブジェクトにアクセスするためのものです。例付き。
すべてのメソッド
RichTextEditor のインスタンスの JavaScript API メソッドの完全なリファレンス。コンテンツ、選択範囲、コマンド、ダイアログ、ライフサイクルのメソッド。
イベントを処理する
runjsevent のリファレンス：ツールバーのボタンを独自の JavaScript ハンドラーに接続し、アプリケーションのコードからエディターのコマンドに対応します。
はじめてのプラグインを作る
RichTextEditor のプラグインを最初から最後まで作ります。登録、設定の既定値、ツールバーのボタン、コマンド、イベントバス、そしてそれが保存されるコンテンツに与える影響。
バンドルサイズとプラグインの絞り込み
既定では、すべてのプラグインが all_plugins.min.js に含まれています。使うプラグインだけを読み込めば、エディターは gzip で 529 KB から 214 KB になります。ブログ、文書、レビュー、共同編集向けの計測済みのプリセットと、それぞれの script タグ。
機能を 1 つずつ解説
各機能でできること、有効にする方法、そのオプション。
絵文字ピッカー
8 カテゴリー、最近使った項目、キーボード操作に対応する、検索可能な 1,037 個の絵文字ピッカーです。絵文字は通常の Unicode 文字として保存します。
絵文字の自動補完
:smile: で絵文字を入力し、コロンと数文字で候補を選べます。ショートコードの対応表、独自コードの追加、元に戻す操作を説明します。
コンテンツテンプレート
プレビュー付きの検索可能なダイアログで文書テンプレートを提供します。htmlTemplates の定義、指定形式、内容の置換について説明します。
数式
プレビュー付きダイアログから TeX・LaTeX 数式を挿入します。ページの KaTeX・MathJax の利用、保存内容、表示方法を説明します。
Mermaid 図
Mermaid テキストからフローチャート、シーケンス図、円グラフ、ガントチャートを作ります。Mermaid の読み込みやサーバー描画、保存内容、後からの表示を説明します。
ブックマークカード
リンクをタイトル、説明、アイコン、画像付きのプレビューカードとして挿入します。エディター自身は取得せず、bookmarkResolver を独自のエンドポイントにつなぎます。
自動埋め込み
YouTube、Vimeo、Loom などの動画リンクを単独の行に貼り付け、16:9 のプレーヤーにします。対応サイト、独自プロバイダー、保存するマークアップを説明します。
スマートチップ
機械可読な値を保存する、日付・ユーザー・リンクのインラインチップです。日付の簡単入力、独自の chipResolver による候補、保存マークアップを説明します。
レイアウト用テーブル
配置専用のテーブルに role=presentation を付け、スクリーンリーダーがグリッドを読み飛ばせるようにします。コマンド、スラッシュメニュー、API、変更内容を説明します。
@メンション
@ を入力し、固定リストやサーバー検索からユーザーを選びます。チップは HTML にユーザー id を保存するため、サーバーでメンション先を確認できます。
ゴーストテキスト補完
独自のリゾルバー関数による灰色のインライン提案をキャレット後に表示します。Tab で採用、Esc で閉じます。モデルは付属せず、独自の AI エンドポイントを呼び出します。
インラインコード
inlinecode ボタンやコマンドで単語・選択範囲をコードにします。単純な <code> 要素として保存し、もう一度押すと解除します。
見出しの折りたたみ
見出し横の矢印やスクリプトで、その下のセクションを折りたたみます。画面上だけの動作で、保存 HTML には全セクションを残します。
ギャップカーソル
先頭のテーブルの前や、テーブル・水平線・画像の間に段落を追加します。矢印キー、隙間のクリック、ブロック間の青い目印を使えます。
テーブルの並べ替えと行番号
数値・金額・日付を判別して列を基準に行を並べ替え、自動採番する行番号列を追加し、メニューから行・列を移動します。
読みやすさの統計
Flesch Reading Ease、Flesch-Kincaid 学年、読書時間、単語・文・音節数をブラウザー内で計算します。ダイアログ表示とスクリプトからの取得に対応します。
読み上げ
ブラウザーの音声合成で文書・選択範囲を文単位に読み上げます。小さなバーで再生、一時停止、音声、速度を操作できます。
画像エディター
文書内の画像を切り抜き、回転、反転し、描画、テキスト、フィルターを追加します。保存時は PNG をアップロードハンドラーへ送り、なければ data URL で埋め込みます。
スペルチェック
編集領域のブラウザーのスペルチェックと、独自サービスの候補をレビューパネルに表示する Spell Check コマンドを使えます。
テキストの一部の言語
単語や一節を span lang でフランス語、ヘブライ語などに指定し、スクリーンリーダーが正しく発音できるようにします（WCAG 3.1.2 一部分の言語）。
右から左へのインターフェイス
アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語の利用者向けに、ツールバー、メニュー、ダイアログ、ステータスバーを自動または常時左右反転します。内容は変えません。
スタイルの取り込み
サイトのスタイルシートの CSS クラスから段落、インライン、画像、リンクのスタイルメニューを作り、セレクターの要素ごとに分類します。
メール用 HTML
getEmailHTML() は計算済みスタイルをインライン化し、class と id を除去し、固定幅テーブルで囲んで、メールクライアントでも表示を維持します。
複数の編集領域
タイトル、概要、本文など複数のエディターをグループ化します。使用中の領域だけにツールバーを表示し、1 つの API で全領域をまとめて保存・読み込みできます。
Shadow DOM
シャドウルートや Web コンポーネント内でエディターを動かします。プラグインは後から追加したものも含め、スタイルシートをシャドウルートにコピーします。
ダイアログのアクセシビリティ
ダイアログに dialog ロール、タイトルに基づく名前、入力欄のアクセシブル名を付け、スクリーンリーダーが単なる編集欄ではなく URL などと読み上げるようにします。
アクセシビリティと運用
WCAG への準拠と、本番環境でのエディターの運用。
アクセシビリティ（WCAG 2.2 AA）
RichTextEditor の WCAG 2.2 レベル AA への準拠の目標、現在できていること、把握している不足点、サポートしている支援技術の組み合わせ。
アクセシビリティチェッカーのルール
組み込みのアクセシビリティチェッカーがエディターのコンテンツに適用するすべてのルール、それぞれが検出するもの、ワンクリックで修正できるもの、そして自分でチェッカーを実行するための JavaScript API。
本番運用
RichTextEditor と RichTextBox.AspNetCore を本番環境で運用する：レート制限、HTTP の再試行、監査ログ、ヘルスプローブ、冪等性、BYOK。
メソッドリファレンス
エディターのすべてのメソッドを 1 ページずつ解説。
execCommandattachEventdetachEventgetHTMLCodesetHTMLCodegetPlainTextgetReadOnlysetReadOnlyisCommandEnabledisCommandActivesetContentCssTextsetPreviewCssTextinsertRootParagraphinsertByTagNamesurroundByTagNameinsertElementsurroundElementinsertTextinsertHTMLselectControlselectDoccollapsedeletefocuscommitBookmarkclearHistorynotifySelectionChangehtmlEncodehtmlDecodegetDocumentgetEditablegetSelectiongetSelectedControlgetSelectionElementgetSelectedTextgetJSON（ブリッジ）setJSON（ブリッジ）createToolbarButtoncreateToolbarDropDowncreateDialogcloseCurrentPopupsetImageForCommand
イベント
エディターが発生させるイベントと、その受け取り方。
動いているところを見たい場合は
このドキュメントで紹介しているすべての機能に、編集して中身を確認できるライブデモがあります。