syncfusion-javascript-rich-text-editor

Syncfusion Rich Text Editor の実装

TypeScript で Syncfusion Rich Text Editor（RTE）と Markdown Editor を実装するための統合スキルです。どちらのエディターも同じ RichTextEditor クラスと @syncfusion/ej2-richtexteditor パッケージを共有しており、違いは editorMode プロパティと、インジェクトする機能モジュールだけです。

エディターモードの選択ガイド

WYSIWYG／書式付き HTML コンテンツを使いたい場合 → editorMode: 'HTML'（デフォルト）を使用し、HtmlEditor をインジェクトします

Markdown／プレビュー付きのプレーンテキストを使いたい場合 → editorMode: 'Markdown' を使用し、MarkdownEditor をインジェクトします

iframe による分離を使いたい場合 → HTML モードに iframeSettings: { enable: true } を追加します

インライン編集を使いたい場合 → HTML モードに inlineMode: { enable: true } を追加します

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

ユーザーが次の作業を必要としている場合に、このスキルを使用します。

• ブログ投稿、コメント、メール、CMS コンテンツ向けのリッチテキスト／WYSIWYG エディターを構築する
• ドキュメント、メモ、開発者ツール向けにライブプレビュー付きの Markdown エディターを構築する
• ツールバーをカスタマイズする — 項目の追加／削除、レイアウトの変更、カスタムツールの追加
• メディアを挿入する — 画像、音声、動画、ファイルブラウザーとの連携
• スマート編集を有効にする — @mention、スラッシュコマンド、絵文字ピッカー、メールマージ
• エディターに AI ライティング支援を追加する
• エディターの値を処理する — HTML または Markdown コンテンツの取得／設定、自動保存、文字数カウント
• エディター内で表やリンクを操作する
• 検証を設定する — フォーム連携、XHTML 検証、読み取り専用モード
• エディターのスタイルやテーマを設定する — フォント、色、CSS のカスタマイズ
• コンテンツをインポート／エクスポートする — Word／PDF／Markdown のインポートとエクスポート

トリガーキーワード： RichTextEditor、MarkdownEditor、editorMode、WYSIWYG、リッチテキスト、Markdown エディター、コンテンツエディター、テキスト書式設定、ej2-richtexteditor、インラインエディター、iframe エディター

---

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• パッケージのインストールと CSS のインポート
• モジュールのインジェクション（HtmlEditor と MarkdownEditor）
• HTML エディターの初期化
• Markdown エディターの初期化
• セットアップ時のツールバー設定
• 機能モジュールの参照表

エディターモードと種類

📄 参照： references/editor-modes.md

• HTML モードと Markdown モードの選択
• iframe エディター（スタイルを分離した編集）
• インライン編集（選択時にツールバーを表示）
• サイズ変更可能なエディター
• editorMode API とモードの切り替え

ツールバーの設定

📄 参照： references/toolbar.md

• ツールバーの種類：Expand、MultiRow、Scrollable、Popup
• ツールバーの位置：上部／下部
• 固定（フローティング）ツールバー
• 画像、リンク、表、音声、動画、テキスト用のクイックツールバー
• セパレーターの使用方法（| と -）

ツール（組み込みとカスタム）

📄 参照： references/tools.md

• 組み込みツールの完全な一覧（テキスト、フォント、配置、リストなど）
• ツールバーへのツールの追加と削除
• カスタムツールバーコマンドの作成
• プログラムによるツールバー項目の有効化／無効化
• テキストの書式設定、スタイル設定、全画面表示ツール

エディターの値（取得／設定／保存）

📄 参照： references/editor-value.md

• value／valueTemplate を使った初期コンテンツの設定
• HTML コンテンツの取得：editor.value、getHtml()、getText()
• 変更イベントと自動保存（saveInterval）
• 文字数カウントと最大文字数
• エンコードされた HTML 出力（enableHtmlEncode）
• ソースコードの編集（SourceCode ツール）
• プレースホルダーテキスト

画像とメディアの挿入

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

• 画像の挿入（URL、アップロード、ドラッグ＆ドロップ）
• 音声と動画の挿入
• ファイルブラウザーとの連携
• アップロードの設定（サーバーへのアップロード、名前変更）
• 画像／メディア用のクイックツールバー

表

📄 参照： references/table.md

• 表の作成（ツールバー、プログラムによる作成）
• 表のクイックツールバー操作
• セルのプロパティ、配置、結合／分割
• 表のスタイルのカスタマイズ

リンク

📄 参照： references/link.md

• ハイパーリンクの挿入
• リンクのクイックツールバー（開く、編集、削除）
• URL の自動リンク化

スマート編集

📄 参照： references/smart-editing.md

• @メンションの統合
• スラッシュメニュー／スラッシュコマンド
• 絵文字ピッカー
• 動的なプレースホルダーを使ったメールマージ

AI アシスタント

📄 参照： references/ai-assistant.md

• AI アシスタントパネルの統合
• AI アシスタントのプロパティと設定
• AI 提案 UI のカスタマイズ

Markdown 固有の機能

📄 参照： references/markdown-features.md

