目录
依赖安装
引入相关依赖
挂载注册使用
配置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";
挂载注册使用
配置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: '请输入正文',//默认的编辑器提示文字}
注册组件
//此处的组件quillEditor为上方引入的内容，作用为视图层进行渲染components:{quillEditor}
视图渲染
<quill-editorv-model="content"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@change="onEditorChange($event)"@ready="onEditorReady($event)">
参数、事件详解
// 失去焦点事件onEditorBlur(quill) {},// 获得焦点事件onEditorFocus(quill) {},// 准备富文本编辑器onEditorReady(quill) {},// 内容改变事件onEditorChange({ quill, html, text }) {this.content = html},
至此，即可正常展示常规的富文本编辑器视图，如若编辑器工具栏中的部分选项不需要，可将options配置中的内容进行删除，视图即可将该项进行隐藏
额外插件_表情包
安装依赖
cnpm install quill-emoji --save
注册，关联quill-editor
//需要在vue-quill-editor的引入中进行扩展import { Quill, quillEditor } from "vue-quill-editor";//引入表情包资源import * as quillEmoji from 'quill-emoji';//将表情包与编辑器进行关联Quill.register("modules/quillEmoji", quillEmoji);
挂载于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 = '<i title="更多消息" class="iconfont icon-xiaoxi" style="font-size: 18px;color: black;font-weight:bold;"></i>'}//设置自定义图标对应的事件内容methods:{moreMessageEvent(){//... 可于此处进行处理自定义按钮对应的一系列逻辑}}
