syncfusion-vue-rich-text-editor

Syncfusion Vue Rich Text Editor の実装

Syncfusion Vue Rich Text Editor（ejs-richtexteditor）は、次の2つの主要モードをサポートする、単一の統合エディターコンポーネントです。

• HTML モード（デフォルト） — 有効な HTML マークアップを返す WYSIWYG エディターです
• Markdown モード — Markdown 構文を使用したプレーンテキスト編集で、marked などのサードパーティライブラリを介してレンダリングされます

どちらのモードも、同じ Vue コンポーネントと @syncfusion/ej2-vue-richtexteditor パッケージを使用します。両者を区別するのは、editorMode プロパティと注入するサービスモジュール（HtmlEditor または MarkdownEditor）です。

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

• Vue アプリにリッチテキスト／WYSIWYG エディターを追加したい場合
• プレビューに対応したMarkdown エディターが必要な場合
• ツールバー（種類、項目、固定表示、フローティング表示）をカスタマイズしたい場合
• 画像、音声、動画、テーブル、リンクを挿入したい場合
• Word からの貼り付け時のクリーンアップ、インライン編集、または IFrame モードが必要な場合
• AI アシスタント、スラッシュメニュー、絵文字ピッカー、または @メンションを統合したい場合
• フォームの検証、読み取り専用モード、または XHTML の検証が必要な場合
• エディターの値を取得／設定したい場合、またはイベントや選択 API を使用する場合

モード選択ガイド

目的	モード	注入するモジュール
WYSIWYG 形式の HTML 出力	editorMode="HTML"（デフォルト）	HtmlEditor
#、**bold** 構文を使用した Markdown テキスト	editorMode="Markdown"	MarkdownEditor
IFrame で分離された編集	HTML モード + IFrame の設定	HtmlEditor、HtmlEditor レンダーモード
Markdown のライブプレビューを左右に表示	Markdown モード + marked ライブラリ	MarkdownEditor

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

はじめに

📄 参照: references/getting-started.md

• パッケージのインストール（@syncfusion/ej2-vue-richtexteditor）
• CSS のインポートとテーマの設定
• モジュール注入の参照表（利用可能なすべてのサービス）
• 最小構成の HTML エディターのセットアップ（Composition API + Options API）
• 最小構成の Markdown エディターのセットアップ
• アプリケーションの実行

エディターモード（HTML と Markdown）

📄 参照: references/editor-modes.md

• HTML モード — デフォルトの WYSIWYG モードで、HTML マークアップを返します
• Markdown モード — editorMode="Markdown" を指定し、Markdown テキストを返します
• 対応する Markdown タグと選択範囲の書式設定
• marked ライブラリを使用した Markdown から HTML への変換
• Markdown のライブプレビューの実装
• Splitter コンポーネントを使用した左右分割のプレビュー

ツールバーの設定

📄 参照: references/toolbar-configuration.md

• ツールバーの種類：Expand、MultiRow、Scrollable、Popup
• 固定／フローティングツールバー（enableFloating、floatingToolbarOffset）
• ツールバーの位置（上部／下部）と toolbarSettings
• プログラムによるツールバー項目の有効化／無効化
• カスタムツールバーボタンのテンプレート

ツールバーのツールリファレンス

📄 参照: references/toolbar-tools.md

• カテゴリ別の組み込みツールバー項目すべて（テキスト書式、フォント、配置、リスト、リンク、画像、テーブル、元に戻す／やり直し、その他）
• Markdown 固有のツールバー項目
• 組み込みツールの削除または並べ替え
• toolbarSettings.items 配列の設定

クイックツールバー

📄 参照: references/quick-toolbars.md

• 画像、リンク、テーブル、音声、動画に対応するコンテキスト依存のツールバー
• 要素の種類ごとの quickToolbarSettings のカスタマイズ
• クイックツールバーのデフォルト項目と上書き
• クイックツールバーの有効化／無効化

画像の挿入

📄 参照: references/insert-images.md

• ツールバーから画像を挿入（URL とファイルアップロード）
• insertImageSettings を使用したサーバー側でのアップロード
• 画像のドラッグ＆ドロップへの対応
• 画像のサイズ変更、配置、キャプション、代替テキスト
• サーバー上の画像名の変更、画像サイズ制限の確認
• Image モジュールの注入

メディアの挿入（音声・動画）

📄 参照： references/insert-media.md

• Audio モジュールを使った音声の挿入
• Video モジュールを使った動画の挿入
• ファイルブラウザーとの連携
• メディアのクイックツールバーオプション

テーブルの挿入

📄 参照： references/insert-table.md

