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