syncfusion-blazor-blockeditor

Syncfusion Blazor Block Editor

コンポーネントの概要

Syncfusion Blazor Block Editor は、カスタマイズ可能なブロックを使用して、ユーザーがリッチで構造化されたドキュメントを作成できる、強力でモジュール化されたコンテンツ作成コンポーネントです。各ブロックは、見出し、段落、リスト、テーブル、画像、コードブロックなど、特定のコンテンツタイプを表し、すっきりと整理された編集体験を提供します。

主な機能

• ブロックベースのアーキテクチャ：個別のブロックタイプ（見出し、段落、リスト、テーブル、画像、コード、引用、コールアウト、区切り線、トグル）を使用して、構造化されたコンテンツを作成します
• 直感的なメニュー：スラッシュコマンドメニュー（/）、コンテキストメニュー（右クリック）、ブロックアクションメニュー（ホバー時）、インラインツールバー（テキスト選択時）
• ドラッグ＆ドロップによる並べ替え：ブロックをドラッグして直感的に並べ替えます
• 元に戻す／やり直しのサポート：設定可能なスタック深度による、完全な履歴管理
• キーボードショートカット：書式設定、ブロック作成、エディター操作のための包括的なショートカット
• 貼り付け内容のクリーンアップ：安全にコンテンツを貼り付けるための、高度な HTML サニタイズ、スタイルのフィルタリング、タグの削除
• イベントシステム：Created、BlockChanged、SelectionChanged、Focus、Blur、および貼り付けのライフサイクルイベント
• レスポンシブデザイン：さまざまな画面サイズやビューポートに適応します
• 読み取り専用モード：編集機能のない表示専用コンテンツ
• カスタムスタイル：CSS クラスのカスタマイズとテーマの統合

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

はじめに

📄 参照： references/getting-started.md

• NuGet によるインストール（Visual Studio、VS Code、.NET CLI）
• Blazor Web App プロジェクトのセットアップ
• サービスの登録と構成
• 名前空間のインポートとテーマリソースの追加
• レンダリングモード（Server、WebAssembly、Auto）
• 基本的なコンポーネントの初期化
• ブロックの構成とデータバインディング

外観とスタイル設定

📄 参照： references/appearance-and-styling.md

• コンポーネントの幅と高さの設定
• 読み取り専用モードの構成
• カスタム CSS クラスの適用
• レスポンシブデザインのパターン
• テーマのカスタマイズとスタイル設定の方法
• スタイルの例とベストプラクティス

エディターメニュー

📄 参照： references/editor-menus.md

• スラッシュコマンドメニュー（組み込み項目、カスタマイズ、イベント）
• コンテキストメニュー（右クリック操作、カスタマイズ、イベント）
• ブロックアクションメニュー（ドラッグハンドルの操作、カスタマイズ、イベント）
• インラインツールバー（テキスト書式設定オプション、カスタマイズ、イベント、オプション項目 - 変換、インラインコード、リンク）
• メニューイベントの処理とフィルタリング
• カスタムコマンドとメニュー項目の作成

組み込みブロック

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

• 見出しブロック（レベル 1～4）
• 段落ブロック
• リストの種類（箇条書き、番号付き、チェックリスト）
• テーブルブロック
• コードブロック
• 画像／メディアブロック（imageSettings プロパティ、サイズ変更の構成、画像のアップロード）
• 引用ブロックとコールアウトブロック
• トグル（折りたたみ可能）ブロック
• 区切り線ブロック
• ブロックの入れ子と階層

ドラッグ＆ドロップと元に戻す／やり直し

📄 参照： references/drag-drop-and-undo.md

• ドラッグ＆ドロップの有効化／無効化
• 単一および複数ブロックのドラッグ
• 元に戻す／やり直しのキーボードショートカット
• 元に戻す／やり直しのスタック深度の構成
• 履歴管理と状態の追跡
• ドラッグ操作の視覚的なフィードバック

イベントとインタラクション

📄 参照： references/events-and-interactions.md

• Created イベント（初期化）
• BlockChanged イベント（構造の変更）
• SelectionChanged イベント（テキスト選択）
• Focus イベントと Blur イベント（エディターの状態）
• キーボードショートカット（コンテンツ編集、ブロック作成、ブロック管理、一般的な操作）
• カスタムキーボードショートカットの構成（KeyConfig）
• イベントハンドラーのパターンと例

コンテンツの処理

📄 読む: references/content-handling.md

• ブロックコンテンツの取得と設定
• コンテンツモデルの構造（BlockModel、ContentModel）
• 貼り付け時のクリーンアップ設定（DeniedTags、KeepFormat、PlainText）
• PasteCleanupStarting イベントと PasteCleanupCompleted イベント
• セキュリティのベストプラクティス（XSS の防止）
• コンテンツ検証のパターン

ラベルとメンション

📄 読む: references/labels-and-mentions.md

• ユーザーへのメンション（@mentions）に使う UserModel
• コンテンツへのタグ付け（#labels）に使う LabelItemModel
• BlockEditorLabel コンポーネントの設定
• MentionContentSettings と LabelContentSettings
• 共同作業でのメンションとラベルの実装
• 実践的なワークフローの例とパターン

