A vue component wrapping the quill editor
npm install --save vue-quill
You will also need to include the following css file in your project
<link href="http://cdn.quilljs.com/latest/quill.snow.css" rel="stylesheet">
Install the vue plugin
Vue.use(require('vue-quill'))
<quill :content.sync="content"></quill>
You may want to initialize the synced variable as a valid delta object too
data() {
return {
content: {
ops: [],
},
}
}
<quill :content.sync="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...',
},
}
}
The plugin also installs a custom filter for converting a delta object to raw html
{{{ content | quill }}}
By default, the component outputs the content as a delta object, you can pass in a prop to return raw html
<quill :content.sync="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 dispatches events when the text or selection changes on the quill editor, you can listen for these on the parent component by declaring an event similar to this
events: {
'selection-change'(editor, range) {
if (range) {
if (range.start !== range.end) {
this.selectedText = editor.getText(range.start, range.end)
editor.formatText(range, 'custom', 'hello world')
}
}
}
},