ngx-quill/quill.js 从 innerHTML 中去除自定义印迹

Question

标题可能有误导性，但我不知道如何更好地命名。我想要实现的是 twitter-widget 就像嵌入我的自定义印迹一样。为此，我创建了示例 "renderer" class:

class TestRenderer {
    render(id: number, node: HTMLElement) {
        node.innerHTML = `<h1>ELEMENT ${id}</h1>`;
    }
}

和扩展 BlockEmbed

的普通 Quill 印迹 class

export class TestBlot extends BlockEmbed {
  static blotName = 'test';
  static tagName = 'test-embeded';
  static className = 'test-embeded';

  static create(id: any) {
    const node = super.create();
    node.dataset.id = id;
    RENDERER.render(id, node);


    node.addEventListener('click', (e) => {
      e.preventDefault();
      RENDERER.render(666, node);
    });

    return node;
  }

  static value(domNode: HTMLElement) {
    return domNode.dataset.id;
  }
}

我想我使用了与 twitter-widget tweet-embed 类似的方法，这是我从官方的 quill parchment 教程中获得的，但是 HTML 输出不同。推特从所有内部HTML中剥离出来，很简单：

<twitter-embeded class="twitter-embeded" data-id="464454167226904576" contenteditable="false" style="cursor: pointer;"></twitter-embeded>

我的自定义印迹元素如下所示：

<test-embeded class="test-embeded" data-id="742878714"><h1>ELEMENT 742878714</h1></test-embeded>

当我手动删除 <h1>ELEMENT 742878714</h1> 编辑器仍然可以识别其内容并正确显示所有内容。这是非常低效的方式，我想避免检查整个 Quill HTML 内容并从 innerHTML.

中剥离我所有的自定义元素

Answer 1

好的，似乎是奇怪的羽毛笔行为。它只是 Quill 处理异步请求的方式，所以只需更改为 "renderer" class 就解决了我的问题：

export class TestRenderer {
    render(id: number, node: HTMLElement) {
        node.innerHTML = ``;
        setTimeout(() => {
            node.innerHTML = `<h1>ELEMENT ${id}</h1>`;
        }, 1000);
    }
}

此输出符合预期：

<test-embeded class="test-embeded" data-id="108962878"></test-embeded><p><br></p>

关闭。

ngx-quill/quill.js 从 innerHTML 中去除自定义印迹

ngx-quill/quill.js strip custom blots from innerHTML

javascript

angular

typescript

quill

ngx-quill