Vue.js と Quill.js を組み合わせてエディタを構築する方法

プログラミング > フロントエンド >

今回は、Vue 3 の <script setup> 構文を使用して、Quill.js を活用したリッチテキストエディタの実装方法を解説します。この記事では、Quill.js の初期化、Vue のデータとの同期、およびテキストデータの投稿処理までを具体的なコード例を交えて説明します。

Quill.jsとは？

Quill.js は、シンプルかつパワフルなリッチテキストエディタです。カスタマイズ性が高く、ツールバーやテーマを簡単に設定できるため、Vueや他のフレームワークと組み合わせることで、簡単にリッチテキストエディタを構築できます。

今回の課題

以下の要件を満たすリッチテキストエディタを構築します：

Quill.jsの初期化
- Vueのライフサイクルに合わせてエディタを初期化する。
データのバインディング
- Vueデータモデル（channel.channelDescription）とエディタの内容を適切に連携。
投稿処理
- 投稿時にQuillエディタの内容を取得してサーバーに送信する。
効率的な設計
- 不要な watch を避け、データ取得後にエディタを初期化する。

完成したコード例

以下が最終的なコード例です。

テンプレート部分

まず、Quillエディタとツールバーを含むテンプレートを構築します。

<template>
  <div class="form-container">
    <!-- チャンネル名 -->
    <input type="text" v-model="channel.channelName" placeholder="グループ名" class="name" />

    <!-- Quillツールバー -->
    <div class="editLeft" id="toolbar">
      <button class="ql-bold"></button>
      <button class="ql-strike"></button>
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
      <button class="ql-link"></button>
      <select class="ql-color">
        <option value="red">Red</option>
        <option value=""></option>
      </select>
    </div>

    <!-- Quillエディタ -->
    <div id="description"></div><br>

    <!-- 投稿ボタン -->
    <button @click="postContent">投稿する</button>
  </div>
</template>

スクリプト部分（`script setup`）

<script setup> を使って効率的にロジックを記述します。

<script setup>
import { ref, onMounted } from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.snow.css';

// 必要なデータを定義
const fetched = ref(false); // データ取得状態
const channel = ref({
  channelName: '',
  channelDescription: '' // チャンネルの説明文
});

const quill = ref(null); // Quillインスタンス

// Quill初期化関数
function initQuill() {
  // Quillエディタのインスタンス作成
  quill.value = new Quill('#description', {
    modules: {
      toolbar: '#toolbar', // ツールバーを設定
    },
    theme: 'snow' // Quillテーマ
  });

  // Vueデータモデルの初期値をQuillに設定
  quill.value.root.innerHTML = channel.value.channelDescription;
}

// 投稿ボタンをクリックした際にQuillエディタの内容を取得
function postContent() {
  const content = quill.value.root.innerHTML; // Quillエディタの内容を取得
  console.log('投稿内容:', content);

  // サーバーに送信する処理をここに記述
  // 例: await axios.post('/api/content', { description: content });
}

// コンポーネントがマウントされた時の処理
onMounted(async () => {
  // データを取得する関数（例: APIから取得）
  await fetchAllChannel();
  if (props.id) {
    channel.value = channels.value.find(d => d.channelID === props.id);
  }

  // 必要なプロパティをセット
  channel.value.channelDescription = '既存の説明文をここにセットします';

  // データ取得後にQuillを初期化
  fetched.value = true;
  initQuill();
});
</script>

動作フロー

1. 初期化

Vueの onMounted フック内で、必要なデータを非同期で取得します。
データ取得後に initQuill() を呼び出し、Quillエディタを初期化します。

2. Quillエディタの初期化

initQuill() では、Quill クラスのインスタンスを作成します。
Vueデータモデル（channel.channelDescription）の初期値をエディタに反映させます。

3. 投稿処理

投稿時に quill.value.root.innerHTML を使用してエディタの内容を取得し、サーバーに送信します。

重要なポイント

1. `watch`を不要にする

初期値を設定するために quill.value.root.innerHTML を使うことで、VueのデータモデルとQuillエディタを明示的に同期させています。そのため、watch でリアルタイムの監視を行う必要がありません。

2. Quillの内部HTMLを直接操作

Quillはエディタの内容をHTML形式で管理します。そのため、quill.value.root.innerHTML を利用することで簡単に値を取得・設定できます。

3. 投稿時のデータ取得

エディタの内容をサーバーに送信する場合、Quillの内容を直接取得して使用します。quill.value.root.innerHTML を使用することで、エディタ内のHTMLを簡単に取得可能です。

成果物の動作例

ページが読み込まれると、Quillエディタが初期化され、channel.channelDescription の値がエディタにセットされます。
ユーザーがエディタを編集すると、その内容をリアルタイムで投稿ボタンから取得できます。
投稿ボタンをクリックすると、現在のエディタの内容がコンソールに出力されます。

まとめ

この記事では、Vue.js と Quill.js を使って効率的にリッチテキストエディタを構築する方法を紹介しました。

ポイント

script setup 構文を活用 してシンプルかつ効率的なコードを記述。
Quill.js の強力なエディタ機能を活用し、Vueデータモデルとの連携を実現。
投稿処理時にはエディタの内容を直接取得する設計により、パフォーマンスを最適化。

これにより、Vueアプリケーションにカスタマイズ可能なリッチテキストエディタを簡単に導入できます。ぜひプロジェクトに取り入れてみてください！🎉

💡 次のステップ

カスタムモジュール を使ってQuillエディタをさらに拡張。
データ検証 を実装して、送信前にエディタの内容をチェック。
デザインの調整 を行い、ユーザーエクスペリエンスを向上。

登録日：2025-01-13

更新日：2025-01-13

by プログラマーこまつ

コメント tweetでコメント