syncfusion-angular-rich-text-editor

Syncfusion Angular Rich Text Editor の実装

Syncfusion Angular Rich Text Editor は、ユーザーがリッチテキストコンテンツを作成、編集、書式設定できる、機能豊富な WYSIWYG エディターです。HTML と Markdown の編集モード、マルチメディアの挿入、AI アシスタンス、スマート編集機能、詳細なカスタマイズに対応しています。

このスキルを使用するタイミング

次のような場合に、このスキルを使用してください。

• コンテンツ編集 UI：Angular アプリケーションにリッチテキスト／WYSIWYG エディターを追加する
• HTML または Markdown 出力：書式設定されたコンテンツを HTML または Markdown として取得する
• メディア対応エディター：画像、音声、動画、ファイルの挿入を可能にする
• AI 支援ライティング：AI によるコンテンツ生成をエディターに統合する
• スマート編集機能：メンション、絵文字ピッカー、スラッシュコマンド、またはメールマージを追加する
• カスタムツールバー：ツールバーの項目やツールを設定、拡張、または制限する
• フォーム連携：Angular のリアクティブフォームまたはテンプレート駆動フォームで RTE を使用する
• ドキュメントのインポート／エクスポート：Word からインポートする、または PDF／Word にエクスポートする

コンポーネントの概要

@syncfusion/ej2-angular-richtexteditor の <ejs-richtexteditor> コンポーネントは、次の機能を提供します。

• HTML と Markdown の編集モード
• 設定可能なツールバー（展開、複数行、スクロール、ポップアップ）
• アップロードに対応した画像、動画、音声、ファイルの挿入
• インライン、IFrame、サイズ変更可能なエディターの各バリエーション
• スマート編集：メンション、絵文字ピッカー、スラッシュメニュー、メールマージ
• AI アシスタントの統合
• インポート／エクスポート（Word、PDF）
• 総合的なアクセシビリティ（WCAG 2.1）、キーボードナビゲーション、RTL 対応
• 複数のテーマ：Tailwind 3、Material 3、Bootstrap 5、Fluent 2

クイックスタート

npm install @syncfusion/ej2-angular-richtexteditor

npm install @syncfusion/ej2-material3-theme

import { Component } from '@angular/core';
import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';
import {
  ToolbarService, LinkService, ImageService,
  HtmlEditorService, QuickToolbarService
} from '@syncfusion/ej2-angular-richtexteditor';

@Component({
  imports: [RichTextEditorModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor [(value)]="content"></ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService]
})
export class AppComponent {
  public content: string = '<p>Start editing here...</p>';
}

CSS（styles.css）：

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

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

参照するタイミング： 初回のセットアップ、インストール、基本的な実装、モジュールの注入

説明するトピック：

• @syncfusion/ej2-angular-richtexteditor のインストール
• モジュールのインポート：RichTextEditorModule と RichTextEditorAllModule
• サービスの注入：利用可能なすべてのサービスと、それらで利用可能になる機能
• CSS テーマのインポート（Material3、Tailwind3、Bootstrap5、Fluent2）
• スタンドアロンコンポーネントと NgModule のセットアップ
• 値のバインディングを使用した基本的な <ejs-richtexteditor>

---

エディターの種類

📄 参照： references/editor-types.md

参照するタイミング： 適切なエディダーのレンダリングモードを選択する場合

説明するトピック：

• デフォルト（DIV ベース）エディター — 標準的な用途
• IFrame エディター — スタイルの分離、CSS のカプセル化
• インライン編集 — ページ内で直接コンテンツを編集
• サイズ変更可能なエディター — ユーザーがエディター領域のサイズを変更
• HTML モードと Markdown モードの切り替え
• 各種類を選択するタイミング

---

ツールバーの設定

📄 参照： references/toolbar.md

参照するタイミング： ツールバーのレイアウト、位置、または項目をカスタマイズする場合

説明するトピック：

