syncfusion-blazor-rich-text-editor

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

Syncfusion Blazor リッチテキストエディター（SfRichTextEditor）を実装および設定するための包括的なスキルです。HTML と Markdown の編集、豊富なツールバーのカスタマイズ、メディアの挿入、テーブル、データバインディング、インポート／エクスポート、アクセシビリティに対応した、多機能な WYSIWYG エディターです。

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

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

• Blazor Server、WebAssembly、または Web App プロジェクトに SfRichTextEditor をインストールしてセットアップする
• ツールバー項目、ツールバーの種類（Expand、MultiRow、Scrollable、Popup）、またはツールバーの位置を設定する
• テキストの書式を設定する：太字／斜体／下線、見出し、リスト、配置、色、フォント、行の高さ
• アップロードに対応した画像、動画、音声の挿入と管理を行う
• テーブルを操作する：挿入、サイズ変更、セルの結合、クイックツールバーのカスタマイズ
• HTML、Markdown、または IFrame のエディターモードを切り替える
• インライン編集（インラインツールバー）を有効にする
• カスタムツールバーのツールを追加する、または exec コマンドを使用する
• RTE イベント（ValueChange、OnActionBegin、画像アップロードイベントなど）を処理する
• @bind-Value でコンテンツを双方向バインドする、または GetTextAsync で取得する
• 貼り付け時のクリーンアップ動作を設定する
• Word からインポートする、または Word や PDF にエクスポートする
• アクセシビリティ、キーボードショートカット、RTL、グローバリゼーションに対応する

クイックスタート

1. NuGet パッケージをインストールします：

dotnet add package Syncfusion.Blazor.RichTextEditor
dotnet add package Syncfusion.Blazor.Themes

2. Program.cs に登録します：

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

3. _Imports.razor に追加します：

@using Syncfusion.Blazor
@using Syncfusion.Blazor.RichTextEditor

4. index.html（WASM）または App.razor（Server）に CSS／JS を追加します：

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

5. コンポーネントを追加します：

<SfRichTextEditor @bind-Value="@Content">
    <RichTextEditorToolbarSettings Items="@Tools" />
</SfRichTextEditor>

@code {
    private string Content { get; set; } = "<p>Start editing...</p>";

    private List<ToolbarItemModel> Tools = new()
    {
        new() { Command = ToolbarCommand.Bold },
        new() { Command = ToolbarCommand.Italic },
        new() { Command = ToolbarCommand.Underline },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Formats },
        new() { Command = ToolbarCommand.Alignments },
        new() { Command = ToolbarCommand.OrderedList },
        new() { Command = ToolbarCommand.UnorderedList },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.CreateLink },
        new() { Command = ToolbarCommand.Image },
        new() { Command = ToolbarCommand.CreateTable },
        new() { Command = ToolbarCommand.Separator },
        new() { Command = ToolbarCommand.Undo },
        new() { Command = ToolbarCommand.Redo }
    };
}

ナビゲーションガイド

はじめにとセットアップ

📄 参照： references/getting-started.md

• すべてのプロジェクトタイプ向けの NuGet インストール方法（Visual Studio、VS Code、.NET CLI）
• サービスの登録と名前空間のインポート
• CSS テーマと JS スクリプトの参照
• ページへの最初のコンポーネントの追加
• HTML、プレーンテキスト、または文字数としてコンテンツを取得する方法

ツールバーの設定

📄 参照： references/toolbar.md

• RichTextEditorToolbarSettings.Enable によるツールバーの有効化または無効化
• ツールバーの種類：Expand、MultiRow、Scrollable、Popup
• フローティングツールバーとオフセットの設定
• ツールバーの位置（上または下）
• ToolbarItemModel を使用したツールバー項目の設定
• カスタムツールバー項目（テンプレートベース）

組み込みツールバーのツールリファレンス

📄 参照： references/built-in-tools.md

