vue-quill-editor

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,install }

使用

<quill-editor

v-model="editorhtml"

ref="myquillEditor"

:options="editorOption">

</quill-editor>

data(){

return{

editorhtml:'',

editorOption:{}

}

}

edithtml是富文本的内容

editorOption是关于插件的配置，具体请查看文档

GitHub:https://github.com/surmon-china/vue-quill-editor

网站描述:基于Vue的移动端富文本插件

vue-quill-editor

官方网站：