• HTML モードおよび Markdown モードでのテーブルの挿入
• デフォルトのテーブル構造（ヘッダー行付きの 2×2）
• テーブルのクイックツールバー（行、列、結合、プロパティ）
• テーブルの Table モジュールの注入

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

📄 参照： references/editor-value.md

• :value プロパティによる初期値の設定
• getValue() メソッドによるエディター値の取得
• v-model による双方向バインディング
• プレースホルダーテキスト（placeholder プロパティ）
• 文字数カウントと maxLength
• change、input、blur イベント
• プログラムによる書式設定用の execCommand API
• 選択 API とカーソル位置の設定

スマート編集機能

📄 参照： references/smart-editing.md

• slashMenuSettings によるスラッシュメニュー（/ コマンドパレット）
• 絵文字ピッカーのツールバー連携
• MentionModule によるメンションのサポート（@mention）
• メールマージフィールド

貼り付け時のクリーンアップ

📄 参照： references/paste-cleanup.md

• 書式を制御しながら Word／ブラウザーからコンテンツを貼り付ける
• pasteCleanupSettings：prompt、plainText、keepFormat
• 許可されていないタグ／属性の除去（deniedTags、deniedAttrs）
• PasteCleanup モジュールの注入
• クリップボードイベントの処理

エディターの種類（インライン、IFrame、サイズ変更可能）

📄 参照： references/editor-types.md

• インライン編集モード（コンテンツ編集可能な領域での直接編集）
• IFrame モード（ページからスタイルを分離）
• サイズ変更可能なエディター（enableResize、サイズ変更ハンドル）
• 各レンダリングタイプの選び方

AI アシスタント

📄 参照： references/ai-assistant.md

• AIAssistantService プロバイダーの注入
• AICommands と AIQuery のツールバー項目
• 定義済みプロンプトのドロップダウンを備えた AI ポップアップ
• AI アシスタントの動作とプロパティのカスタマイズ

検証とセキュリティ

📄 参照： references/validation-security.md

• フォームとの連携とフォーム送信
• XHTML 検証モード
• 読み取り専用モード（readonly プロパティ）
• 最大文字数の検証
• スペルチェックおよび文法チェックとの連携

アクセシビリティとグローバリゼーション

📄 参照： references/accessibility-globalization.md

• WCAG 2.2 および Section 508 への準拠
• キーボード操作とショートカット
• RTL（右から左）への対応
• グローバリゼーションとロケールの設定
• カスタムキーボードショートカットの上書き

API リファレンス - イベント

📄 参照： references/vue-events.md

• ライフサイクルイベント（created、destroyed）
• エディター操作イベント（actionBegin、actionComplete、toolbarClick）
• コンテンツ変更イベント（change、selectionChanged、focus、blur）
• ダイアログイベント（beforeDialogOpen、dialogOpen、dialogClose）
• ファイルアップロードイベント（画像、音声、動画のアップロード）
• ツールバーおよびポップアップイベント
• AI アシスタントイベント
• 高度なイベント（paste、resize、export、import）

API リファレンス - メソッド

📄 参照： references/vue-methods.md

• コンテンツアクセスメソッド（getHtml、getText、getXhtml、getContent、getCharCount）
• 選択および範囲メソッド（getSelection、getRange、selectAll、selectRange）
• コマンドの実行（利用可能なすべてのコマンドを使った executeCommand）
• ツールバー管理（ツールバー項目の有効化、無効化、削除）
• ダイアログメソッド（showDialog、closeDialog）
• フォーカスおよび状態メソッド（focusIn、focusOut、refreshUI、destroy）
• AI アシスタントメソッド（ポップアップの表示／非表示、プロンプトの実行、履歴の管理）
• ユーティリティメソッド（sanitizeHtml、print、fullscreen、ソースコード、絵文字ピッカー）

API リファレンス - プロパティ（コア）

📄 参照： references/properties-core.md

• コア設定（value、valueTemplate、placeholder、enabled、readonly、cssClass、htmlAttributes）
• 寸法とレイアウト（width、height、enableResize）
• エディターモードと動作（editorMode、enterKey、shiftEnterKey、enableTabKey、enableAutoUrl、enableMarkdownAutoFormat）
• ツールバー設定（enable、enableFloating、position、type、items、itemConfigs を含む toolbarSettings）
• ツールバーのカスタマイズ（floatingToolbarOffset、showTooltip）
• クイックツールバー設定（画像、リンク、表、音声、動画向け。actionOnScroll、enableAppendToBody を含む）
• フォントとテキストの書式設定（fontFamily、fontSize、fontColor、backgroundColor、format、lineHeight、formatPainterSettings）
• リストの書式設定（bulletFormatList、numberFormatList）
• メディア挿入設定（insertImageSettings、insertAudioSettings、insertVideoSettings、fileManagerSettings）
• 表の設定（width、resize、styles を含む tableSettings）
• 貼り付けとクリップボード（prompt、keepFormat、deniedAttrs/Tags、allowedStyleProps を含む pasteCleanupSettings、enableClipboardCleanup）