• すべての ToolbarCommand 列挙値の一覧
• テキストの書式設定、フォントとスタイル、配置、リスト、ハイパーリンク
• 画像／テーブル／リンクのクイックツールバー項目コマンド
• 元に戻す／やり直し、全画面表示、印刷、ソースコード、プレビューツール
• 既定のツールバー項目の削除または並べ替え

テキストの書式設定

📄 参照： references/text-formatting.md

• 太字、斜体、下線、取り消し線、下付き文字、上付き文字、インラインコード
• テキストの配置（左、中央、右、両端揃え）
• カスタムの番号スタイルと箇条書きスタイルを使用した順序付き／順序なしリスト
• 見出し形式（H1～H6、段落、引用、コード）
• 行の高さの設定
• 水平線、書式のコピー、書式のクリア
• Markdown の自動書式設定（インラインおよびブロックのショートカット）

画像、動画、音声

📄 参照： references/images-and-media.md

• ローカルマシンまたは URL から画像を挿入する
• RichTextEditorImageSettings：SaveUrl、Path、AllowedTypes、EnableResize
• Base64 とサーバー側アップロード
• 画像クイックツールバーの設定
• 動画と音声の挿入および設定

テーブル

📄 参照： references/tables.md

• CreateTable ツールバー項目を使用してテーブルを作成する
• RichTextEditorTableSettings：幅、サイズ変更、カスタムスタイル
• テーブルのクイックツールバー：行と列の追加／削除、セルの結合、プロパティ
• 高度なテーブル操作（セルの選択、分割、カスタム境界線）

エディターモード

📄 参照: references/editor-modes.md

• HTML エディターモード（デフォルトの WYSIWYG）
• Markdown エディターモード（EditorMode.Markdown）
• IFrame と DIV のレンダリングモード
• ソースコード表示の切り替え

インラインモード

📄 参照: references/inline-mode.md

• インラインツールバーの有効化（InlineMode）
• テキスト選択時のインラインツールバーの表示
• 使用例：コメントエディタ、コンテンツのインプレース編集

カスタムツールと実行コマンド

📄 参照: references/custom-tools.md

• ToolbarItemModel とテンプレートを使用したカスタムツールバーボタンの追加
• ExecuteCommandAsync によるプログラムからのコマンド実行
• スラッシュコマンド（/ で起動するメニュー）の設定
• 書式のコピーの詳細設定（RichTextEditorFormatPainterSettings）

イベント

📄 参照: references/events.md

• RichTextEditorEvents 子コンポーネントの使用方法と接続パターン
• ライフサイクルイベント：Created、Destroyed
• フォーカスと操作：Focus、Blur、OnToolbarClick、SelectionChanged
• コンテンツイベント：ValueChange、BeforePasteCleanup、AfterPasteCleanup
• ツールバーのライフサイクル：OnActionBegin、OnActionComplete
• ダイアログイベント：OnDialogOpen、DialogOpened、OnDialogClose、DialogClosed
• クイックツールバー：OnQuickToolbarOpen、QuickToolbarOpened、QuickToolbarClosed
• 画像イベント：OnImageSelected、BeforeUploadImage、OnImageUploadSuccess、OnImageUploadFailed、ImageUploadChange、OnImageDrop、ImageDelete
• メディアイベント：FileSelected、FileUploading、FileUploadSuccess、FileUploadFailed、FileUploadChange、OnMediaDrop、MediaDeleted
• サイズ変更イベント：OnResizeStart、OnResizeStop
• ツールバーの状態：UpdatedToolbarStatus
• エクスポートイベント：OnExport、OnExportFailure
• スラッシュメニュー：SlashMenuItemSelecting
• すべてのプロパティを含む EventArgs クラスの完全なリファレンス

メソッド

📄 参照: references/methods.md

