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

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

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

回答:

下面展示了在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")
    }
}
  • 示例结果

图片描述

回答:

大佬 我用的VUE 。插入了一个图片。能给图片绑定一个点击事件吗?我想通过绑定点击事件来给图片设置宽高。
我插入的图片是用

let quill = this.$refs.myQuillEditor.quill;

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

回答:

经过本人实验,用推荐答案里的方法确实能生成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')        //文档链接,在本页跳转,不打开新的窗口
            } 
        })

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注