vue-quill-editor自定义功能【一、原有功能定制化重写】_javascript_weixin

demo地址

前言

近期在使用，vue-quill-editor做富文本的时候，产品提出了一些定制化的需求，例如：

对原有功能进行定制化重写（在添加link的时候先校验当前文本是否有协议前缀（例如http://、https://）如果未发现则加上协议前缀）
添加新功能（对文本添加行高line-height设置）
添加复杂的交互操作（对编辑器内的图片进行裁剪、重新上传、删除、引用等集成操作）

但vue-quill-editor富文本工具原有的配置能力无法支持这些功能，say‘no’之后，发现产品脸色微微有些变化

为避免被产品支配对的恐惧，本汪只好调研一番，翻阅了quill的文档找到了相应的解决方案后方才成功稳定了产品的情绪

话不多说，本文将分三步先分享一下基于vue-quill-editor如何对原有功能定制化重写

第一步：看文档

首先去quill官网看看是否有解决方案或者提供合适的思路，很快我凭借着深厚的英语水平和chorme的划词翻译插件看到了How to Customize Quill这个标题。

没想到幸福来得这么突然（好嗨哟），官方文档的指引已经给出了自定义富文本的方案。本汪顺着文档撸下去才发现高兴的太早了，该文档仅仅给出了几个定制原有功能的小例子，例如在bold功能使用b标签代替strong

var Bold = Quill.import('formats/bold');  //导出bold模块的formats方法
Bold.tagName = 'B';   // 使用b标签代替strong
Quill.register(Bold, true); // 重注bold模块的formats方法使其生效

// 正常配置
var quill = new Quill('#editor', {
  modules: {
    toolbar: true
  },
  theme: 'snow'
});
复制代码

如果自己构建环境不方便，可在quill提供的playground上面运行一下这段代码，会发现使用加粗（Bold）功能的后的文本变成了<b></b>包裹

在本汪看完官方给的demo并且未找到可以直接copy的代码后，只能自己开始思考产品的需求：在添加link的时候先校验当前文本是否有协议前缀（例如http://、https://）如果未发现则加上协议前缀

借鉴一下使用b标签代替strong的思路，我们可以同样是需要在使用link生成链接时添加一段规则校验当前文本是否有协议前缀（例如http://、https://）如果未发现则加上协议前缀

那么问题来了，我们如何找到link生成链接的方法呢，那就读一读link formats方法的源码吧

第二步：读源码

单独读某个功能源码的话就非常简单粗暴了，只要打开相应目录，我们要重写的是link功能，找到文件"quill/formats/link.js",双击打开一窥究竟

我们从代码中不难看出 create中我们可以去设置生成的value，接下来万事俱备，只歉代码了。

第三步：撸代码

const Link = Quill.import("formats/link"); // 导出link模块的formats方法
class MyLink extends Link {  // 继承父类
  static create(value) {
    let node = super.create(value); //调用父类的方法生成node节点
    value = this.sanitize(value); // 使用sanitize取出value
    //判断是否拥有协议前缀 无则添加默认前缀
    if (!(value.indexOf("http://") === 0 || value.indexOf("https://") === 0)) { 
      value = "http://" + value;
    }
    // 设置href属性
    node.setAttribute("href", value);
    return node;
  }
}
Quill.register(MyLink, true);
复制代码

到这里我们可以发现无论是对那个原有功能的重写按照这个思路都能完成更机智的小伙伴会发现其实在vue-quill-editor的issue里面本汪就已经解决过这个问题，只是近日又搞起了富文本，所以想起来写了本博客，后续还会更新一下两个内容