• フォーカスと選択：FocusAsync、FocusOutAsync、SaveSelectionAsync、RestoreSelectionAsync、SelectAllAsync、GetSelectionAsync
• コンテンツの取得：GetTextAsync、GetSelectedHtmlAsync、GetCharCountAsync、GetXhtmlAsync
• コマンド実行：型付き引数を使用するすべての ExecuteCommandAsync オーバーロード（画像、リンク、テーブル、動画、音声、コードブロック、書式のコピー）
• ツールバーの制御：EnableToolbarItem、DisableToolbarItem、RemoveToolbarItem
• ダイアログと UI の制御：ShowDialogAsync、CloseDialogAsync、ShowFullScreenAsync、PrintAsync、RefreshUIAsync、ShowSourceCodeAsync
• 元に戻す／やり直し：ClearUndoRedoAsync
• CommandName、ToolbarCommand、DialogType の enum リファレンス全体

プロパティ

📄 参照: references/properties.md

• コンテンツと値：Value、Placeholder、Readonly、Enabled、MaxLength、ShowCharCount
• エディタの動作：EditorMode、EnterKey、ShiftEnterKey、EnableTabKey、EnableAutoUrl、EnableMarkdownAutoFormat、EnableClipboardCleanup、EnableXhtml、EnableHtmlEncode、EnableResize、EnableChunkMessages
• 外観とレイアウト：Height、Width、CssClass、ShowTooltip、FloatingToolbarOffset
• セキュリティとサニタイズ：EnableHtmlSanitizer、AdditionalSanitizeAttributes、AdditionalSanitizeTags、DeniedSanitizeSelectors
• キーボードとショートカット：完全な ShortcutKeys のデフォルト割り当て表を含む KeyConfigure
• 永続化と自動保存：EnablePersistence、SaveInterval、AutoSaveOnIdle
• 元に戻す／やり直しの設定：UndoRedoSteps、UndoRedoTimer
• HTTP 統合：HttpClientInstance
• 37 個すべてのプロパティの概要表

データバインディングと値の管理

📄 参照: references/data-binding.md

• @bind-Value による双方向バインディング
• 一方向バインディングとプログラムによる値の更新
• 編集の検出に使用する ValueChange イベント
• 読み取り専用モード（Readonly プロパティ）
• 最大長の適用と文字数の表示

貼り付け時のクリーンアップ

📄 参照： references/paste-and-cleanup.md

• RichTextEditorPasteCleanupSettings の設定
• 貼り付け時に特定の HTML 属性やスタイルを削除／保持する
• プレーンテキストとして貼り付ける
• Enter キーの動作（EnterKey、ShiftEnterKey）
• 元に戻す／やり直しマネージャーの設定

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

📄 参照： references/import-export.md

• Word ドキュメントをエディターにインポートする
• コンテンツを Word（.docx）および PDF にエクスポートする
• インポート／エクスポートサービスの HTTP クライアント設定
• 動的データを使った差し込み印刷
• 大きなドキュメントの WebAssembly パフォーマンス最適化

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

📄 参照： references/accessibility-globalization.md

• WCAG 2.1 準拠の詳細
• キーボードショートカットとナビゲーションのリファレンス
• ARIA ロールとスクリーンリーダーのサポート
• RTL レイアウト（EnableRtl）
• ローカライズとカルチャーの設定
• XHTML 検証

一般的なパターン

文字数カウント付きの双方向バインドエディター

<SfRichTextEditor @bind-Value="@HtmlContent" ShowCharCount="true" MaxLength="2000">
</SfRichTextEditor>

@code {
    private string HtmlContent { get; set; } = string.Empty;
}

読み取り専用の表示

<SfRichTextEditor Value="@HtmlContent" Readonly="true">
    <RichTextEditorToolbarSettings Enable="false" />
</SfRichTextEditor>

Markdown エディターモード

<SfRichTextEditor EditorMode="EditorMode.Markdown" @bind-Value="@MarkdownContent">
</SfRichTextEditor>

@code {
    private string MarkdownContent { get; set; } = "**Hello** world!";
}