vue-quill-editor 如何用insertEmbed插入一個(gè)a標(biāo)簽?zāi)?/h1>

vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, 'image', value, Quill.sources.USER)

我在用這個(gè)編輯器自定義toolbar按鈕操作時(shí)用到上傳功能，最后得到一個(gè)url值，我需要在編輯器里顯示出來，如果是圖片我給第二個(gè)參數(shù)'image'就可以了，那如果我想顯示一個(gè)a標(biāo)簽?zāi)?，查了文檔也沒找到方法，求告知

下面展示了在Quill中如何自定義FileBlot以完成文件上傳與回顯功能

• 自定義FileBlot

可參考例子：https://quilljs.com/guides/cl...

  var Quill = require('quill/dist/quill.js')
  var Link = Quill.import('formats/link');
  class FileBlot extends Link {  // 繼承Link Blot
    static create(value) {
      let node = undefined
      if (value&&!value.href){  // 適應(yīng)原本的Link Blot
        node = super.create(value);  
      }
      else{  // 自定義Link Blot
        node = super.create(value.href);  
        node.setAttribute('download', true);  // 左鍵點(diǎn)擊即下載
        node.innerText = value.innerText;
      }
      return node;
    }
  }
  FileBlot.blotName = 'link';
  FileBlot.tagName = 'A';
  Quill.register(FileBlot);

• 調(diào)用自定義Blot

// 當(dāng)點(diǎn)擊quill中上傳文件的button后調(diào)用
// 這里url是先上傳文件后從服務(wù)器返回的文件資源地址
insertToEditor(url, file, editor) {
    const range = editor.getSelection();
    if(/^image/.test(file.type)){  // image直接插入image標(biāo)簽顯示
      editor.insertEmbed(range.index, "image", url);
    }
    else{  // file則顯示名為filename的A標(biāo)簽
      editor.insertEmbed(range.index, 'link', {href:url, innerText:file.name}, "api")
    }
}

• 示例結(jié)果

經(jīng)過本人實(shí)驗(yàn)，用推薦答案里的方法確實(shí)能生成a標(biāo)簽鏈接，當(dāng)你點(diǎn)擊時(shí)，quill編輯器會默認(rèn)為所有a標(biāo)簽彈出一個(gè)tooltip框。
這意味著，即使你在擴(kuò)展Link Blot增加一些屬性，例如target，download等等，實(shí)際上時(shí)無法生效的。
目前比較簡單但是不太優(yōu)雅的方法是：為a標(biāo)簽彈出框$('.ql-preview')注冊一個(gè)點(diǎn)擊事件，根據(jù)自己的需求覆蓋掉

比如說不希望鏈接在新窗口打開

        $('.ql-preview').one('click',function() {
            if ($(this).attr('href').startsWith('#/home')) {
                $(this).removeAttr('target')        //文檔鏈接，在本頁跳轉(zhuǎn)，不打開新的窗口
            } 
        })

這個(gè)問題的解決方案我也找了好久好久，insertEmbed和insertText都不能實(shí)現(xiàn)這個(gè)功能，可能唯一的辦法是通過dangerouslyPasteHTML勉強(qiáng)可以實(shí)現(xiàn)，勉強(qiáng)的意思是，瀏覽器會屏蔽一些代碼，可能會使粘貼的代碼不完整，這可能就是dangerously的意思吧。當(dāng)然可以直接操作DOM，但想插入光標(biāo)位置（getSelection）卻很難實(shí)現(xiàn)，網(wǎng)上找了好久也沒找到方法，quill大家都說好，可這簡單的需求都沒辦法解決，我想quill言過其實(shí)了吧。
樓主找到方案麻煩跟我說一聲