高度なメソッド

📄 読む: references/advanced-methods.md

• GetSelectedBlocksAsync() - 選択されたブロックを取得します
• SelectAllBlocksAsync() - すべてのブロックをプログラムから選択します
• FocusInAsync() / FocusOutAsync() - エディターのフォーカスを管理します
• PrintAsync() - エディターのコンテンツを印刷します
• EnableToolbarItemsAsync() / DisableToolbarItemsAsync() - ツールバー項目の使用可否を制御します
• 高度なワークフローのパターンとユースケース

高度な機能

📄 読む: references/advanced-features.md

• WebAssembly の統合と考慮事項
• パフォーマンス最適化の戦略
• カスタムブロックタイプの実装
• アクセシビリティ機能（WCAG 準拠）
• 自動保存と状態保持のパターン
• よくあるトラブルシューティングのシナリオ

クイックスタートの例

@using Syncfusion.Blazor.BlockEditor

@rendermode InteractiveAuto

<div id="container" style="height: 500px; width: 100%;">
    <SfBlockEditor @bind-Blocks="blockData" EnableDragAndDrop="true">
        <BlockEditorCommandMenu></BlockEditorCommandMenu>
        <BlockEditorContextMenu Enable="true"></BlockEditorContextMenu>
        <BlockEditorActionMenu Enable="true"></BlockEditorActionMenu>
        <BlockEditorInlineToolbar Enable="true"></BlockEditorInlineToolbar>
        <BlockEditorPasteCleanup DeniedTags="@(new string[] { "script", "iframe" })">
        </BlockEditorPasteCleanup>
    </SfBlockEditor>
</div>

@code {
    private List<BlockModel> blockData = new List<BlockModel>
    {
        new BlockModel
        {
            BlockType = BlockType.Heading,
            Properties = new HeadingBlockSettings { Level = 1 },
            Content = new List<ContentModel>
            {
                new ContentModel { ContentType = ContentType.Text, Content = "Welcome to Block Editor" }
            }
        },
        new BlockModel
        {
            BlockType = BlockType.Paragraph,
            Content = new List<ContentModel>
            {
                new ContentModel { ContentType = ContentType.Text, Content = "Start typing or use / to add new blocks..." }
            }
        }
    };
}

よくあるパターン

パターン 1: イベント駆動型のコンテンツ追跡

自動保存やログ記録のため、ドキュメントの変更をリアルタイムで監視します。

<SfBlockEditor BlockChanged="@OnBlockChanged" 
               SelectionChanged="@OnSelectionChanged">
</SfBlockEditor>

@code {
    private void OnBlockChanged(BlockChangedEventArgs args)
    {
        // Auto-save, track changes, update UI
    }

    private void OnSelectionChanged(SelectionChangedEventArgs args)
    {
        // Update toolbar state based on selection
    }
}

パターン 2: 読み取り専用のプレビューモード

編集せずに、完成したコンテンツを表示します。

<SfBlockEditor @bind-Blocks="blockData" ReadOnly="true">
</SfBlockEditor>

パターン 3: カスタムキーボードショートカット

アプリケーション固有のコマンドに合わせて、既定のショートカットを上書きします。

<SfBlockEditor KeyConfig="@customShortcuts">
</SfBlockEditor>

@code {
    private Dictionary<string, string> customShortcuts = new()
    {
        { "Bold", "alt+b" },
        { "Italic", "alt+i" }
    };
}

パターン 4: コンテンツフィルタリングによる安全な貼り付け

安全性と一貫性を確保するため、貼り付け動作を制御します。

<BlockEditorPasteCleanup 
    DeniedTags="@deniedTags"
    PlainText="false">
</BlockEditorPasteCleanup>

@code {
    private string[] deniedTags = { "script", "iframe", "object" };
}

主なプロパティ

プロパティ	型	既定値	目的
Blocks	List<BlockModel>	Empty	エディターにバインドされたコンテンツブロック
Width	string	"100%"	エディターコンテナーの幅
Height	string	"auto"	エディターコンテナーの高さ
ReadOnly	bool	false	読み取り専用モードを有効または無効にします
EnableDragAndDrop	bool	true	ブロックのドラッグを有効または無効にします
UndoRedoStack	int	30	元に戻す／やり直しの履歴の最大深度
CssClass	string	""	スタイル設定用のカスタム CSS クラス
KeyConfig	Dictionary<string, string>	Default shortcuts	カスタムキーボードショートカット

よくあるユースケース

1. ブログプラットフォーム: 見出し、画像、書式設定を備えたリッチなブログエディターを作成します
2. ドキュメント管理: 記事やレポートを作成するためのドキュメント作成ツールを構築します
3. ナレッジベース: ドキュメント用の構造化コンテンツエディターを実装します
4. コンテンツプレビュー: 完成したドキュメントを読み取り専用モードで表示します
5. フォームビルダー: ブロックを使用して動的なフォームテンプレートを作成します
6. メールテンプレート: カスタマイズ可能なブロックを使ってメールテンプレートを作成します
7. 提案書ビルダー: ブロックベースの構造でプロフェッショナルな提案書を作成します