Quill editor component for Vue
npm install vue-quill-editor









html
`
#### NPM
` bash
npm install vue-quill-editor --save
`
$3
#### mount with global
` javascript
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, / { default global options } /)
`
#### mount with component
`javascript
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
`
#### mount with ssr
`javascript
// if used in nuxt.js/ssr, you should keep require it only in browser build environment
if (process.browser) {
const VueQuillEditor = require('vue-quill-editor/dist/ssr')
Vue.use(VueQuillEditor, / { default global options } /)
}
`
#### register quill module
`javascript
// register quill modules, you need to introduce and register before the vue program is instantiated
import Quill from 'quill'
import yourQuillModule from '../yourModulePath/yourQuillModule.js'
Quill.register('modules/yourQuillModule', yourQuillModule)
`
$3
SSR and the only difference in the use of the SPA:
- SPA worked by the component, find quill instance by ref attribute.
- SSR worked by the directive, find quill instance by directive arg.
- Other configurations, events are the same.
$3
` vue
v-model="content"
v-quill:myQuillEditor="editorOption">
$3
` vue
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
:options="editorOption"
@change="onEditorChange($event)">
``