syncfusion-aspnetcore-rich-text-editor

Syncfusion ASP.NET Core リッチテキストエディターの実装

Syncfusion ASP.NET Core リッチテキストエディター（<ejs-richtexteditor>）は、次の2つの編集モードをサポートする単一のコンポーネントです。

• HTML モード（デフォルト） — 有効な HTML マークアップを生成する WYSIWYG エディター
• Markdown モード（editorMode="Markdown"） — HTML プレビューを任意で表示できるプレーンテキストの Markdown エディター

どちらのモードも、同じタグヘルパー、ツールバーシステム、イベント、および大半の機能を共有しています。出力形式の要件に応じてモードを選択してください。

エディターモードの選択

User wants to edit formatted content → output is HTML?
  └─ Use default HTML mode (no editorMode needed)

User wants to write/edit Markdown text?
  └─ Set editorMode="Markdown"
     └─ Add Marked.js for live preview (see references/markdown-features.md)

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

• ASP.NET Core の Razor ページや MVC ビューにリッチテキスト／WYSIWYG エディターを追加する
• ASP.NET Core に Markdown エディターを実装する
• ツールバー、ツールバーの種類、またはカスタムツールバーのツールを設定する
• エディター内で画像、動画、音声のアップロードを処理する
• テーブルを挿入および管理する
• インライン編集、iframe モード、またはサイズ変更可能なエディターを有効にする
• AI アシスタント、メンション、絵文字ピッカー、スラッシュメニュー、またはメールマージを統合する
• エディターの値を取得、設定、保存する、自動保存、文字数カウント
• リッチテキストコンテンツのフォーム検証
• 読み取り専用または無効化されたエディターの状態
• XSS の防止とセキュリティ
• アクセシビリティ、キーボード操作、グローバリゼーション、RTL
• エディターイベント（ライフサイクル、フォーカス、ツールバー、アップロード、ダイアログ、AI）を処理する
• 使用可能なプロパティ、型、デフォルト値を確認する
• JavaScript からエディターのメソッドをプログラムで呼び出す

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• NuGet のインストールとタグヘルパーの登録
• CDN のスタイルシートとスクリプトの参照
• 基本的な HTML エディター（デフォルトモード）
• 基本的な Markdown エディター（editorMode="Markdown"）
• ViewBag を使用した初期値のバインド
• ツールバー設定の基本

エディターモードと表示オプション

📄 参照: references/editor-modes.md

• HTML モードと Markdown モード（editorMode プロパティ）
• 編集を分離する IFrame モード（iframeSettings）
• インライン編集モード（inlineMode）
• サイズ変更可能なエディター（enableResize）
• エディターの高さと幅の設定

ツールバーの設定

📄 参照: references/toolbar.md

• ツールバーの種類：Expand、MultiRow、Scrollable、Popup
• 固定／フローティングツールバー（enableFloating、floatingToolbarOffset）
• ツールバーの位置（上／下）
• 画像、リンク、テキスト、テーブル用のクイックツールバー
• HTML モードのツールバー項目リファレンス
• Markdown モードのツールバー項目リファレンス

テキストの書式設定

📄 参照: references/text-formatting.md

• 基本的なテキストスタイル：太字、斜体、下線、取り消し線、インラインコード
• フォント名、サイズ、色、背景色
• 見出しと段落の書式
• テキストの配置、インデント／インデント解除
• リスト（番号付き／番号なし）、引用ブロック、引用の書式設定

Markdown の機能

📄 参照: references/markdown-features.md

• サポートされている Markdown 構文の完全なリファレンス
• カスタム Markdown 形式の設定
• Marked.js による Markdown から HTML へのライブプレビュー
• Markdown モードでのテーブルと画像の挿入
• Markdown モードでのメンションのサポート

メディアとリンク

📄 参照: references/media-and-links.md

• 画像の挿入、サーバーへのアップロード、ドラッグ＆ドロップ
• 画像用クイックツールバー（キャプション、代替テキスト、寸法、配置）
• 動画と音声の挿入
• リンクの挿入とクイックツールバー
• ファイルブラウザーとの統合

テーブル

📄 参照: references/table.md

