syncfusion-vue-blockeditor

Syncfusion Vue BlockEditor コンポーネント

Syncfusion Vue BlockEditor は、さまざまなブロックタイプを使ってコンテンツを作成、書式設定、整理できる、強力なブロックベースのコンテンツエディターです。このスキルでは、Vue 3 Composition API を使用した BlockEditor コンポーネントの実装方法を説明し、14 種類すべてのブロックタイプ、メニュー、メソッド、イベント、高度な機能を網羅します。

コンポーネントの概要

Vue BlockEditor コンポーネントでは、次の機能を利用できます。

• 14 種類のブロックタイプ： Paragraph、Heading（1～4）、BulletList、NumberedList、Checklist、Code、Image、Table、Quote、Callout、Divider、Collapsible（Paragraph／Heading）、Template
• 5 種類のコンテンツタイプ： Text、Link、Mention、Label、InlineCode
• 4 種類のインタラクティブメニュー： スラッシュコマンド（/）、コンテキストメニュー（右クリック）、ブロックアクションメニュー、インラインツールバー
• ドラッグ＆ドロップ： ハンドルを使った視覚的なブロックの並べ替え
• 20 種類以上のメソッド： ブロックの CRUD、選択、データのエクスポート（JSON／HTML）、書式設定
• 14 種類のイベント： ブロックの変更、ドラッグ／ドロップ、貼り付け、ファイルのアップロード、フォーカス／フォーカス解除
• 高度な機能： 構文のハイライト、画像のアップロード、テーブルの編集、元に戻す／やり直す、キーボードショートカット
• テーマのカスタマイズ： --color-sf-* CSS 変数の上書き、CSS クラス／ID の指定、または Syncfusion Theme Studio を使用したテーマの完全なカスタマイズ

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

はじめにとインストール

📄 参照： references/getting-started.md

• Vue 3 + Vite プロジェクトのセットアップ
• Node.js 18 以降の前提条件
• パッケージのインストール（@syncfusion/ej2-vue-blockeditor）
• Tailwind 3 を使った CSS テーマのインポート
• コンポーネントの登録と基本的な初期化
• アプリケーションの実行

ブロックタイプと構造

📄 参照： references/block-types.md

• 14 種類すべてのブロックタイプと例
• BlockModel の構造（id、blockType、content、properties）
• ブロックプロパティの設定
• カスタムテンプレート
• インデントと CSS クラスのカスタマイズ
• ブロックタイプの選択ガイド

インラインコンテンツと書式設定

📄 参照： references/inline-content.md

• ContentModel の構造
• 5 種類のコンテンツタイプ（Text、Link、Mention、Label、InlineCode）
• インラインスタイル（太字、斜体、下線、取り消し線、色、背景）
• リンクプロパティと URL の設定
• users 配列を使ったユーザーメンション
• トリガー文字を使ったラベル／タグの設定
• インライン書式設定の例

タイポグラフィブロック

📄 参照： references/typography-blocks.md

• プレースホルダー付きの Paragraph ブロック
• Heading ブロック（レベル 1～4）
• Heading レベルの選択
• セクションを区切る Divider ブロック
• プレースホルダーのカスタマイズ
• タイポグラフィの例

リストブロック

📄 参照： references/list-blocks.md

• BulletList（箇条書きリスト）
• NumberedList（番号付きリスト）
• isChecked 状態に対応した Checklist
• リストのプレースホルダーのカスタマイズ
• インタラクティブなチェックリストの例

ネストされたブロックと折りたたみ可能なブロック

📄 参照： references/nested-blocks.md

• ネスト構造のための Children プロパティ
• 親子関係（parentId）
• CollapsibleHeading（レベル 1～4）
• CollapsibleParagraph ブロック
• isExpanded 状態の設定
• 複数行に対応した Quote ブロック
• 重要な情報を示す Callout ブロック
• ネストされたブロックの例

特殊なブロック（Code、Image、Table）

📄 参照： references/special-blocks.md

• 構文のハイライトに対応した Code ブロック
• codeBlockSettings（言語、defaultLanguage）
• アップロードとサイズ変更に対応した Image ブロック
• imageBlockSettings（saveUrl、path、maxFileSize、allowedTypes）
• 行、列、セルを含む Table ブロック
• テーブルのプロパティ（width、enableHeader、enableRowNumbers）
• テーブルのサイズ変更と複数行／列の選択
• ファイルアップロードの設定

エディターメニューとツールバー

📄 参照： references/editor-menus.md

• スラッシュコマンドメニュー（/ トリガー）- commandMenuSettings
• コンテキストメニュー（右クリック）- contextMenuSettings
• ブロックアクションメニュー（ドラッグハンドルにホバー）- blockActionMenuSettings
• インラインツールバー（テキスト選択時）- inlineToolbarSettings
• ブロックタイプ変換用の変換設定
• フォント色と背景色の設定
• メニューのカスタマイズとイベント
• カスタムメニュー項目

メソッドとプログラムによる制御

