基于Vue的移动端富文本插件---vue-quill-editor

之前在PC端项目中也使用过富文本插件，当时使用的是tinymce,是一款国外的插件，效果还不错，这次的项目需求是在移动端使用富文本插件，百度一番后，找到了一个插件wangEditor,不过感觉在移动端效果不是很好，so,继续寻找，终于找到了一篇文章,讲了本文的主角vue-quill-editor，其实这款插件也是基于国外的一款插件Quill，另外我还找到了vue-quill-editor这个插件的作者的个人网站，很炫酷，里面也有很多文章，我会在文在最后附上地址。

安装

npm install vue-quill-editor --save

该插件是依赖于Quill的，但是无需再下载Quill,因为在安装vue-quill-editor时，已经安装了Quill

引入

• 全局引用

在main.js中引入插件

//引入插件核心文件
import VueQuillEditor from 'vue-quill-editor'
//引入插件样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor);

• 局部引用

在使用该插件的组件中引入

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//注册子组件
export default {
  components: {
    quillEditor
  }
}

刚开始看到全局引用和局部引用方式还不一样，一个是import直接引入，一个是加{}引入，后来又在百度找其他文章，发现也是两种都有用，于是去看了下源码，所以两种方法都可以。

import _Quill from 'quill'
import quillEditor from './editor.vue'

const Quill = window.Quill || _Quill
const install = (Vue, globalOptions) => {
  if (globalOptions) {
    quillEditor.props.globalOptions.default = () => globalOptions
  }
  Vue.component(quillEditor.name, quillEditor)
}

const VueQuillEditor = { Quill, quillEditor, install }

export default VueQuillEditor
export { Quill, quillEditor, install }

使用

<quill-editor 
    v-model="editorHtml" 
    ref="myQuillEditor" 
    :options="editorOption">
</quill-editor>

data(){
    return{
        editorHtml:'',
        editorOption:{}
    }
}

editHtml是富文本的内容
editorOption是关于插件的配置，具体请查看文档

效果

链接

• 参考博文
• vue-quill-editor插件作者网站
• vue-quill-editor插件Github地址
• Quill官网