备注:我这里采用的是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这个富文本,很轻量