• ツールバーの種類：展開、複数行、スクロール、ポップアップ（フローティング）
• ツールバーの位置：上または下
• クイックツールバー（画像、リンク、表のコンテキストツールバー）
• toolbarSettings.items 配列の設定
• ツールバー項目の動的な無効化または有効化
• 区切り（|）と改行を使用したツールバー

---

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

📄 参照： references/tools.md

参照するタイミング： テキストの書式設定、カスタムツールバー項目、または全画面表示を扱う場合

説明するトピック：

• 組み込みツールの概要（利用可能なすべてのツール名）
• テキスト書式設定ツール：Bold、Italic、FontName、FontSize、Color、Alignment
• スタイル設定ツール：Lists、Indent、Formats
• 全画面表示ツール
• コマンドを使用したカスタムツールバーの作成
• カスタムツールボタンのスタイル設定

---

画像、動画、音声、ファイルの挿入

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

読むタイミング： メディアの挿入、アップロード、またはファイルブラウザーを扱うとき

説明されているトピック：

• 画像の挿入（URL、ファイルのアップロード、base64）
• サーバー側アップロードハンドラーの設定
• 画像のサイズ変更、配置、代替テキスト
• 動画の挿入と埋め込み
• 音声の挿入
• ファイルブラウザーの統合（FileManagerService）
• アップロード後のサーバー上での画像名の変更
• 挿入前の画像サイズの確認

---

表とリンク

📄 参照： references/table-and-links.md

読むタイミング： エディター内の表やハイパーリンクを扱うとき

説明されているトピック：

• 表の挿入と設定
• 表のサイズ変更、セルの結合・分割、行と列の追加・削除
• 表のスタイルと枠線
• リンクの挿入と編集
• insertLink ダイアログの設定
• リンクを新しいタブで開く方法、リンクの検証

---

エディターの値、選択範囲、コマンド

📄 参照： references/editor-value-and-selection.md

読むタイミング： プログラムからコンテンツを読み書きする、またはエディターを制御するとき

説明されているトピック：

• HTML 値の取得と設定
• Markdown 値の取得と設定
• executeCommand API（太字、斜体、insertHTML など）
• 選択範囲 API：getRange、setRange
• カーソルを特定の位置に配置する方法
• キーボードショートカットを捕捉して値を更新する方法
• プログラムによる元に戻す／やり直しの制御

---

プロパティ

📄 参照： references/properties.md

読むタイミング： エディターの動作、外観、または機能設定を構成するとき

説明されているトピック：

• AI アシスタントの設定（aiAssistantSettings）
• 自動保存の設定（autoSaveOnIdle）
• カラーパレットの設定（backgroundColor、fontColor）
• コードブロックと書式リスト
• エディターモードの設定（editorMode、enterKey）
• 絵文字ピッカーの設定
• 機能フラグ（enableAutoUrl、enableResize、enableXhtml など）
• インポート／エクスポートの設定（PDF、Word）
• IFrame とインラインモードの設定
• メディア挿入の設定（画像、音声、動画）
• スタイル設定のプロパティ（cssClass、height、htmlAttributes）
• ツールバーと書式の設定
• ファイルマネージャーの統合

---

メソッド

📄 参照： references/methods.md

読むタイミング： エディターを制御するプログラム API を呼び出すとき

説明されているトピック：

• AI アシスタントのメソッド（addAIPromptResponse、clearAIPromptHistory、executeAIPrompt、getAIPromptHistory）
• コンテンツ取得メソッド（getHtml、getText、getXhtml、getContent、getCharCount）
• コンテンツ操作（executeCommand、clearUndoRedo、sanitizeHtml）
• ダイアログ管理（showDialog、closeDialog）
• フォーカス管理（focusIn、focusOut）
• 選択範囲のメソッド（getRange、selectRange、selectAll、getSelection、getSelectedHtml）
• ツールバー管理（enableToolbarItem、disableToolbarItem、removeToolbarItem）
• ポップアップと UI の制御（showEmojiPicker、showFullScreen、showSourceCode、showInlineToolbar、hideInlineToolbar、refreshUI）
• コンポーネントのライフサイクル（destroy）

