ngx-quill / quill.js удаляет пользовательские помарки из innerHTML - PullRequest
Новая
       45

ngx-quill / quill.js удаляет пользовательские помарки из innerHTML

0 голосов
/ 10 июня 2019

Название может вводить в заблуждение, однако я не знаю, как его лучше назвать.То, чего я хочу достичь, это твиттер-виджет, как встраивание для моих пользовательских блотов.Для этого я создал свой примерный класс «рендерера»: 

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

И обычный класс бланков Quill, расширяющий BlockEmbed 

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

Я думал, что использовал аналогичный подход в твиттере твиттер-виджетов-включен, что я получил из официального урока пергамента перо, но вывод 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.

1 Ответ

1 голос
/ 10 июня 2019

Хорошо, похоже на странное поведение игл. Это просто способ обработки асинхронных запросов Quill, так что просто переход на класс «рендерера» решил мою проблему: 

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>

Закрыто.

...