羽毛笔:编辑链接时更新目标属性

时间:2019-02-20 08:01:17

标签: javascript npm quill

我是日本的Web开发人员初学者。 对不起,我的英语不好。

我定制了羽毛笔,以在插入链接时选择目标属性。

-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.NODE_LINK_TARGET ='_self';

我在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函数以设置目标属性。

创建新链接时,可以从两个按钮中选择目标属性。

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

但是,当您编辑链接并按下这些按钮进行保存时,目标属性不会改变。

我不仅要更新链接的href属性,还要更新目标属性。

有什么解决办法吗?

请帮助我。

(T ___ T)

0 个答案:

没有答案