因為項目需要，需要添加富文本編輯器，特意查詢下，目前網上有很多富文本編輯器，UEditor，vue-quill-editor，wangEditor，vue-html5-editor ，tinymce等，這么多讓人有點不知所措。看大家對vue-quill-editor口碑還可以，就特意試試。
vue-quill-editor相關地址：
https://github.com/surmon-china/vue-quill-editor
https://github.surmon.me/vue-quill-editor/
vue-quill-editor個性化配置參考此文檔
https://quilljs.com/docs/configuration/
- vue-quill-editor安裝
npm install vue-quill-editor --save
- 導入 vue-quill-editor
在main.js中將vue-quill-editor 引入項目
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 } */)
/*default global options 此處是默認的配置，
可以參考此https://quilljs.com/docs/configuration/做個性化配置,
例如換成這個Vue.use(VueQuillEditor, {
theme: 'bubble'
});*/
3.使用 vue-quill-editor
在相關組件中使用
<template>
<div class="shop">shop
<!-- bidirectional data binding（雙向數據綁定） -->
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
</div>
</template>
<script>
import Quill from 'quill'
export default {
name: 'Shop',
data () {
return {
content: '<h2>I am Example</h2>',
editorOption: {
// some quill options
}
}
},
// manually control the data synchronization
// 如果需要手動控制數據同步，父組件需要顯式地處理changed事件
methods: {
onEditorBlur(quill) {
console.log('editor blur!', quill)
},
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>
<style scoped>
</style>
運行后，大致效果是這樣：
image.png
