syncfusion-blazor-smart-rich-text-editor

Syncfusion Blazor Smart Rich Text Editor

Syncfusion Blazor Smart Rich Text Editor（SfSmartRichTextEditor）の実装と設定を包括的に解説するスキルです。インテリジェントなコンテンツ支援機能を備えた AI 搭載の WYSIWYG エディターで、フル機能の SfRichTextEditor を拡張します。OpenAI、Azure OpenAI、Ollama、カスタム AI バックエンドをサポートしています。スマートアクションのドロップダウンツールバー、AI クエリダイアログ（Alt+Enter）、AssistViewSettings による完全にカスタマイズ可能な AI アシスタントポップアップを提供します。

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

ユーザーが次のことを必要としている場合に、このスキルを使用してください。

• Blazor Server または Web App プロジェクトに SfSmartRichTextEditor をインストールしてセットアップする
• AI バックエンド（OpenAI、Azure OpenAI、Ollama、カスタム IChatClient）を設定する
• Program.cs で IChatInferenceService / SyncfusionAIService を登録する
• AI コマンド（要約、拡張、トーンの調整）にスマートアクションのドロップダウンツールバーを使用する
• ToolbarItemModel のリストに Name = "AI Commands" と Name = "AI Query" を追加して、AI ツールバーボタンを表示する
• AI クエリダイアログを Alt+Enter で開き、自由形式の AI プロンプトを入力する
• AssistViewSettings（Commands、Suggestions、Prompts、Placeholder、MaxPromptHistory、ポップアップのサイズ）を設定する
• AI アシスタントポップアップ（BannerTemplate、HeaderToolbarSettings、PromptToolbarSettings、ResponseToolbarSettings）をカスタマイズする
• AI イベント（AIPromptRequested、AIResponseStopped、AIToolbarItemClicked、AIPopupOpening、AIPopupClosing）を処理する
• AI アシスタントのメソッド（ShowAIPopupAsync、HideAIPopupAsync、ExecuteAIPromptAsync、UpdateAIResponseAsync、GetAIPromptHistoryAsync、ClearAIPromptHistoryAsync）を使用する
• AI アシスタントポップアップ（.e-rte-aiquery-dialog）のスタイルやアニメーションを設定する
• 継承される SfRichTextEditor のすべての機能（ツールバー、画像、テーブル、イベント、メソッド、データバインディング、貼り付け時のクリーンアップ、インポート／エクスポート、アクセシビリティ）を使用する

クイックスタート

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

dotnet add package Syncfusion.Blazor.SmartRichTextEditor
dotnet add package Syncfusion.Blazor.Themes
dotnet add package Microsoft.Extensions.AI
dotnet add package Microsoft.Extensions.AI.OpenAI

2. Program.cs でサービスを登録します。

using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using OpenAI;

builder.Services.AddSyncfusionBlazor();

string openAIApiKey = "YOUR_API_KEY";
string openAIModel = "gpt-4";
OpenAIClient openAIClient = new OpenAIClient(openAIApiKey);
IChatClient chatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
builder.Services.AddChatClient(chatClient);
builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

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

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartRichTextEditor

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

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

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

@rendermode InteractiveServer

<SfSmartRichTextEditor>
    <h2>Welcome to Smart Rich Text Editor</h2>
    <p>Select text and use the Smart Action toolbar, or press Alt+Enter to open the AI Query dialog.</p>
    <AssistViewSettings Placeholder="Ask AI to rewrite or generate content." />
</SfSmartRichTextEditor>

ナビゲーションガイド

はじめにと AI サービスのセットアップ

📄 参照: references/getting-started.md

• NuGet のインストール：Syncfusion.Blazor.SmartRichTextEditor + Syncfusion.Blazor.Themes
• Blazor Server App（Visual Studio と VS Code）および Blazor Web App（.NET 8+）の完全なセットアップ
• Program.cs での OpenAI、Azure OpenAI、Ollama、カスタム IChatClient の設定
• Web App の AddInteractiveServerComponents() 登録パターン
• CSS テーマと JS スクリプトの参照（.NET 6 から .NET 10 まで）
• AssistViewSettings を使用したコンポーネントの追加
• コンテンツ取得メソッド（GetTextAsync、GetCharCountAsync）
• よくあるセットアップの問題と解決方法

