vue-quill-editor 如何用insertEmbed插入一个a标签呢

Question

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

我在用这个编辑器自定义toolbar按钮操作时用到上传功能，最后得到一个url值，我需要在编辑器里显示出来，如果是图片我给第二个参数'image'就可以了，那如果我想显示一个a标签呢，查了文档也没找到方法，求告知

Answer 1

下面展示了在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){  // 适应原本的Link Blot
        node = super.create(value);  
      }
      else{  // 自定义Link Blot
        node = super.create(value.href);  
        node.setAttribute('download', true);  // 左键点击即下载
        node.innerText = value.innerText;
      }
      return node;
    }
  }
  FileBlot.blotName = 'link';
  FileBlot.tagName = 'A';
  Quill.register(FileBlot);

• 调用自定义Blot

// 当点击quill中上传文件的button后调用
// 这里url是先上传文件后从服务器返回的文件资源地址
insertToEditor(url, file, editor) {
    const range = editor.getSelection();
    if(/^image/.test(file.type)){  // image直接插入image标签显示
      editor.insertEmbed(range.index, "image", url);
    }
    else{  // file则显示名为filename的A标签
      editor.insertEmbed(range.index, 'link', {href:url, innerText:file.name}, "api")
    }
}

• 示例结果

Answer 2

大佬 我用的VUE 。插入了一个图片。能给图片绑定一个点击事件吗？我想通过绑定点击事件来给图片设置宽高。
我插入的图片是用
``
let quill = this.$refs.myQuillEditor.quill;

  
  let length = quill.getSelection().index;
  quill.insertEmbed(length, "image", e.URL);
  quill.setSelection(length + 1);`

Answer 3

经过本人实验，用推荐答案里的方法确实能生成a标签链接，当你点击时，quill编辑器会默认为所有a标签弹出一个tooltip框。
这意味着，即使你在扩展Link Blot增加一些属性，例如target，download等等，实际上时无法生效的。
目前比较简单但是不太优雅的方法是：为a标签弹出框$('.ql-preview')注册一个点击事件，根据自己的需求覆盖掉

比如说不希望链接在新窗口打开

        $('.ql-preview').one('click',function() {
            if ($(this).attr('href').startsWith('#/home')) {
                $(this).removeAttr('target')        //文档链接，在本页跳转，不打开新的窗口
            } 
        })

Answer 4

这个问题的解决方案我也找了好久好久，insertEmbed和insertText都不能实现这个功能，可能唯一的办法是通过dangerouslyPasteHTML勉强可以实现，勉强的意思是，浏览器会屏蔽一些代码，可能会使粘贴的代码不完整，这可能就是dangerously的意思吧。当然可以直接操作DOM，但想插入光标位置（getSelection）却很难实现，网上找了好久也没找到方法，quill大家都说好，可这简单的需求都没办法解决，我想quill言过其实了吧。
楼主找到方案麻烦跟我说一声