A vue component wrapping the quill editor
You can view a basic demo of this component in this CodeSandbox
npm install --save vue-quill
-or-
yarn add vue-quill
You will also need to include the following css file in your project
<link href="https://cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet">
For Vue 1 components use v0.1.5 or earlier
Install the vue plugin
import Vue from 'vue'
import VueQuill from 'vue-quill'
Vue.use(VueQuill)
<quill v-model="content"></quill>
You may want to initialize the synced variable as a valid delta object too
data() {
return {
content: {
ops: [],
},
}
}
<quill v-model="content" :config="config"></quill>
You can also provide a config object as described in http://quilljs.com/docs/configuration/
data() {
return {
content: {
ops: [],
},
config: {
readOnly: true,
placeholder: 'Compose an epic...',
},
}
}
By default, the component outputs the content as a delta object, you can pass in a prop to return raw html
<quill v-model="content" output="html"></quill>
To add custom formats to the editor, you can pass an array of formats as a prop. The array should be in the following format
formats: [
{
name: 'custom',
options: {
attribute: 'custom',
},
},
],
You can add custom keybindings by passing through an array in the props, the array should be in the following format
keyBindings: [
{
key: 's',
method: function(range) {
this.$dispatch('save', this.editor, range)
return false
},
},
]
This quill component emits events when the text or selection changes on the quill editor
<quill v-model="content" @selection-change="selectionChange"></quill>
<script>
methods: {
selectionChange(editor, range) {
if (range) {
if (range.start !== range.end) {
this.selectedText = editor.getText(range.start, range.end)
editor.formatText(range, 'custom', 'hello world')
}
}
},
},