API リファレンス - プロパティ（高度）

📄 参照： references/properties-advanced.md

• AI アシスタント設定（commands、prompts、suggestions、ポップアップの寸法、ツールバー設定、bannerTemplate を含む aiAssistantSettings）
• 高度な機能（slashMenuSettings、emojiPickerSettings、codeBlockSettings、formatter、カスタムショートカット用の keyConfig）
• 検証と制限（maxLength、showCharCount、enableHtmlSanitizer、enableHtmlEncode、enableXhtml）
• ローカライズとアクセシビリティ（L10n 翻訳を含む locale、右から左に記述する言語向けの enableRtl）
• IFrame モード（enable、attributes、resources、metaTags、sandbox を含む iframeSettings）
• インラインモード（ツールバー表示用の enable、onSelection を含む inlineMode）
• インポートとエクスポート（serviceUrl/fileName/stylesheet を含む importWord、exportWord、exportPdf）
• 永続化と自動保存（localStorage、autoSaveOnIdle、ミリ秒単位の saveInterval を含む enablePersistence）
• 元に戻す／やり直し（履歴の上限を設定する undoRedoSteps、デバウンス遅延を設定する undoRedoTimer）

クイックスタート

npm install @syncfusion/ej2-vue-richtexteditor

npm install @syncfusion/ej2-tailwind3-theme

HTML エディター（Composition API）

<template>
  <ejs-richtexteditor :value="value" :toolbarSettings="toolbarSettings" />
</template>

<script setup>
import { provide } from 'vue';
import {
  RichTextEditorComponent as EjsRichtexteditor,
  Toolbar, Link, Image, HtmlEditor, QuickToolbar
} from '@syncfusion/ej2-vue-richtexteditor';

const value = '<p>Start editing here...</p>';
const toolbarSettings = {
  items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',
    'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'Undo', 'Redo']
};
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>

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

Markdown エディター（Composition API）

<template>
  <ejs-richtexteditor
    editorMode="Markdown"
    :value="value"
    :toolbarSettings="toolbarSettings"
  />
</template>

<script setup>
import { provide } from 'vue';
import {
  RichTextEditorComponent as EjsRichtexteditor,
  Toolbar, Link, Image, MarkdownEditor
} from '@syncfusion/ej2-vue-richtexteditor';

const value = '**Hello** from Markdown editor!';
const toolbarSettings = {
  items: ['Bold', 'Italic', 'StrikeThrough', '|',
    'Formats', 'OrderedList', 'UnorderedList', '|',
    'CreateLink', 'Image', '|', 'Undo', 'Redo']
};
provide('richtexteditor', [Toolbar, Link, Image, MarkdownEditor]);
</script>

主要モジュールの注入リファレンス

機能	注入するモジュール
HTML 編集（デフォルト）	HtmlEditor
Markdown 編集	MarkdownEditor
ツールバー	Toolbar
ハイパーリンク	Link
画像	Image
音声	Audio
動画	Video
表	Table
クイックツールバー	QuickToolbar
貼り付けのクリーンアップ	PasteCleanup
スラッシュメニュー	SlashMenu
AI アシスタント	AIAssistantService
文字数	Count

モジュールは必ず provide('richtexteditor', [...modules]) で注入してください。

よくあるパターン

v-model で値を制御する

<ejs-richtexteditor v-model:value="content" />

プログラムから値を取得する

<ejs-richtexteditor ref="rteRef" />

const html = rteRef.value.ej2Instances.getHTML();
const text = rteRef.value.ej2Instances.getText();

Markdown エディターと HTML のライブプレビュー

editorMode="Markdown" を使用し、コンテンツを marked.parse() に渡してプレビュー用の <div> に表示する change イベントハンドラーを指定します。分割ペインの完全な実装については、references/editor-modes.md を参照してください。

HTML モードと Markdown モードの選び方

• HTML として保存する書式付き出力が必要 → HTML モードを使用
• ユーザーがプレーンテキストとして読み書きできる構文付きの軽量なテキストが必要 → Markdown モードを使用
• リッチメディア（画像、動画、音声、書式設定付きの表）が必要 → HTML モードを使用
• GitHub／Notion でレンダリングされる開発者向けのソースが必要 → Markdown モードを使用