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

效果图如下:

一:安装

npm install vue-quill-editor -S

二:引入到项目中{

两种挂载方式:全局挂载和组件中挂载

}

2.1:全局挂载
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // 引入样式
import 'quill/dist/quill.snow.css' // snow theme
import 'quill/dist/quill.bubble.css' // bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

2.2组件内部挂载

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

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

export default {
  components: {
    quillEditor
  }
三:页面上写组件

<quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
    @ready="onEditorReady($event)">
</quill-editor>
3.1:methods中写方法

// 失去焦点事件
  onEditorBlur(quill) {
    console.log('editor blur!', quill)
  },
// 获得焦点事件
  onEditorFocus(quill) {
    console.log('editor focus!', quill)
  },
// 准备富文本编辑器
  onEditorReady(quill) {
    console.log('editor ready!', quill)
  },
// 内容改变事件
  onEditorChange({ quill, html, text }) {
    console.log('editor change!', quill, html, text)
    this.content = html
  }
3.2 data中进行配置option

// 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      }
此时一个简单的富文本编辑器就完成了!

需要注意的是,在当前使用的组件内设置quill的高度无效,如果在APP.vue里面进行配置即有效

.ql-editor {

  min-height: 300px;

}