如何实现标记样式元素以插入文本编辑器，可通过单击“ x”将其删除

Question

因此，我正在尝试对富文本编辑器（ngx-quill）实施类似标签的操作，该标签应带有“ x”符号，以便能够将其删除。

我试图使用羊皮纸，从父节点删除，在原型上使用remove（但是没有父节点道具）。

const Embed = Quill.import('blots/embed');

export class Shortcode extends Embed {

    static create(value: any) {
        const node = super.create();
        node.className = 'shortcode-tag';
        node.innerHTML = value.inner;
        node.appendChild(Shortcode.createClose());
        return Shortcode.setDataValues(node, value.data);
    }

    static createClose() {
        const close = document.createElement('button');
        close.type = 'button';
        close.className = 'delete-shortcode';
        close.setAttribute('aria-label', 'Close');
        close.innerHTML = `<span aria-hidden='true'>&times;</span>`;

        close.addEventListener('click', (event) => {
            // click on close button
        });

        return close;
    }

    static setDataValues(element, data) {
        const domNode = element;
        domNode.dataset.shortcode = data;
        return domNode;
    }

    static value(node) {
        return node.dataset.shortcode;
    }
}