ママ「vue‑quillは終わりよ。Vue 3でQuill本体を直で使う方法を伝授するわ」

🎙️「vue‑quill？そんな古いの使うの？ダメよダメダメ！」

ちょっと聞いてちょうだい。
未だに vue‑quill を推奨する記事があるんだけど、最後に更新されたのが約2年前、Quillのバージョンは1.3.7よ 。アタシたちのお店じゃもう骨董品扱いだわぁ🏺

最新のGoogle Chromeで使うとコンソールにこんなエラーが出るわよ！！❌️❌️❌️

> ERROR! Listener added for a 'DOMNodeInserted' mutation event 

可愛くても、今どきメンテが止まってたら将来どうなるか分からないわ。Σ(・∀・；)
セキュリティだって心配よ〜。
それに、Quill v2 には未対応。カスタムモジュールを使おうにも古いままじゃ進化できないわね

---

✅ ママのアドバイス：オシャレなアタシでも、やっぱりシンプルが一番！

vue-quillを使わなくても直接使うのがシンプルでいいわよっ🎯

🌸 Quill本体をVue 3で直接使う方法が良いワケ

1. 依存少なめ → 軽やかでストレス知らず
2. 公式APIがそのまま使える → "text-change" イベントとかモジュール登録も自由自在
3. 将来性アリ → Quill v2, v3…新しい機能も逃がさない！

---

💅 基本の使い方

あたしはアーダーコーダ説明するのは苦手なのっ
これがママが開発したVue3用のラッパーコンポーネントよ♥️
これを見て作るもよし、自由にカスタマイズして使うのもよし✨️
煮るなり焼くなり好きにして👄

でも刺し身はイヤッ🍣 (南国少年パプワくんより)

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

const props = defineProps({
    modelValue: String,
    disabled: Boolean,
});

const emits = defineEmits(["update:modelValue"]);
let editor = ref(null);
let quillInstance = null;

const toolbar = computed(() => {
    // ここは好きな用にツールバーをカスタマイズしてね♥
    return [
        [{ color: [] }, { background: [] }],
        ["bold", "italic", "underline"],
        ["link", "image"],
        [{ align: [] }, { list: "ordered" }, { list: "bullet" }],
        [{ size: ["small", false, "large", "huge"] }, "clean"],
    ];
});

const content = computed({
    get: () => {
        return props.modelValue ? props.modelValue : "<p><br></p>";
    },
    set: (value) => {
        emits("update:modelValue", value);
    },
});

onMounted(() => {
    quillInstance = new Quill(editor.value, {
        theme: "snow",
        modules: {
            toolbar: toolbar.value,
        },
        readOnly: props.disabled,
    });
    quillInstance.root.innerHTML = content.value;
    quillInstance.on("text-change", () => {
        emits("update:modelValue", quillInstance.root.innerHTML);
    });
});

watch(
    () => props.modelValue,
    (value) => {
        if (quillInstance && quillInstance.root.innerHTML !== value) {
            quillInstance.root.innerHTML = value || "<p><br></p>";
        }
    }
);
</script>
<template>
    <div
        ref="editor"
        :style="{ minHeight: '6rem' }"
        class="bg-white"
    ></div>
</template>

<style>
.ql-editor .ql-size-small {
    font-size: 0.9em;
}
.ql-editor .ql-size-large {
    font-size: 1.3em;
}
.ql-editor .ql-size-huge {
    font-size: 2.1em;
}
</style>

これだけで使えるのよ〜💕
簡単でしょ⁉️😍

このコードだとこんな感じになるわ↓↓

それじゃ、またね〜〜〜✋️