• テーブルの挿入と CreateTable ツールの設定
• テーブル用クイックツールバー（行、列、結合、分割、スタイル）
• セルのプロパティ、背景色、配置
• テーブルの入れ子
• テーブルの選択とコピー／貼り付け

スマート編集機能

📄 参照: references/smart-editing.md

• 絵文字ピッカー
• スラッシュメニュー
• Mention コンポーネントとのメンション統合
• メールマージ
• 書式のコピー
• コードブロックの書式設定

AI アシスタント

📄 参照: references/ai-assistant.md

• AICommands と AIQuery のツールバー項目を有効にする
• ストリーミングおよび非ストリーミングの AI 応答の処理
• AiAssistantPromptRequest イベント
• addAIPromptResponse メソッド

エディターの値とコンテンツ管理

📄 参照: references/editor-value.md

• HTML／Markdown の値の取得と設定
• getHtml()、getText()、getCharCount() メソッド
• saveInterval による自動保存
• プレースホルダーテキスト
• 文字数（showCharCount、maxLength）
• HTML エンコードされた値（enableHtmlEncode）
• ソースコード／コードビューの編集
• 貼り付けとクリップボードのクリーンアップ
• インポートとエクスポート（Word／PDF）
• 元に戻す／やり直しの管理

検証とセキュリティ

📄 参照: references/validation-security.md

• フォーム検証との統合（FormValidator）
• 読み取り専用モード（readonly）
• エディターの無効化（enabled）
• XSS の防止（enableHtmlSanitizer、beforeSanitizeHtml）
• XHTML の検証
• スタイルのカプセル化

カスタマイズ

📄 参照: references/customization.md

• カスタムツールバーツール（テンプレートベースのボタン）
• 組み込みツールバー項目のリファレンス
• CSS スタイルとテーマのカスタマイズ
• Enter キー／Shift+Enter キーの動作（enterKey、shiftEnterKey）
• プログラムによる書式設定のための execCommand API
• サードパーティ製ツールとの統合（CodeMirror）
• enableToolbarItem／disableToolbarItem メソッド

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

📄 参照: references/accessibility-globalization.md

• WCAG 2.2 AA 準拠
• ARIA ロールと属性
• キーボードショートカット（HTML モードと Markdown モード）
• ローカライズとグローバル化（locale、enableRtl）

イベント

📄 参照: references/events.md

• ライフサイクルイベント：Created、Destroyed
• フォーカス／ぼかしイベント：Focus、Blur、Change
• ツールバー／コマンドイベント：ActionBegin、ActionComplete
• 貼り付け／クリップボードイベント：BeforePasteCleanup、AfterPasteCleanup、BeforeClipboardWrite
• ダイアログイベント：BeforeDialogOpen、DialogOpen、BeforeDialogClose、DialogClose
• ポップアップイベント：BeforePopupOpen、BeforePopupClose、BeforeQuickToolbarOpen
• 画像アップロードイベント：ImageSelected、BeforeImageUpload、ImageUploading、ImageUploadSuccess、ImageUploadFailed、ImageRemoving、AfterImageDelete、BeforeImageDrop
• メディアアップロードイベント：FileSelected、BeforeFileUpload、FileUploading、FileUploadSuccess、FileUploadFailed、FileRemoving、AfterMediaDelete、BeforeMediaDrop
• セキュリティイベント：BeforeSanitizeHtml
• エクスポートイベント：DocumentExporting
• AI アシスタントイベント：AiAssistantPromptRequest、AiAssistantStopRespondingClick、AiAssistantToolbarClick

プロパティ

📄 参照: references/properties.md