AI バックエンドの設定

📄 参照: references/ai-backends.md

• OpenAI：API キー、サポート対象モデル（gpt-4-turbo、gpt-4、gpt-3.5-turbo）、OpenAIClient のセットアップ、環境変数と User Secrets
• Azure OpenAI：リソースのデプロイ、AzureOpenAIClient + ApiKeyCredential、appsettings.json の設定、マネージド ID（本番環境で推奨）、HIPAA／SOC 2 準拠、監視、コストの最適化
• Ollama：ローカルモデルのインストール（mistral、llama2）、OllamaApiClient + OllamaSharp NuGet、Docker Compose、GPU アクセラレーション、モデルの推奨
• カスタム IChatClient：社内または独自の AI 向けの IChatClient 実装、Program.cs での登録、ストリーミング応答、再試行ロジック、エラー処理、企業向け AI API の例

AssistViewSettings — プロパティ

📄 参照： references/assist-view-settings.md

• Commands (List<AICommands>): ネストされたサブコマンドとアイコン CSS を含むスマートアクションのドロップダウン
• PopupMaxHeight / PopupWidth：ポップアップのサイズを制御します（CSS 値またはピクセル数）
• Placeholder：AI プロンプト入力欄のプレースホルダーテキスト
• Prompts (List<AssistViewPrompt>)：ポップアップに読み込まれる定義済みのプロンプト／応答テンプレート
• Suggestions (List<string>)：AI ポップアップに表示されるクイック提案チップ
• MaxPromptHistory：保持する会話エントリの最大数（デフォルト：20）
• BannerTemplate：AI ポップアップのカスタムブランド設定／ヘッダー用 RenderFragment
• HeaderToolbarSettings / PromptToolbarSettings / ResponseToolbarSettings：AssistViewToolbarItem を使用したツールバーのカスタマイズ

AssistViewSettings — イベント

📄 参照： references/ai-events.md

• AIPromptRequested (AssistViewPromptRequestedEventArgs)：AI 呼び出しの前にプロンプトをインターセプト／変更します。Cancel=true を設定すると実行を防止できます。Response、PromptSuggestions、ResponseToolbarItems を変更できます
• AIResponseStopped (ResponseStoppedEventArgs)：ユーザーが「応答を停止」をクリックしたときに発生します。DataIndex と Prompt を提供します
• AIToolbarItemClicked (AssistViewToolbarItemClickedEventArgs)：カスタムツールバーボタンのクリックを処理します。Item、DataIndex、Event にアクセスでき、Cancel=true を設定できます
• AIPopupOpening (BeforeOpenEventArgs)：args.Cancel = true でポップアップの表示をキャンセルできます。Element 参照にアクセスできます
• AIPopupClosing (BeforeCloseEventArgs)：ポップアップを閉じる操作をキャンセルできます。ClosedBy、IsInteracted、PreventFocus にアクセスできます

AssistViewSettings — メソッド

📄 参照： references/ai-methods.md

• ShowAIPopupAsync()：AI アシスタントのポップアップをプログラムから開きます
• HideAIPopupAsync()：AI アシスタントのポップアップを閉じます
• ExecuteAIPromptAsync(string prompt)：プロンプトをプログラムから送信します（ユーザーが入力した場合と同様）
• UpdateAIResponseAsync(string response, bool isFinalUpdate)：AI の応答をストリーミングまたは挿入します。isFinalUpdate=true にすると「停止」ボタンが非表示になります
• GetAIPromptHistoryAsync()：保存されたすべてのプロンプト／応答を AssistViewPrompt[] として取得します（時系列順、MaxPromptHistory で制限）
• ClearAIPromptHistoryAsync()：すべての会話履歴をリセットします
• @ref を使用して、6 つすべてのメソッドを組み合わせた完全な例

AI ポップアップの外観と CSS

📄 参照： references/ai-appearance.md

• AI ポップアップの CSS セレクター：.e-rte-aiquery-dialog、.e-aiassistview
• ポップアップの背景、境界線、ボックスシャドウのカスタマイズ
• .e-view-header、.e-view-content .e-toolbar、.e-footer サブセクションを対象にした詳細な制御
• ポップアップ全体のカスタムスタイル設定例

