vue中使用vue-quill-editor富文本编辑器

1.安装Vue-Quill-Editor

npm install vue-quill-editor --save

2.在需要使用富文本编辑器的页面js中import

import 'quill/dist/quill.core.css';

import 'quill/dist/quill.snow.css';

import 'quill/dist/quill.bubble.css';

import { quillEditor } from 'vue-quill-editor';

 

html:

 <quill-editor 
      v-model="content" 
      ref="myQuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
 </quill-editor>

js:

data(){
    return {
        content:null,
        editorOption:{
            placeholder: '请输入...'
        }
    }
},
methods:{
    onEditorBlur(){//失去焦点事件
    },
    onEditorFocus(){//获得焦点事件
    },
    onEditorChange(){//内容改变事件
    }
}

 

删除一些不需要的导航功能：

找到node_modules/vue-quill-editor/src/editor.vue文件，打开这个文件我们会看到一个toolbar属性，大致是这样的：

他们对应的功能的分别是这样的

背景颜色 - background 加粗- bold 颜色 - color 字体 - font 内联代码 - code 斜体 - italic 链接 - link 大小 - size 删除线 - strike 上标/下标 - script 下划线 - underline 引用- blockquote 标题 - header 缩进 - indent 列表 - list 文本对齐 - align 文本方向 - direction 代码块 - code-block 公式 - formula 图片 - image 视频 - video 清除字体样式- clean

可以根据自己的需要删除不必要的toolbar。

 

或者

editorOption:{
    modules:{
       toolbar:[
          ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
          ['blockquote', 'code-block']
       ]
    }
}

自定义需要的工具栏。