Even though you tagged the question as a Vue 2 question, I am going to guess you are using Vue 3 because otherwise, it should work just fine (I also tried your code and fixed it on Vue 3).
You are actually facing a breaking change issue.
When you want to update your data with a v-model now, you need to use :
- prop : value -> modelValue;
- event : input -> update:modelValue;
Your code should look like this for Vue 3 :
<template>
<div ref="editor"></div>
</template>
<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.snow.css";
export default {
props: {
modelValue: {
type: String,
default: "",
},
},
data() {
return {
editor: null,
};
},
mounted() {
var _this = this;
this.editor = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[
{
header: [1, 2, 3, 4, false],
},
],
["bold", "italic", "underline", "link"],
],
},
//theme: 'bubble',
theme: "snow",
formats: ["bold", "underline", "header", "italic", "link"],
placeholder: "Type something in here!",
});
this.editor.root.innerHTML = this.modelValue;
this.editor.on("text-change", function () {
return _this.update();
});
},
methods: {
update: function update() {
this.$emit(
"update:modelValue",
this.editor.getText() ? this.editor.root.innerHTML : ""
);
},
},
};
</script>
Good luck with your project!
Answer from Valentin Richet on Stack OverflowVideos
» npm install vue3-quill
» npm install @vueup/vue-quill
» npm install vue-quill-editor
» npm install vue-quill
The way we solved this by only using the official package is:
<div
id="text-editor"
ref="textEditorEl"
class="text-editor__editor"
/>
Then we use composition api, but im sure option api is the same concept:
Add a field for the quill editor let textEditorEl = null
Add a onMounted, in which you add a nextTick, to be sure the ref is ready.
Add a
quillEditor = new Quill(textEditorEl.value || '#text-editor', {
modules: {
toolbar: true,
},
theme: 'snow',
});
Ofcourse this is just the basics, styling etc is custom for our application so cant help you with that. Good luck!
You could use this tiny wrapper component: https://github.com/alekswebnet/vue-quilly
Then you can create your custom editor. Basic setup:
npm add [email protected] vue-quilly
# Or
pnpm add [email protected] vue-quilly
import 'quill/dist/quill.core.css' // Required
import 'quill/dist/quill.snow.css' // For snow theme (optional)
import 'quill/dist/quill.bubble.css' // For bubble theme (optional)
Define Quill options:
const options = {
theme: 'snow', // If you need Quill theme
modules: {
toolbar: true,
},
placeholder: 'Compose an epic...',
readOnly: false
}
Initialize the editor:
const editor = ref<InstanceType<typeof QuillyEditor>>()
const model = ref<string>('<p>Hello Quilly!</p>')
// Quill instance
let quill: Quill | null = null
onMounted(() => {
quill = editor.value?.initialize(Quill)!
})
<QuillyEditor
ref="editor"
v-model="model"
:options="options"
@text-change="({ delta, oldContent, source }) => console.log('text-change', delta, oldContent, source)"
@selection-change="({ range, oldRange, source }) => console.log('selection-change', range, oldRange, source)"
@editor-change="(eventName) => console.log('editor-change', `eventName: ${eventName}`)"
@focus="(quill) => console.log('focus', quill)"
@blur="(quill) => console.log('blur', quill)"
@ready="(quill) => console.log('ready', quill)"
/>
(The text was too long for a comment)
Visit the repository - in it's readme you find the answer:
https://github.com/surmon-china/vue-quill-editor
Unfortunately, since the Quill project has effectively stopped being maintained, vue-quill-editor will be DEPRECATED and will no longer support Vue3; if you're looking for a rich text editor, I recommend migrating to tiptap, which is a much better alternative.
So using the editor you want is no longer supported for Vue3. Even if you get it working, it seems switching to another rich text editor is in order.
As suggested, try tiptap:
https://tiptap.dev/installation/vue3
2024:
If you need a wrapper for Vue 3, take a look at vue-quilly library. It uses recently released Quill 2:
npm add [email protected] vue-quilly
# Or
pnpm add [email protected] vue-quilly
Import Quill full build if you need all modules or core build with minimum required modules:
import Quill from 'quill' // Full build
import Quill from 'quill/core' // Core build
import { QuillyEditor } from 'vue-quilly'
Add core styles. Also import one of Quill's themes, if you need one:
import 'quill/dist/quill.core.css' // Required
import 'quill/dist/quill.snow.css' // For snow theme (optional)
import 'quill/dist/quill.bubble.css' // For bubble theme (optional)
Define Quill options:
const options = {
theme: 'snow', // If you need Quill theme
modules: {
toolbar: true,
},
placeholder: 'Compose an epic...',
readOnly: false
}
Initialize the editor:
const editor = ref<InstanceType<typeof QuillyEditor>>()
const model = ref<string>('<p>Hello Quilly!</p>')
// Quill instance
let quill: Quill | null = null
onMounted(() => {
quill = editor.value?.initialize(Quill)!
})
<QuillyEditor
ref="editor"
v-model="model"
:options="options"
@text-change="({ delta, oldContent, source }) => console.log('text-change', delta, oldContent, source)"
@selection-change="({ range, oldRange, source }) => console.log('selection-change', range, oldRange, source)"
@editor-change="(eventName) => console.log('editor-change', `eventName: ${eventName}`)"
@focus="(quill) => console.log('focus', quill)"
@blur="(quill) => console.log('blur', quill)"
@ready="(quill) => console.log('ready', quill)"
/>
After this you can add you own styles right inside your Vue component:
<style>
.ql-toolbar.ql-snow {
border: 1px solid blue;
padding: 20px;
}
<style>
https://github.com/alekswebnet/vue-quilly
In this video (https://www.youtube.com/watch?v=VRKSA4ijo8U), I talk about our journey of choosing a JS library for our app.
The implementation was for Superthread which is an all-in-one project management software and wiki for small teams.
Since the editor is used throughout the app: e.g. pages, cards, comments etc.
it was very important for it to be crafted immaculately.
It was a choice between Quill, TipTap or Lexical.
I hope some of you find it useful.