syncfusion-aspnetcore-blockeditor

Syncfusion ASP.NET Core Block Editor コントロール

概要

Razor Tag Helpers を使用して、ASP.NET Core アプリケーションに Syncfusion EJ2 Block Editor を実装するための包括的なスキルです。セットアップ、ブロックの設定、コンテンツの操作、イベント、およびブロックベースのドキュメントエディターを作成するためのベストプラクティスについて説明します。

Syncfusion Block Editor は、独立したコンテンツブロックを使用して、構造化されたドキュメントを作成・編集できる多用途のブロックベースエディターです。主な機能は次のとおりです。

• 複数のブロックタイプ：段落、見出し（1～4）、リスト（箇条書き、番号付き、チェックリスト）、コード、テーブル、画像、引用、コールアウトなど
• ネスト構造：折りたたみ可能な見出し、引用、コールアウトと子ブロックに対応
• 充実したエディターメニュー：スラッシュコマンド、コンテキストメニュー、インラインツールバー、ブロックアクションメニュー
• ドラッグ＆ドロップ：視覚的なフィードバックを提供しながら、ブロックをスムーズに並べ替え
• コンテンツのサニタイズ：拒否するタグを設定できる、組み込みの貼り付けコンテンツのクリーンアップ機能
• キーボードショートカット：書式設定、ブロック作成、管理のための包括的なショートカット
• 元に戻す／やり直す：設定可能な元に戻す／やり直すスタック（既定では30件の操作）
• グローバル化：多言語対応と RTL レイアウト対応
• イベント：ユーザー操作やコンテンツの変更を監視するための充実したイベントシステム
• レスポンシブデザイン：デスクトップデバイスとモバイルデバイスで動作する適応型 UI
• 共同編集：Yjs CRDT フレームワークによるリアルタイムの複数ユーザーでのドキュメント編集、リモートカーソルの認識、ユーザーのプレゼンス追跡、バージョン履歴の管理

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

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• BlockEditor の基本的な実装
• CSS のインポートとテーマの選択
• 最初の Block Editor インスタンスの作成
• 初期ブロックコンテンツの設定

組み込みブロック

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

• ブロックタイプの概要（段落、見出し、リスト、コード、テーブル、埋め込みなど）
• ブロックのプロパティ（id、blockType、content、indent）
• ネストされたブロックタイプ（CollapsibleHeading、CollapsibleParagraph、Quote、Callout）
• 親子関係と階層
• 展開状態の制御とプレースホルダー
• CSS クラスのカスタマイズとテンプレート

Block Editor のメニュー

📄 参照： references/blockeditor-menus.md

• インラインツールバーの設定とイベント
• ブロックアクションメニューのカスタマイズ
• ブロックをすばやく挿入するためのスラッシュコマンド（/）
• コンテキストメニューの設定
• ツールバーボタンと書式設定アクション

ドラッグ＆ドロップとコンテンツ

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

• ドラッグ＆ドロップ機能の有効化
• ドラッグによるブロックの並べ替え
• 複数ブロックの選択と移動
• ドラッグ操作中の視覚的なフィードバック
• コンテンツの挿入とブロックの配置

メソッドと API

📄 参照： references/methods-and-api.md

• ブロック管理：addBlock、removeBlock、moveBlock、updateBlock、getBlock、getBlockCount
• 選択とカーソル：setSelection、setCursorPosition、getSelectedBlocks、getRange、selectRange、selectBlock、selectAllBlocks
• フォーカス管理：focusIn、focusOut
• 書式設定：executeToolbarAction、enableToolbarItems、disableToolbarItems
• データのエクスポート：getDataAsJson、getDataAsHtml、renderBlocksFromJson、parseHtmlToBlocks、print
• 各メソッドカテゴリの実用例

スタイルと外観

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

