🍡Quill editor component for Vue, support SPA and SSR.
基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。
This component is a simple and lightweight editor. It doesn't depend on any other resources except quill core and css. Quill is an open source prototypical editor which has a powerful extension API and module registration function. If you need any other attached functions, please program on your own or use other extention modules. Finally, please don't ask the questions like whether i can realize some function in the editor or why not. Thanks.
npm install vue-quill-editor --save// import
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// or require
var Vue = require('vue')
var VueQuillEditor = require('vue-quill-editor')
// mount with global
Vue.use(VueQuillEditor)
// If used in Nuxt.js/SSR, you should keep it only in browser build environment
if (process.browser) {
const VueQuillEditor = require('vue-quill-editor/ssr')
Vue.use(VueQuillEditor)
}
// if you need 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)
// mount with component(can't work in Nuxt.js/SSR)
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}SSR and the only difference in the use of the SPA:
- SPA worked by the
component, find quill instance byref attribute. - SSR worked by the
directive, find quill instance bydirective arg. - Other configurations, events are the same.
<!-- You can custom the "myQuillEditor" name used to find the quill instance in current component -->
<template>
<!-- bidirectional data binding（双向数据绑定） -->
<div class="quill-editor"
v-model="content"
v-quill:myQuillEditor="editorOption">
</div>
<!-- Or manually control the data synchronization（手动控制数据流） -->
<div class="quill-editor"
:content="content"
@change="onEditorChange($event)"
v-quill:myQuillEditor="editorOption">
</div>
</template>
<script>
export default {
mounted() {
console.log('this is current quill instance object', this.myQuillEditor)
}
// Omit the same parts as in the following component sample code
// ...
}
</script><template>
<!-- bidirectional data binding（双向数据绑定） -->
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- Or manually control the data synchronization（或手动控制数据流） -->
<quill-editor :content="content"
:options="editorOption"
@change="onEditorChange($event)">
</quill-editor>
</template>
<script>
// You can also register quill modules in the component
import Quill from 'quill'
import { someModule } from '../yourModulePath/someQuillModule.js'
Quill.register('modules/someModule', someModule)
export default {
data () {
return {
content: '<h2>I am Example</h2>',
editorOption: {
// some quill options
}
}
},
// if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
// 如果需要手动控制数据同步，父组件需要显式地处理changed事件
methods: {
onEditorBlur(editor) {
console.log('editor blur!', editor)
},
onEditorFocus(editor) {
console.log('editor focus!', editor)
},
onEditorReady(editor) {
console.log('editor ready!', editor)
},
onEditorChange({ editor, html, text }) {
console.log('editor change!', editor, html, text)
this.content = html
}
},
// get the current quill instace object.
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
mounted() {
// you can use current editor object to do something(quill methods)
console.log('this is current quill instance object', this.editor)
}
}
</script>