📄 参照： references/methods-api.md

• ブロック管理：addBlock()、removeBlock()、updateBlock()、moveBlock()
• 選択：setSelection()、getSelectedBlocks()、selectBlock()、selectAllBlocks()
• カーソル：setCursorPosition()、focusIn()、focusOut()
• データのエクスポート：getDataAsJson()、getDataAsHtml()、print()
• 書式設定：executeToolbarAction()、enableToolbarItems()、disableToolbarItems()
• HTML の解析：parseHtmlToBlocks()、renderBlocksFromJson()
• Composition API パターンを使用したメソッドの使用方法

イベントとライフサイクル

📄 参照： references/events-lifecycle.md

• ブロック変更イベント：blockChanged
• ドラッグ＆ドロップ：blockDragStart、blockDragging、blockDropped
• フォーカスイベント：focus、blur
• 選択：selectionChanged
• 貼り付け：beforePasteCleanup、afterPasteCleanup
• ファイルアップロード：beforeFileUpload、fileUploading、fileUploadSuccess、fileUploadFailed
• 作成イベント
• Composition API を使用したイベントハンドラーパターン

機能と設定

📄 参照： references/features-configuration.md

• ドラッグ＆ドロップ：enableDragAndDrop
• 貼り付け時のクリーンアップ：pasteCleanupSettings（deniedTags、keepFormat、plainText）
• 元に戻す／やり直し：undoRedoStack（デフォルト：30）
• キーボードショートカット：keyConfig のカスタマイズ
• 読み取り専用モード：readOnly
• 永続化：enablePersistence
• カスタムスタイル：cssClass
• 高さ／幅：height、width
• テーマのカスタマイズ：デフォルト CSS の上書き、--color-sf-* CSS 変数、CSS クラス／ID（.e-blockeditor、.e-active、.e-selected、.e-list-item、.e-dropdownbase、.e-table-element、#blockeditor_contextmenu、#blockeditor_code-ddl_popup）、複数テーマの切り替え例（Slate Light、Sage Green、Dark Pro）、Syncfusion Theme Studio

共同編集

📄 参照： references/collaborative-editing.md

• Yjs CRDT フレームワークを使用したリアルタイム共同編集
• WebSocket サーバーのセットアップを含む 6 ステップのクイックスタートガイド
• Yjs プロバイダー（y-websocket、y-webrtc、y-indexeddb、Hocuspocus、Liveblocks、PartyKit）
• ルーム割り当てロジック（URL ハッシュベース）を含む共同編集設定ファイル
• collaborationSettings の設定（adapter、provider、enableAwareness、versionHistory）
• enableAwareness によるユーザーのプレゼンスとリモートカーソル
• users 配列と currentUserId によるユーザー識別
• IndexedDB ストレージ、スナップショット、復元、比較、エクスポート／インポートによるバージョン履歴
• スナップショットのライフサイクルイベント（snapshotCreated、snapshotRestored）
• 完全な実装コードを含むバージョン履歴 UI パネルの例

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

📄 参照： references/accessibility-globalization.md

• WCAG 2.2 および Section 508 への準拠
• WAI-ARIA 属性
• キーボードナビゲーションのショートカット
• ローカライズ：L10n を使用する locale プロパティ
• RTL サポート：enableRtl
• セキュリティ：enableHtmlSanitizer（XSS 防止）、enableHtmlEncode
• ローカライズの例（ドイツ語、アラビア語など）

クイックスタートの例

アプリケーションに合ったテーマパッケージをインストールします。この例では Tailwind 3 を使用します。

npm install @syncfusion/ej2-tailwind3-theme

<template>
  <div>
    <ejs-blockeditor 
      ref="blockEditor"
      :blocks="blocks"
      :users="users"
      :enableDragAndDrop="true"
      @blockChanged="onBlockChanged"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { BlockEditorComponent as EjsBlockeditor, ContentType } from '@syncfusion/ej2-vue-blockeditor';

const blockEditor = ref(null);

const blocks = [
  {
    id: 'heading-1',
    blockType: 'Heading',
    properties: { level: 1 },
    content: [
      { contentType: ContentType.Text, content: 'Welcome to BlockEditor' }
    ]
  },
  {
    id: 'intro-para',
    blockType: 'Paragraph',
    content: [
      { contentType: ContentType.Text, content: 'Create content using blocks. Type ' },
      { contentType: ContentType.Text, content: '/', properties: { styles: { bold: true } } },
      { contentType: ContentType.Text, content: ' for commands.' }
    ]
  },
  {
    id: 'checklist-1',
    blockType: 'Checklist',
    properties: { isChecked: false },
    content: [
      { contentType: ContentType.Text, content: 'Complete the tutorial' }
    ]
  }
];

const users = [
  { id: 'user1', user: 'John Doe' },
  { id: 'user2', user: 'Jane Smith' }
];

const onBlockChanged = (args) => {
  console.log('Block changed:', args.changes);
};
</script>

<style>
@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/blockeditor/index.css';
</style>