Vue注意事项之|如何使用和配置vue-quill-editor
最近开始过渡vuecli3,感觉cli3确实比cli2简化了许多配置,取消了webpack.config.js的配置,改为自定义的vue.config.js,几乎可以0配置就可以开始工作,具体关于cli3的配置可见官网这里。
正好有个vue的项目需要做,需要用富文本编辑器,看到有vue组件做的编辑器 vue-quill-editor ,挺简洁的样子,开撸。
首先要安装,npm install vue-quill-editor --save
然后可以直接将下面代码复制进组件中,再在其他组件里引入该组件直接使用
<template>
<!-- bidirectional data binding(双向数据绑定) -->
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
</template>
<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// you can also register quill modules in the component
//import Quill from 'quill'
// import { someModule } from '../yourModulePath/someQuillModule.js'
// Quill.register('modules/someModule', someModule)
import { quillEditor } from 'vue-quill-editor'
// 工具栏配置
const toolbarOptions = [
['bold'],
['image']
]
export default {
components:{
quillEditor
},
data () {
return {
content: '<h2>I am Example</h2>',
editorOption: {
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
}
}
}
}
},
// manually control the data synchronization
// 如果需要手动控制数据同步,父组件需要显式地处理changed事件
methods: {
onEditorBlur(quill) {
console.log('editor blur!', quill)
console.log(quill.container.firstChild.innerHTML)//获得html格式文本,岂不美哉
},
onEditorFocus(quill) {
console.log('editor focus!', quill)
},
onEditorReady(quill) {
console.log('editor ready!', quill)
},
onEditorChange({ quill, html, text }) {
console.log('editor change!', quill, html, text)
this.content = html
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
mounted() {
console.log('this is current quill instance object', this.editor)
}
}
</script>
我们可以从上面代码里看到下面这部分,这是配置工具栏,根据自己需要自行删减
// 工具栏配置
const toolbarOptions = [
['bold'],
['image']
]
然后我们可以看到另一部分,事件方法名不重要,重要的是:quill.container.firstChild.innerHTML
获得html代码格式的文本
onEditorBlur(quill) {
console.log('editor blur!', quill)
console.log(quill.container.firstChild.innerHTML)//获得html格式文本,岂不美哉
}
图片是base64格式的,总体是很轻便
最后附上效果图