• CSS テーマのオプション（Material、Bootstrap、Fluent、Tailwind、Fabric のテーマ）
• ブロックレベルのスタイル設定と cssClass プロパティ
• タイポグラフィのオプション（太字、斜体、下線、取り消し線）
• インデントとネストされたブロックのスタイル設定
• プレースホルダーテキストのカスタマイズ
• ダークモード対応とカスタムテーマ

高度な機能

📄 参照： references/advanced-features.md

• 貼り付け時のクリーンアップとコンテンツのサニタイズ（拒否タグ）
• 書式維持モードとプレーンテキストモード
• 元に戻す／やり直し機能とスタックの設定
• キーボードショートカットとカスタマイズ
• 閲覧専用エディター向けの読み取り専用モード
• XSS 保護と HTML サニタイザー
• RTL（右から左）への対応
• グローバリゼーションと多言語ローカライズ

共同編集

📄 参照： references/collaborative-editing.md

• Yjs プロバイダーとの統合による、リアルタイムな複数ユーザーでのドキュメント編集
• 共同編集アダプターとプロバイダー（y-websocket、y-webrtc、Hocuspocus、Liveblocks、PartyKit）の設定
• enableAwareness によるユーザーのプレゼンスとリモートカーソルの可視化
• avatarBgColor によるアクティブユーザーの追跡とユーザー設定
• スナップショットを使用したバージョン履歴の管理、復元、比較、エクスポート、インポート操作
• スナップショットのライフサイクルイベント（snapshotCreated、snapshotRestored）
• 開発環境と本番環境へのデプロイに関するベストプラクティス
• 共同編集に関する問題のトラブルシューティング

クイックスタートの例

基本的なブロックエディターのセットアップ

手順 1：NuGet パッケージをインストール

Install-Package Syncfusion.EJ2.AspNet.Core

手順 2：_ViewImports.cshtml に登録

@addTagHelper *, Syncfusion.EJ2

手順 3：_Layout.cshtml に CSS とスクリプトを追加

<head>
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/dist/ej2.min.css" />
</head>
<body>
    @RenderBody()
    
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
    <ejs-scripts></ejs-scripts>
    
    @RenderSection("Scripts", required: false)
</body>

手順 4：ビューにブロックエディターを作成

@using Syncfusion.EJ2.BlockEditor

<div id='blockeditor-container'>
    <ejs-blockeditor id="block-editor" blocks="@ViewBag.BlocksData"></ejs-blockeditor>
</div>

<style>
    #blockeditor-container {
        margin: 20px auto;
    }
</style>

手順 5：コントローラーでブロックを設定

using Syncfusion.EJ2.BlockEditor;

public class BlockModel
{
    public string id { get; set; }
    public string blockType { get; set; }
    public object properties { get; set; }
    public List<object> content { get; set; }
}

public IActionResult Index()
{
    var blocks = new List<BlockModel>
    {
        new BlockModel
        {
            id = "heading-1",
            blockType = "Heading",
            properties = new { level = 1 },
            content = new List<object>
            {
                new { contentType = "Text", content = "Welcome to Block Editor" }
            }
        },
        new BlockModel
        {
            id = "paragraph-1",
            blockType = "Paragraph",
            content = new List<object>
            {
                new { contentType = "Text", content = "Start creating your content with blocks!" }
            }
        }
    };
    
    ViewBag.BlocksData = blocks;
    return View();
}

よくあるパターン

パターン 1：新しいブロックを動的に追加

var blockEditorObj = ej.base.getInstance(document.getElementById('block-editor'), ejs.blockeditor.BlockEditor);

const newBlock = {
    id: 'new-paragraph',
    blockType: 'Paragraph',
    content: [
        {
            contentType: "Text",
            content: 'This is a newly added block'
        }
    ]
};

// Add after a specific block
blockEditorObj.addBlock(newBlock, 'existing-block-id', true);

パターン 2：ネストされた折りたたみ構造

