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

目录

依赖安装

引入相关依赖

挂载注册使用

配置options

注册组件

视图渲染

参数、事件详解

额外插件_表情包

安装依赖        

注册，关联quill-editor

挂载于options配置项当中

额外功能_自定义拓展

---

---

• 依赖安装

cnpm install vue-quill-editor ---save

• 引入相关依赖

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

import "quill-emoji/dist/quill-emoji.css";

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

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

• 挂载注册使用

1. 配置options

   //编辑器配置项生成 [可设置于data(){return{}}中]
   editorOption:{
      theme:'snow',//用于指定富文本主题
      modules:{
         "emoji-toolbar": true,//该项需要结合表情包进行展示配置[如果不需要表情包可直接删除]
         "emoji-shortname": true,//该项需要结合表情包进行展示配置[如果不需要表情包可直接删除]
         toolbar:{
           container:[//该数组中的内容可以根据实际项目情况进行筛选，不需要展示的直接删除配置即可
              ['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: '请输入正文',//默认的编辑器提示文字
   }

2. 注册组件

   //此处的组件quillEditor为上方引入的内容，作用为视图层进行渲染
   components:{quillEditor}

3. 视图渲染

参数、事件详解

// 失去焦点事件
  onEditorBlur(quill) {
  },
// 获得焦点事件
  onEditorFocus(quill) {
  },
// 准备富文本编辑器
  onEditorReady(quill) {
  },
// 内容改变事件
  onEditorChange({ quill, html, text }) {
    this.content = html
  },

---

至此，即可正常展示常规的富文本编辑器视图，如若编辑器工具栏中的部分选项不需要，可将options配置中的内容进行删除，视图即可将该项进行隐藏

额外插件_表情包

1. 安装依赖        

   cnpm install quill-emoji --save

2. 注册，关联quill-editor

   //需要在vue-quill-editor的引入中进行扩展
   import { Quill, quillEditor } from "vue-quill-editor";
   
   //引入表情包资源
   import * as quillEmoji from 'quill-emoji';
   
   //将表情包与编辑器进行关联
   Quill.register("modules/quillEmoji", quillEmoji);
   
   

3. 挂载于options配置项当中

   //需要在上述的options的配置项当中的container中进行补充
   {
       modules:{
           'emoji-toolbar':true,//此两项，增加表情包，必须打开
           'emoji-shotname':true,//此两项，增加表情包，必须打开
           toolbar:[
               ["emoji"],//表情包一般位于工具栏的首位，故而调整至首位
               //...其他的配置项
           ]
       }
   }

   ---

   

    至此，编辑器中的表情包已经可以正常展示，获取

额外功能_自定义拓展

比如现在需要自定义增加一个按钮，按钮对应的功能为聊天记录获取,点击图标弹窗获取更多内容       

//################第一步
//需要在上述的options的配置项当中,进行对应的图标以及事件的补充扩展
{
    modules:{
        toolbar:[
            //...其他的配置项

            //选择合适的位置，增加对应的自定义标识，作为新的拓展,此处以聊天记录为铺垫，故而放最后
            ['moreMessage'],//此处的内容为自定义，只需要后续对应即可
        ],
            
        //该配置为所有的事件进行分流统一入口
        handlers:{
            //此处的内容key为上方自定义的标识
            //value对应的事件为自定义的事件，事件为默认点击该按钮进行触发的逻辑
            'moreMessage':this.moreMessageEvent
        }
    }
}

//################第二步
//初始化按钮图标，或者自定义的文字内容
mounted(){
    //此处引用的为阿里矢量图标库中的内容，可以根据实际项目情况进行自定义处理
    //此处逻辑为将自定义的图标，放置于编辑器的指定位置
    const editorButton = document.querySelector('.ql-moreMessage')
      editorButton.innerHTML = ''
}

//设置自定义图标对应的事件内容
methods:{
    moreMessageEvent(){
        //...  可于此处进行处理自定义按钮对应的一系列逻辑
    }
}