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

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里面本汪就已经解决过这个问题，只是近日又搞起了富文本，因此想起来写了本博客，后续还会更新一下两个内容

• 添加新功能（对文本添加行高line-height设置）
• 添加复杂的交互操做（对编辑器内的图片进行裁剪、从新上传、删除、引用等集成操做）

感谢观看，若是对你有用，不妨点个赞再走吧
文本代码连接:https://github.com/jamesxieliang11/vue-quill