vue-quill-editor 插件基本使用简介

效果图

下载

npm install vue-quill-editor -S

引入到项目

import { quillEditor } from 'vue-quill-editor'
 
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
export default {
  components: {
    quillEditor
  }
}

页面Demo

<quillEditor
	v-model="form.record"
	ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
    @ready="onEditorReady($event)">
/>

// 对应的几个事件
// 失去焦点事件
  onEditorBlur(e) {
    console.log('editor blur!', e)
  },
// 获得焦点事件
  onEditorFocus(e) {
    console.log('editor focus!', e)
  },
// 准备富文本编辑器
  onEditorReady(e) {
    console.log('editor ready!', e)
  },
// 内容改变事件
  onEditorChange({ e, html, text }) {
    console.log('editor change!', e, html, text)
    this.content = html
  },

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: '请输入正文'
      },

基本问题解决

设置编辑器高度

/deep/ .ql-container {
    height: 400px;
  }

备注

以上功能已经满足基本的文字展示和回显，图片上传暂时没有处理，后续再补上。。。
可拓展功能还有很多，有兴趣的小伙伴可以交流下。

参照

且听风吟：vue-quill-editor 设置编辑器高度
小菜鸟的前端日记：vue-quill-editor富文本编辑器使用步骤