syncfusion-react-rich-text-editor

Syncfusion React リッチテキストエディター

HTML または Markdown 形式でリッチコンテンツを作成・書式設定するための WYSIWYG（見たままが得られる）エディターです。ツールバー、メディアの挿入、AI 支援、スマート編集機能、フォーム検証、詳細なカスタマイズに対応しています。

このスキルを使用する場面

• React アプリでリッチテキスト／WYSIWYG エディターをセットアップする
• ツールバーの項目、種類、位置を設定する
• HTML モードと Markdown モードを切り替える
• 画像、動画、音声、ファイルを挿入する
• 絵文字、スラッシュメニュー、メンション、メールマージなどのスマート編集機能を利用する
• AI アシスタントをエディターに統合する
• エディターの値を扱う：取得、設定、双方向バインディング、自動保存、インポート／エクスポート
• 貼り付け時のクリーンアップ、フォーム検証、読み取り専用モードを適用する
• スタイル、アクセシビリティ、キーボードショートカットをカスタマイズする

クイックスタート

npm install @syncfusion/ej2-react-richtexteditor

npm install @syncfusion/ej2-tailwind3-theme

src/App.css - CSS インポートを追加します

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css';

import './App.css';
import {
  HtmlEditor, Image, Inject, Link,
  QuickToolbar, RichTextEditorComponent, Toolbar
} from '@syncfusion/ej2-react-richtexteditor';

function App() {
  return (
    <RichTextEditorComponent height={450}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
    </RichTextEditorComponent>
  );
}
export default App;

モジュールインジェクションのリファレンス

バンドルを軽量に保つため、アプリに必要なモジュールのみをインジェクトしてください。

モジュール	有効になる機能
Toolbar	ツールバーの表示とコマンド
HtmlEditor	HTML 編集モード（デフォルト）
MarkdownEditor	Markdown 編集モード
Link	ハイパーリンクの挿入／編集／削除
Image	画像の挿入と管理
Video	動画の挿入
Audio	音声の挿入
Table	HTML テーブルの挿入／編集
QuickToolbar	画像／リンク用のフローティングツールバー
PasteCleanup	貼り付けたコンテンツの書式を整理
ClipboardCleanup	コピー／切り取り時にクリップボードを整理
FileManager	サーバー側の画像用ファイルブラウザー
Resize	サイズ変更可能なエディター領域
Count	文字数の表示
EmojiPicker	絵文字の検索と挿入
SlashMenu	スラッシュ / コマンドメニュー
ImportExport	Word のインポート、Word／PDF へのエクスポート
CodeBlock	インラインコードブロックの書式設定
AutoFormat	入力中に Markdown 構文を自動変換
FormatPainter	テキスト書式のコピーと貼り付け
AIAssistant	AI アシスタントの統合

ナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

• インストール、npm のセットアップ、CSS のインポート
• 基本的なコンポーネントの実装
• モジュールインジェクションのパターン
• ツールバー設定の基本
• アプリケーションの実行

エディターモード

📄 参照先： references/editor-modes.md

• HTML エディターモード（デフォルトの WYSIWYG）
• プレビュー付き Markdown エディターモード
• IFrame モードと DIV モード
• インライン編集
• サイズ変更可能なエディター

ツールバーの設定

📄 参照先： references/toolbar-configuration.md

• デフォルトのツールバー項目
• ツールバーの種類：Expand、MultiRow、Scrollable
• ツールバーの位置（上部／下部）
• 固定／フローティングツールバー
• 画像とリンク用のクイックツールバー

ツールバーのツール

📄 参照先： references/toolbar-tools.md

• 組み込みツールのリファレンス（Bold、Italic、Formats など）
• テンプレートを使用したカスタムツールバー項目
• テキスト書式設定ツール
• スタイル設定ツール（フォント、色、配置）
• 全画面表示ツール

メディアの挿入

📄 参照先： references/insert-media.md

• 画像の挿入（URL、アップロード、base64）
• 動画の挿入と設定
• 音声の挿入
• ファイルブラウザーとの統合

コンテンツの挿入

📄 参照先： references/insert-content.md

• テーブル：挿入、サイズ変更、セルの結合
• ハイパーリンク：作成、編集、新しいタブで開く
• コードブロック
• カスタム書式ブロック

スマート編集機能

📄 参照先： references/smart-editing.md

• 絵文字ピッカー
• スラッシュメニュー（/ を入力して開く）
• メンション（ユーザーをタグ付け）
• メールマージ

エディターの値の管理

📄 参照先： references/editor-value.md

• 初期値の設定
• プロパティ、イベント、メソッドによる値の取得
• React の state による双方向バインディング
• saveInterval による自動保存
• Word と PDF のインポート／エクスポート
• Markdown プレビュー
• 文字数と maxLength
• ソースコード表示

貼り付けとクリップボード

📄 参照： references/paste-clipboard.md

• 貼り付けのクリーンアップ設定
• コピー／切り取り時のクリップボードのクリーンアップ
• エディターコマンドのプログラムによる実行

検証とセキュリティ

📄 参照： references/validation-security.md

