vue+element使用vue-quill-editor的富文本编辑器

以你之姓@ 2022-04-15 03:45 385阅读 0赞

备注：我这里采用的是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'

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这个富文本，很轻量