new BlockModel
{
    blockType = "CollapsibleHeading",
    content = new List<object>
    {
        new { contentType = "Text", content = "Section Title" }
    },
    properties = new
    {
        level = 1,
        isExpanded = true,
        children = new List<BlockModel>
        {
            new BlockModel
            {
                blockType = "Paragraph",
                content = new List<object>
                {
                    new { contentType = "Text", content = "Hidden content goes here" }
                }
            }
        }
    }
}

パターン 3：貼り付け時のクリーンアップを設定

<ejs-blockeditor id="block-editor">
    <e-blockeditor-pastesettings 
        deniedTags="@(new string[] { "script", "iframe", "form" })"
        keepFormat="true">
    </e-blockeditor-pastesettings>
</ejs-blockeditor>

パターン 4：カスタムスラッシュコマンド

var commandMenuItems = new List<object>
{
    new 
    {
        id = "timestamp",
        groupHeader = "Actions",
        label = "Insert Timestamp",
        iconCss = "e-icons e-schedule"
    },
    new 
    {
        id = "separator",
        type = "Divider",
        groupHeader = "Utility",
        label = "Insert Divider",
        iconCss = "e-icons e-divider"
    }
};

ViewBag.CommandMenuItems = commandMenuItems;

パターン 5：表示用の読み取り専用エディター

<ejs-blockeditor id="block-editor" 
                 readOnly="true" 
                 blocks="@ViewBag.BlocksData">
</ejs-blockeditor>

主なプロパティ

プロパティ	型	説明	デフォルト
id	string	ブロックエディターのインスタンスを識別する一意の ID	-
blocks	List	初期ブロックコンテンツ	[]
height	string	エディターの高さ（px、vh、%）	auto
width	string	エディターの幅（px、%）	100%
readOnly	bool	読み取り専用モードを有効化	false
cssClass	string	スタイル設定用のカスタム CSS クラス	-
enableDragAndDrop	bool	ブロックのドラッグ＆ドロップを有効化	true
enableRtl	bool	右から左へのレイアウトを有効化	false
locale	string	ローカライズのカルチャ（例："de"、"es"）	"en"
undoRedoStack	int	元に戻す／やり直しのステップ数	30
keyConfig	object	キーボードショートカットの設定	既定のショートカット

よくあるユースケース

1. ブログ記事エディター - 見出し、段落、リスト、コードスニペット、画像を含む構造化されたブログエディターを作成します
2. ナレッジベース - 折りたたみ可能なセクションとネストされたコンテンツを備えた階層型ドキュメントを構築します
3. ニュースレターテンプレートビルダー - 定義済みのブロックを使ってメールテンプレートをデザインします
4. コンテンツ管理システム - ドラッグ＆ドロップによるブロックの並べ替えで、モジュール式コンテンツを管理します
5. ドキュメントプラットフォーム - コードブロック、表、コールアウトを使って技術ドキュメントを作成します
6. フォームビルダー - ブロックの表示を条件に応じて切り替える動的なフォームを作成します
7. 共同編集 - ブロック単位の権限を設定した共有ドキュメント編集を実装します

ワークフローパターン

ASP.NET Core で Syncfusion Block Editor を実装する場合：

1. インストールとセットアップ - パッケージのインストールと登録について、Getting Started ガイドに従います
2. ブロック構造の定義 - ブロックの種類を選択し、references/built-in-blocks.md で設定します
3. エディターの初期化 - 初期ブロックを指定して Block Editor のインスタンスを作成します
4. 機能の設定 - 必要に応じてメニュー、ドラッグ＆ドロップ、貼り付け時のクリーンアップを有効にします
5. イベントの処理 - コンテンツの検証、ログ記録、統合のためにイベントをバインドします
6. 外観のカスタマイズ - CSS テーマ、カスタムクラス、スタイルを適用します
7. メソッドの実装 - API メソッドを使用してプログラムからコンテンツを操作します
8. テストと最適化 - 機能とパフォーマンスを検証します