|
备注：我这里采用的是npm的安装模式配合vue-cli
1.安装：cnpm install vue-quill-editor --save
2.安装quill依赖：cnpm install quill --save
3.如何很多页面都需要用到，可以选择在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)
4.在项目中使用：
首先import: import { quillEditor } from 'vue-quill-editor'
注册：components: {
quillEditor
},
html中使用：
<el-form-item label="题目描述" label-width="100px">
<quill-editor
v-model="taskInfo.desc" //绑定的model，注意此时是html而非文本，引用时要用v-html
ref="myQuillEditor"
:options="editorOption" //这里配置参数的，比如topbar
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)" //这三个是相应的获得/失去/改变的事件
>
</quill-editor>
</el-form-item>
script中配置：
data(){
return{
editorOption:{
modules:{
toolbar:[
['bold','italic','clean']
]
}
},
}
填坑：在进行editorOption配置的时候，有的是需要有默认值的，如果不设置默认值，不会起作用，下面总结一下
不需要默认值的：
加粗 - bold；
斜体 - italic
下划线 - underline
删除线 - strike
引用- blockquote
代码块 - code-block
公式 - formula
图片 - image
视频 - video
清除字体样式- clean
需要有默认值的 ：
标题 - header
列表 - list
上标/下标 - script
缩进 - indent
文本方向 - direction
大小 - size
颜色 - color
背景颜色 - background
字体 - font
文本对齐 - align
需要默认值的给个空值就ok不需要自己在去配置，格式如下
['bold','italic',{ 'color': [] },'clean']
备注：如果是用vue的话这个插件还是很不错的，但是文档不咋地好，如果是mvc的开发模式或者用vue多页面的话，可以尝试使用wangeditor这个富文本，很轻量 | 
转播
