VueQuillは、Vue 3向けに設計された強力なリッチテキストエディターコンポーネントであり、Quillエディターを基盤としています。このガイドでは、VueQuillの基本的なインストールから高度なカスタマイズ方法まで詳しく解説します。

VueQuillを選択する理由

VueQuillは以下の特長を持っています：

• スムーズな統合：Vue 3専用設計で、プロジェクトへの導入が簡単です。
• 多様な機能：フォーマット設定、リスト作成、画像挿入、テーブル編集などが可能です。
• 柔軟なカスタマイズ性：ツールバーのデザインやテーマスタイルを自由に調整できます。
• 信頼性のあるコミュニティサポート：Quillエコシステムに基づき、豊富なプラグインと拡張機能があります。

インストール方法

CDNを使用した導入（プロトタイピングに適しています）

HTMLファイル内で直接CDN経由でVueQuillを読み込むことができます。

<!-- Vue.jsの導入 -->
<script src="https://unpkg.com/vue@next"></script>

<!-- VueQuillの導入 -->
<script src="https://unpkg.com/@vueup/vue-quill@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/@vueup/vue-quill@latest/dist/vue-quill.snow.prod.css">

NPM/Yarnを使用した導入（本番環境におすすめ）

Vueプロジェクト内での推奨方法です。

npm install @vueup/vue-quill@latest --save
# または
yarn add @vueup/vue-quill@latest

コンポーネントの登録と使用

1. コンポーネントの登録

グローバル登録（main.jsに記述）：

import { createApp } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const app = createApp({});
app.component('QuillEditor', QuillEditor);

ローカル登録（必要なコンポーネント内に記述）：

import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  components: {
    QuillEditor,
  },
};

2. テンプレートでの使用

以下のようにテンプレート内にQuillEditorを配置します。

<template>
  <QuillEditor theme="snow" />
</template>

3. スタイルシートの追加

テーマに応じたスタイルシートを別途インポートする必要があります。

• 雪テーマ：import '@vueup/vue-quill/dist/vue-quill.snow.css';
• バブルテーマ：import '@vueup/vue-quill/dist/vue-quill.bubble.css';

ツールバーのカスタマイズ

VueQuillではツールバーを簡単にカスタマイズできます。

プレセットツールバーの利用

事前に定義されたツールバーを使用できます。

<template>
  <!-- 基本ツールバー -->
  <QuillEditor toolbar="essential" />

  <!-- 簡易ツールバー -->
  <QuillEditor toolbar="minimal" />

  <!-- 完全ツールバー -->
  <QuillEditor toolbar="full" />
</template>

ツールバーオプションのカスタマイズ

特定のボタンのみを表示する場合。

<template>
  <QuillEditor :toolbar="['bold', 'italic', 'underline', 'link', 'image']" />
</template>

先進的なツールバーのカスタマイズ

独自のツールバーを作成することも可能です。

<template>
  <QuillEditor toolbar="#custom-toolbar">
    <template #toolbar>
      <div id="custom-toolbar">
        <button class="ql-bold"></button>
        <button class="ql-italic"></button>
        <button class="ql-underline"></button>
        <button id="upload-button">画像アップロード</button>
      </div>
    </template>
  </QuillEditor>
</template>

機能の拡張

さらに高度な設定を行うこともできます。

• テーマの切り替え：theme属性を変更して異なるテーマを使用します。
• モジュールの統合：外部Quillモジュールを組み込んで機能を拡張します。
• オプションの設定：optionsプロパティでエディターの動作を細かく調整します。
• イベントハンドリング：コンテンツの変更や選択範囲の変化などを監視します。

詳細なAPIドキュメントはプロジェクト内のdocs/content/api/ディレクトリをご覧ください。