---

イベント — コア

📄 参照： references/events-core.md

読むタイミング： ライフサイクル、操作、コンテンツ変更、選択範囲、ダイアログ、ポップアップ、クイックツールバー、またはサイズ変更のイベントを処理するとき

説明されているトピック：

• ライフサイクルイベント（created、destroyed、focus、blur）
• 操作イベント（actionBegin、actionComplete）
• コンテンツ変更イベント（change）
• 選択範囲イベント（selectionChanged）
• ダイアログイベント（beforeDialogOpen、dialogOpen、beforeDialogClose、dialogClose）
• ポップアップイベント（beforePopupOpen、beforePopupClose）
• クイックツールバーイベント（beforeQuickToolbarOpen、quickToolbarOpen、quickToolbarClose）
• サイズ変更イベント（resizeStart、resizing、resizeStop）

---

イベント — メディア、アップロード、ツールバー

📄 読む: references/events-media-upload.md

読むタイミング: AI アシスタント、メディア、貼り付け／クリップボード、ツールバー、アップロード、またはインポート／エクスポートのイベントを扱うとき

対象トピック:

• AI アシスタントのイベント（aiAssistantPromptRequest、aiAssistantStopRespondingClick、aiAssistantToolbarClick）
• メディアのイベント（afterImageDelete、afterMediaDelete、beforeImageDrop、beforeMediaDrop）
• 貼り付けとクリップボードのイベント（beforePasteCleanup、afterPasteCleanup、beforeClipboardWrite）
• ツールバーのイベント（toolbarClick、updatedToolbarStatus、slashMenuItemSelect）
• アップロードイベント — 画像のライフサイクル（beforeImageUpload、imageUploading、imageUploadSuccess、imageUploadFailed、imageSelected、imageRemoving）
• アップロードイベント — メディアのライフサイクル（beforeFileUpload、fileUploading、fileUploadSuccess、fileUploadFailed、fileSelected、fileRemoving）
• ドキュメントのインポート／エクスポートイベント（documentExporting、wordImporting）

---

スマート編集機能

📄 読む: references/smart-editing.md

読むタイミング: メンション、絵文字、スラッシュコマンド、またはメールマージを追加するとき

対象トピック:

• メンション（@user）— 設定とデータソース
• 絵文字ピッカー — 有効化とカスタマイズ
• スラッシュコマンドメニュー — / をトリガーとするコマンドの有効化
• メールマージ — コンテンツへの差し込みフィールドの挿入
• 複数のスマート編集機能の組み合わせ

---

AI アシスタントの統合

📄 読む: references/ai-assistant.md

読むタイミング: エディターに AI コンテンツ生成を統合するとき

対象トピック:

• AI AssistView の統合概要
• AIAssistantService の注入
• AI プロパティの設定（エンドポイント、モデル、プロンプト）
• Angular でのカスタム AI プロンプト処理
• ツールバーの AI ボタンの設定
• AI コンテンツの生成と挿入のワークフロー

---

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

📄 読む: references/clipboard-and-paste.md

読むタイミング: コンテンツをエディターに貼り付けたときの動作を制御するとき

対象トピック:

• PasteCleanupService — 貼り付けのクリーンアップの有効化
• 特定の HTML タグと属性の許可／拒否
• Word と Excel からの貼り付け書式のクリーンアップ
• コピー／切り取りのクリーンアップ用 ClipboardCleanupService
• afterPasteCleanup イベントの処理
• プレーンテキストとして貼り付ける設定

---

スタイル設定とアクセシビリティ

📄 読む: references/style-and-accessibility.md

読むタイミング: エディターの外観をカスタマイズするとき、またはアクセシビリティへの準拠を確保するとき

対象トピック:

• CSS クラスのカスタマイズとテーマ設定
• IFrame モードでのスタイルのカプセル化
• カスタムプレースホルダーのスタイル設定
• WCAG 2.1 準拠の概要
• キーボード操作とショートカット
• ARIA 属性とスクリーンリーダーのサポート
• フォーカス管理