• サポートされる Markdown 構文（見出し、リスト、太字、斜体など）
• カスタム Markdown フォーマットの定義
• Markdown のライブプレビュー（分割ペイン）
• Markdown モードでの画像／テーブルの挿入
• Markdown モードでのメンションのサポート
• Markdown 専用のツールバー項目

コンテンツ操作

📄 参照： references/content-operations.md

• コードブロックのサポート
• テキスト選択 API
• クリップボードのクリーンアップ
• 貼り付け時のクリーンアップ（Word からの貼り付け、HTML のクリーンアップ）
• 元に戻す／やり直しの設定
• コマンドのプログラムによる実行（executeCommand）
• Enter キーの設定（P、BR、DIV）

インポートとエクスポート

📄 参照： references/import-export.md

• Word／HTML ドキュメントをエディターにインポート
• エディターのコンテンツを Word／PDF にエクスポート
• Markdown のインポート／エクスポート

スタイルと外観

📄 参照： references/style-appearance.md

• CSS のカスタマイズと cssClass
• スタイルのカプセル化
• カスタム Google フォントの追加
• スペルチェックと文法チェック
• グローバリゼーション（RTL、ローカライズ）
• Tailwind CSS の preflight に関する回避策
• デフォルトフォントの設定
• プレースホルダーテキストのスタイリング

検証とセキュリティ

📄 参照： references/validation-security.md

• RTE と HTML フォームの統合
• XHTML の検証と XSS の防止
• 読み取り専用モード

使用例

📄 参照： references/how-to.md

• Dialog 内の RTE
• Tab コントロール内の RTE
• ファイル添付のサポート
• ファイルサイズの制限
• コードブロックのフォーマット
• カスタムショートカットキー
• 保存機能
• カーソル位置の制御
• サーバー上の画像の名前変更

プロパティリファレンス

📄 参照： references/properties.md

• すべての RichTextEditor プロパティの型、デフォルト値、説明を含む完全な一覧
• 複雑なモデルプロパティ（ツールバー、画像、テーブル、フォント、色、AI アシスタントなど）のサブタイプの詳細
• 主要なプロパティのコード例

メソッドリファレンス

📄 参照： references/methods.md

• すべてのパブリックインスタンスメソッドのシグネチャと戻り値の型を含む完全な一覧
• パラメーターの詳細と使用例
• 完全な CommandName 列挙型と引数インターフェイスを含む executeCommand
• 静的な Inject メソッドと利用可能なモジュール一覧

イベントリファレンス

📄 参照： references/events.md

• すべてのコンポーネントイベントの型とイベント引数の詳細を含む完全な一覧
• ライフサイクルイベント：created、destroyed、blur、focus、change
• 画像、音声、動画のアップロードイベント
• AI アシスタントイベント：aiAssistantPromptRequest、aiAssistantToolbarClick、aiAssistantStopRespondingClick
• ツールバー、ポップアップ、ダイアログ、クイックツールバー、サイズ変更、選択イベント

---

クイックスタート

npm install @syncfusion/ej2-angular-richtexteditor

npm install @syncfusion/ej2-tailwind3-theme

HTML エディター（WYSIWYG）

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

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);

const editor = new RichTextEditor({
  toolbarSettings: {
    items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',
            'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|',
            'SourceCode', 'Undo', 'Redo']
  },
  value: '<p>Start editing here...</p>'
});
editor.appendTo('#editor');

<div id="editor"></div>

Markdown エディター

import { RichTextEditor, Toolbar, Link, Image, MarkdownEditor } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, MarkdownEditor);

const editor = new RichTextEditor({
  editorMode: 'Markdown',
  toolbarSettings: {
    items: ['Bold', 'Italic', 'StrikeThrough', 'InlineCode', '|',
            'Formats', 'Blockquote', '|', 'OrderedList', 'UnorderedList',
            'CreateLink', 'Image', 'CreateTable', '|', 'Undo', 'Redo']
  },
  value: '## Hello Markdown\n\nStart writing here...'
});
editor.appendTo('#editor');

---

よく使われるパターン

フォーム送信時にエディターの値を取得する

const form = document.getElementById('myForm');
form.addEventListener('submit', () => {
  const content = editor.value; // HTML string or Markdown string
  console.log(content);
});

コンテンツを自動保存する

const editor = new RichTextEditor({
  saveInterval: 5000, // save every 5 seconds of inactivity
  change: (args) => {
    localStorage.setItem('draft', args.value);
  }
});

読み取り専用モード

editor.readonly = true;

コンテンツをプログラムで設定する

editor.value = '<p>New content</p>';
editor.dataBind(); // apply the change

---

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

機能	インジェクションするモジュール
HTML の編集	HtmlEditor
Markdown の編集	MarkdownEditor
ツールバー	Toolbar
ハイパーリンク	Link
画像	Image
音声	Audio
動画	Video
テーブル	Table
クイックツールバー	QuickToolbar
ペーストのクリーンアップ	PasteCleanup
文字数カウント	Count
サイズ変更	Resize
ファイルマネージャー	FileManager
メンション	Mention（ej2-dropdowns から）

必要なものだけをインジェクションしてください。各モジュールによってバンドルサイズが増加します。new RichTextEditor(...) の前に、必ず RichTextEditor.Inject(...) を呼び出してください。