• 型、デフォルト値、説明を含む完全なプロパティリファレンス
• コアプロパティ：Value、EditorMode、Placeholder、CssClass、Locale
• 状態フラグ：Enabled、Readonly、EnableResize、EnablePersistence、EnableRtl、EnableTabKey
• コンテンツとエンコーディング：EnableHtmlEncode、EnableHtmlSanitizer、EnableXhtml、EnableAutoUrl、EnableClipboardCleanup
• 文字数と自動保存：ShowCharCount、MaxLength、SaveInterval、AutoSaveOnIdle
• キーの動作：EnterKey、ShiftEnterKey、FloatingToolbarOffset
• 元に戻す／やり直し：UndoRedoSteps、UndoRedoTimer
• 複雑な設定オブジェクト：ToolbarSettings、QuickToolbarSettings、IframeSettings、InlineMode、InsertImageSettings、InsertVideoSettings、InsertAudioSettings、PasteCleanupSettings、TableSettings、FontFamily、FontColor、BackgroundColor、Format、SlashMenuSettings、EmojiPickerSettings、FormatPainterSettings、CodeBlockSettings、AiAssistantSettings、ImportWordSettings、ExportWordSettings、ExportPdfSettings、FileManagerSettings

メソッド

📄 参照： references/methods.md

• コンテンツ関連のメソッド：getHtml()、getText()、getContent()、getSelectedHtml()、getXhtml()、getCharCount()、selectAll()、selectRange()、print()
• コマンド実行：executeCommand()。CommandName 列挙型の全項目を参照できます
• ツールバー関連のメソッド：enableToolbarItem()、disableToolbarItem()、removeToolbarItem()
• フォーカス関連のメソッド：focusIn()、focusOut()
• インラインツールバー：showInlineToolbar()、hideInlineToolbar()
• ダイアログ関連のメソッド：showDialog()、closeDialog()
• 元に戻す／やり直し：clearUndoRedo()
• ソースコード：showSourceCode()
• 全画面表示：showFullScreen()
• 絵文字ピッカー：showEmojiPicker()
• AI アシスタント：addAIPromptResponse()、executeAIPrompt()、getAIPromptHistory()、clearAIPromptHistory()、showAIAssistantPopup()、hideAIAssistantPopup()
• ライフサイクル：refresh()、refreshUI()、dataBind()、destroy()
• セキュリティ：sanitizeHtml()

---

クイックスタート

HTML エディター（デフォルト）

@addTagHelper *, Syncfusion.EJ2


<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>


<ejs-scripts></ejs-scripts>


<ejs-richtexteditor id="editor" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>

// HomeController.cs
public ActionResult Index()
{
    ViewBag.value = "<p>Start editing here...</p>";
    ViewBag.tools = new[] {
        "Bold", "Italic", "Underline", "|",
        "Formats", "Alignments", "OrderedList", "UnorderedList", "|",
        "CreateLink", "Image", "CreateTable", "|",
        "SourceCode", "|", "Undo", "Redo"
    };
    return View();
}

Markdown エディター

<ejs-richtexteditor id="markdown-editor" editorMode="Markdown" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>

public ActionResult Index()
{
    ViewBag.value = "**Hello World** — start writing *markdown* here.";
    ViewBag.tools = new[] {
        "Bold", "Italic", "StrikeThrough", "InlineCode", "|",
        "Formats", "Blockquote", "OrderedList", "UnorderedList", "|",
        "CreateLink", "Image", "CreateTable", "|", "Undo", "Redo"
    };
    return View();
}

---

一般的なパターン

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

<form id="form-element">
    <ejs-richtexteditor id="rte" name="rteContent" value="@ViewBag.value"></ejs-richtexteditor>
    <button type="submit">Submit</button>
</form>
<script>
    document.querySelector('form').onsubmit = function () {
        var rte = document.getElementById('rte').ej2_instances[0];
        console.log(rte.getHtml());
    };
</script>

画像をサーバーにアップロードする

<ejs-richtexteditor id="editor">
    <e-richtexteditor-insertimagesettings
        saveUrl="/Home/SaveImage"
        removeUrl="/Home/RemoveImage"
        path="./Uploads/">
    </e-richtexteditor-insertimagesettings>
</ejs-richtexteditor>

インライン編集

<ejs-richtexteditor id="inline" value="@ViewBag.value">
    <e-richtexteditor-inlinemode enable="true" onSelection="true"></e-richtexteditor-inlinemode>
</ejs-richtexteditor>

文字数制限付きの文字数カウント

<ejs-richtexteditor id="editor" showCharCount="true" maxLength="500" value="@ViewBag.value">
</ejs-richtexteditor>