演示地址Preface最近在用。vue-quill-editor在做富文本的时候，产品提出了一些定制需求，比如：对原有功能的定制重写（添加链接时，先检查当前文本是否有协议前缀（比如http://,https://),如果没有找到,添加协议前缀)添加新功能(在文本中添加行高设置)添加复杂的交互操作(集成裁剪、重新上传、删除和引用图像等操作在编辑器），但是vue-quill-editor富文本工具原有的配置能力无法支持这些功能。说了“不”之后，发现产品的脸色微微一变。为了避免被产品支配的恐惧，王本不得不做一些研究，阅读quill的文档并找到相应的解决方案，才成功稳定了产品。情绪不多说，本文将分三步分享如何基于vue-quill-editor自定义重写原有功能第一步：阅读文档先去quill官网看看有没有解决方案或者提供一个合适的idea，很快就看到了标题《HowtoCustomizeQuillwithhowtoCustomizeQuillwithmyequalEnglishlevelandchorme'swordtranslationplugin》。没想到幸福来的这么突然（哎），官方文档指南已经给出了自定义富文本的解决方案。本王顺着文书看去，发现自己太高兴了。文档只给出了几个自定义原有函数的小例子，比如在粗体函数中使用b标签代替strongvar。Bold=Quill.import('格式/粗体');//导出粗体模块的格式方法Bold.tagName='B';//使用b标签代替strongQuill.register(Bold,true);//重新注入bold模块的formats方法生效//正常配置varquill=newQuill('#editor',{modules:{toolbar:true},theme:'snow'});如果不方便自己搭建环境，可以在quill提供的playground上运行这段代码，你会发现使用粗体（Bold）功能后，文字变成了包裹。看了官方的demo并没有找到可以直接复制的代码，只能开始思考产品的需求：添加链接时，先检查当前文本是否有协议前缀（比如http://,https://).如果没有找到，添加协议前缀。让我们借鉴使用b标签而不是strong的思路。我们还可以需要在使用link生成链接的时候，添加一个规则来检查当前文本是否有协议前缀（比如http://、https://）。如果没有找到，添加协议前缀。那么问题来了，我们如何找到链接生成的方法呢？，然后阅读linkformats方法的源码第二步：阅读源码单独阅读某个功能的源码是非常简单粗暴的。打开对应的目录即可，我们要重写的是链接功能，找到quill/formats/link.js文件，双击打开看看是什么情况。从代码中我们不难看出，我们可以在create中设置生成的值，然后就万事俱备了，所以只对代码表示歉意。第3步：排列代码constLink=Quill.import("formats/link");//导出链接模块的formats方法classMyLinkextendsLink{//继承父类staticcreate(value){letnode=super.create(value);//调用父类的方法生成节点nodevalue=this.sanitize(value);//使用sanitize获取值//判断是否有协议前缀或添加默认前缀if(!(value.indexOf("http://")===0||value.indexOf("https://")===0)){值="http://"+值；}//设置href属性node.setAttribute("href",value);返回节点；}}Q??uill.register(MyLink,true);这里我们可以发现不管是按照这个思路重写原来的功能还是可以完成的，更多机智的朋友会发现其实王本在vue-quill-editor的issue中已经解决了这个问题，只是他开始最近富文本，所以才想起写这篇博客，以后会更新这两个内容来增加新的功能（为文本添加行高（line-heightsetting）添加复杂的交互操作（整合裁剪、重新编辑等操作-编辑器中的上传、删除、引用图片）感谢观看，如果对你有用，不妨点个赞走走正文代码链接：https://github.com/jamesxieliang11/vue-quill