• フォームのサポートと送信
• XHTML の検証
• 読み取り専用モード
• XSS の防止

AI アシスタント

📄 参照： references/ai-assistant.md

• AI 統合のセットアップ
• AI アシスタントのプロパティ
• AI ツールバーと応答のカスタマイズ

アクセシビリティとグローバル対応

📄 参照： references/accessibility.md

• WCAG 2.1 への準拠
• キーボードショートカット
• グローバル対応、ローカライズ、RTL
• スタイルのカプセル化

スタイリングとカスタマイズ

📄 参照： references/styling-customization.md

• CSS 変数のカスタマイズ
• スタイルのカプセル化（シャドウ DOM）
• サードパーティ統合（CodeMirror、Mention ライブラリ）
• スペルチェック／文法チェック

元に戻す／やり直し

📄 参照： references/undo-redo.md

• 元に戻す／やり直しマネージャーの動作
• キーボードショートカット
• プログラムによる元に戻す／やり直し

Enter キーと選択範囲

📄 参照： references/enter-key-selection.md

• Enter キーの設定（P、BR、DIV）
• 選択範囲 API
• カーソル位置の指定

イベント

📄 参照： references/events.md

• 各イベントの EventArgs 型の値を推測する
• ライフサイクルイベント：created、destroyed、focus、blur
• コンテンツの変更：ChangeEventArgs を伴う change イベント
• アクションイベント：actionBegin（キャンセル可能）、actionComplete
• ツールバーイベント：toolbarClick、updatedToolbarStatus
• ダイアログとポップアップのイベント：beforeDialogOpen/Close、beforePopupOpen/Close
• メディアとファイルのイベント：画像／音声／動画のアップロード、選択、削除、ドロップ
• 貼り付けとクリップボードのイベント：beforePasteCleanup、afterPasteCleanup
• AI アシスタントのイベント：aiAssistantPromptRequest、aiAssistantToolbarClick
• サイズ変更、スラッシュメニュー、選択範囲、クイックツールバー、インポート／エクスポートのイベント

メソッド

📄 参照： references/methods.md

• フォーカスとコンテンツ：focusIn、focusOut、getHtml、getText、getSelectedHtml
• ツールバー：enableToolbarItem、disableToolbarItem、removeToolbarItem
• ダイアログ：DialogType 列挙型を使用する showDialog、closeDialog
• 選択範囲：selectAll、getRange、selectRange
• 元に戻す／やり直し：clearUndoRedo
• AI アシスタント：executeAIPrompt、addAIPromptResponse、getAIPromptHistory、clearAIPromptHistory
• ユーティリティ：executeCommand（すべての CommandName の値）、sanitizeHtml、destroy

プロパティのリファレンス

📄 参照： references/properties.md

• 基本：height、width、enabled、readonly、placeholder、cssClass
• ツールバー：toolbarSettings、quickToolbarSettings、floatingToolbarOffset
• エディターモードと動作：editorMode、iframeSettings、inlineMode、enterKey
• 値とコンテンツ：value、maxLength、showCharCount、saveInterval、enableHtmlSanitizer
• メディア：insertImageSettings、insertVideoSettings、insertAudioSettings、fileManagerSettings
• フォント、色、書式：fontFamily、fontSize、fontColor、backgroundColor、format、codeBlockSettings
• 貼り付け：pasteCleanupSettings、enableClipboardCleanup
• AI アシスタント：aiAssistantSettings（設定の完全なリファレンス）
• インポート／エクスポート：importWord、exportWord、exportPdf
• その他：undoRedoSteps、keyConfig、slashMenuSettings、emojiPickerSettings

操作ガイド

📄 参照： references/how-to.md

• Ctrl キーを捕捉して値を更新する
• デフォルトのフォントファミリーを変更する
• アップロードした画像のサイズを確認する
• プレースホルダーのスタイルをカスタマイズする
• ショートカットキーをカスタマイズする
• ファイル添付
• コードブロックの書式を設定する
• コンテンツの末尾にカーソルを置く
• サーバー上の画像名を変更する
• ダイアログまたはタブ内で RTE を使用する
• 特定の範囲にカーソルを置く
• Tailwind preflight の修正
• プログラムで値を更新する

一般的なパターン

変更時に値を読み取る

import { ChangeEventArgs } from '@syncfusion/ej2-react-richtexteditor';

function App() {
  const onChange = (args: ChangeEventArgs) => {
    console.log(args.value); // HTML string
  };
  return (
    <RichTextEditorComponent change={onChange}>
      <Inject services={[Toolbar, HtmlEditor]} />
    </RichTextEditorComponent>
  );
}

React の状態で値を制御する

const [content, setContent] = useState('<p>Hello</p>');
<RichTextEditorComponent value={content} change={(e) => setContent(e.value)}>
  <Inject services={[Toolbar, HtmlEditor]} />
</RichTextEditorComponent>

Markdown モード

import { MarkdownEditor } from '@syncfusion/ej2-react-richtexteditor';
<RichTextEditorComponent editorMode="Markdown">
  <Inject services={[Toolbar, MarkdownEditor]} />
</RichTextEditorComponent>