Как реализовать элемент стиля тега для текстового редактора quill, который можно удалить, нажав "x"

Поэтому я пытаюсь реализовать что-то вроде тега в редакторе форматированного текста (ngx-quill), который должен иметь знак "x", чтобы можно было его удалить.

Я пытался использовать пергамент, удаляя из родительского узла, используя удаление на прототипе (но нет поддержки родительского узла).

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;
    }
}

0 ответов

Другие вопросы по тегам