npm quill:编辑链接时更新目的属性

s3fp2yjn  于 2022-11-14  发布在  其他
关注(0)|答案(1)|浏览(168)

我是一个日本的网站开发初学者。我不擅长英语,对不起。
我自定义了quill以在插入链接时选择目标属性。
--snow.js--

SnowTooltip.TEMPLATE = [
  '<a class="ql-preview" rel="noopener noreferrer" href="about:blank" target="_blank"></a>',
  '<input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">',
  '<a class="ql-action" id="link-self"></a>',
  '<a class="ql-action" id="link-blank"></a>',
  '<a class="ql-remove"></a>',
].join('');

我编辑了工具提示的html。
我做了这两个按钮:

'<a class="ql-action" id="link-self"></a>',
'<a class="ql-action" id="link-blank"></a>',

然后,

this.root.querySelector('a#link-self').addEventListener('click', event => {
      process.env.NODE_LINK_TARGET = '_self';
      if (this.root.classList.contains('ql-editing')) {
        this.save();
      } else {
        this.edit('link', this.preview.textContent);
      }
      event.preventDefault();
    });
    this.root.querySelector('a#link-blank').addEventListener('click', event => {
      process.env.NODE_LINK_TARGET = '_blank';
      if (this.root.classList.contains('ql-editing')) {
        this.save();
      } else {
        this.edit('link', this.preview.textContent);
      }
      event.preventDefault();
    });

我编辑了监听功能。
如果您有任何问题,请与我们联系。
我在process.env上添加了目标属性字符串。
--link.js--

static create(value) {
    const node = super.create(value);
    node.setAttribute('href', this.sanitize(value));
    node.setAttribute('target', process.env.NODE_LINK_TARGET);
    return node;
  }

我编辑了link.js文件中的create函数来设置target属性。
创建新链接时,可以从两个按钮中选择目标属性。

'<a class="ql-action" id="link-self"></a>'
'<a class="ql-action" id="link-blank"></a>'

但是,当您编辑链接并通过按下这些按钮进行保存时,目标属性不会更改。
我不仅要更新链接的href属性,还要更新target属性。
有没有解决的办法?
求你救救我
(T___T)

dsekswqp

dsekswqp1#

我发现这是可行的:

// BEGIN add target="_blank" to images
    const BaseLink = Quill.import("formats/link");
    class Link extends BaseLink {
      format(name, value) {
        if (["href", "target"].indexOf(name) > -1) {
          if (value) {
            this.domNode.setAttribute(name, value);
          } else {
            this.domNode.removeAttribute(name);
          }
        } else {
          super.format(name, value);
        }
      }
      static create(value) {
        const node = super.create(value);
        node.setAttribute("href", this.sanitize(value));
        node.setAttribute("target", "_blank");
        return node;
      }
    }
    Quill.register(Link, true);
    // END add target="_blank" to images
    enter code here

相关问题