ツールバーの設定

📄 参照： references/toolbar.md

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

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

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

• SfSmartRichTextEditor のデフォルトのツールバー項目
• AI 固有のツールバー項目 — Name = "AI Commands"（スマートアクションのドロップダウン）と Name = "AI Query"（AI に質問ボタン）。ToolbarCommand 列挙型ではなく、Name プロパティを使用する必要があります
• すべての ToolbarCommand 列挙値の一覧
• テキストの書式設定、フォントとスタイル、配置、リスト、ハイパーリンク
• SfSmartRichTextEditor を使用する画像／テーブル／リンクのクイックツールバー項目コマンド
• 元に戻す／やり直し、全画面表示、印刷、ソースコード、プレビューツール
• デフォルトのツールバー項目の削除または並べ替え

テキストの書式設定

📄 参照： 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）

イベント（RTE）

📄 参照： 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 クラスの完全なリファレンス

メソッド（RTE）

📄 参照： 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 の各列挙型の完全なリファレンス

プロパティ（RTE）

📄 参照： references/properties.md

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

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

📄 参照： 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 検証

よくあるパターン

AI を搭載した基本的な Smart Rich Text Editor

@rendermode InteractiveServer
@using Syncfusion.Blazor.SmartRichTextEditor

<SfSmartRichTextEditor @bind-Value="@Content">
    <AssistViewSettings Placeholder="Ask AI to rewrite or generate content." />
</SfSmartRichTextEditor>

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

カスタム Smart Action コマンドを使用した AI

<SfSmartRichTextEditor>
    <AssistViewSettings Commands="@MyCommands" Suggestions="@QuickSuggestions" />
</SfSmartRichTextEditor>

@code {
    private List<AICommands> MyCommands = new()
    {
        new AICommands { Text = "Summarize", Prompt = "Summarize this content concisely" },
        new AICommands { Text = "Expand", Prompt = "Add more details and examples" },
        new AICommands
        {
            Text = "Translate",
            Items = new List<AICommands>
            {
                new AICommands { Text = "To French", Prompt = "Translate to French" },
                new AICommands { Text = "To Spanish", Prompt = "Translate to Spanish" }
            }
        }
    };

    private List<string> QuickSuggestions = new()
    {
        "Fix grammar", "Make shorter", "More formal", "Simplify"
    };
}

AI ポップアップのプログラムによる制御

<SfSmartRichTextEditor>
    <AssistViewSettings @ref="AssistViewRef" MaxPromptHistory="10" />
</SfSmartRichTextEditor>
<button @onclick="OpenAI">Open AI</button>
<button @onclick="RunPrompt">Run Prompt</button>

@code {
    private AssistViewSettings AssistViewRef;

    private async Task OpenAI() =>
        await AssistViewRef.ShowAIPopupAsync();

    private async Task RunPrompt() =>
        await AssistViewRef.ExecuteAIPromptAsync("Improve the clarity of this text");
}

文字数表示付きの双方向バインディングエディター

<SfSmartRichTextEditor @bind-Value="@HtmlContent" ShowCharCount="true" MaxLength="2000">
    <AssistViewSettings Placeholder="Ask AI for writing help." />
</SfSmartRichTextEditor>

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

読み取り専用表示

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

Markdown エディターモード

<SfSmartRichTextEditor EditorMode="EditorMode.Markdown" @bind-Value="@MarkdownContent">
    <AssistViewSettings Placeholder="Ask AI to help with your Markdown content." />
</SfSmartRichTextEditor>

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

リクエストをインターセプトするための AI プロンプトイベントの処理

<SfSmartRichTextEditor>
    <AssistViewSettings AIPromptRequested="OnAIPrompt" />
</SfSmartRichTextEditor>

@code {
    private async Task OnAIPrompt(AssistViewPromptRequestedEventArgs args)
    {
        // Log, validate, or modify args.Prompt before it is sent to AI
        Console.WriteLine($"Prompt: {args.Prompt}");
        // To cancel: args.Cancel = true;
    }
}