---

グローバル化とローカライズ

📄 読む: references/globalization-and-i18n.md

読むタイミング: 複数の言語、RTL、またはロケール固有の書式設定に対応するとき

対象トピック:

• L10n によるローカライズの設定
• RTL（右から左）のサポート
• カスタムロケール文字列の上書き
• エディター内の日付と数値の書式設定

---

インポート、エクスポート、スペルチェック

📄 読む: references/import-export-spellcheck.md

読むタイミング: Word ドキュメントをインポートする、エディターのコンテンツをエクスポートする、またはスペルチェック／文法チェックを追加するとき

対象トピック:

• ImportExportService の注入
• Word ドキュメントからのインポート
• PDF、HTML、または Word へのエクスポート
• スペルチェックの統合
• 文法チェックの統合
• Web Spell Checker プラグインの設定

---

検証とセキュリティ

📄 参照先： references/validation-and-security.md

読むタイミング： フォームでエディターを使用する場合、またはコンテンツのセキュリティを強化する場合

扱うトピック：

• Angular Reactive forms を使用したフォーム検証
• Template-driven forms を使用したフォーム検証
• XHTML の検証
• 読み取り専用モード
• コンテンツのサニタイズ
• XSS の防止策

---

インテグレーションとハウツー

📄 参照先： references/integrations-and-how-to.md

読むタイミング： サードパーティライブラリを統合する場合、または一般的な設定方法を確認する場合

扱うトピック：

• CodeMirror ソースコードエディターの統合
• コードブロックの HighlightJS 構文ハイライト
• Embedly リッチメディアプレビューの統合
• Tailwind CSS の preflight に関する競合の修正
• フォントピッカーへの Google Fonts の追加
• ファイル添付のサポート
• Angular Dialog コンポーネント内での RTE の使用
• Angular Tab コンポーネント内での RTE の使用
• デフォルトのフォントファミリーの変更
• コードブロックの書式設定

よく使用するパターン

双方向の値バインディング

// Template
<ejs-richtexteditor [(value)]="htmlContent"></ejs-richtexteditor>

// Component
public htmlContent: string = '<p>Initial content</p>';

一方向バインディングと変更イベント

<ejs-richtexteditor [value]="htmlContent" (change)="onChange($event)">
</ejs-richtexteditor>

onChange(args: ChangeEventArgs): void {
  this.htmlContent = args.value;
}

Reactive Forms での使用

import { FormControl, ReactiveFormsModule } from '@angular/forms';

// Template
<ejs-richtexteditor formControlName="content"></ejs-richtexteditor>

// Component
this.form = new FormGroup({
  content: new FormControl('<p></p>', Validators.required)
});

主要なサービスの一覧

サービス	提供する機能
ToolbarService	ツールバーの描画と項目の管理
HtmlEditorService	HTML 編集モード
MarkdownEditorService	Markdown 編集モード
LinkService	ハイパーリンクの挿入と編集
ImageService	画像の挿入と管理
TableService	テーブルの挿入と編集
QuickToolbarService	フローティングコンテキストツールバー
FileManagerService	ファイルブラウザーのダイアログ
PasteCleanupService	貼り付けコンテンツのサニタイズ
ResizeService	エディターのサイズ変更ハンドル
ImportExportService	Word／PDF のインポートとエクスポート
AIAssistantService	AI アシスタントの統合
EmojiPickerService	絵文字ピッカーのダイアログ
SlashMenuService	/ スラッシュコマンドメニュー
CodeBlockService	インラインコードブロックの書式設定
AudioService	音声の挿入
VideoService	動画の挿入
FormatPainterService	書式のコピーと適用
ClipboardCleanupService	コピー／切り取り時のクリップボードのクリーンアップ
AutoFormatService	Markdown から HTML への自動変換

関連スキル

• Syncfusion Angular Components — 親ライブラリのスキル