Вставьте пользовательский HTML в редактор Quill - PullRequest
Новая
       56

Вставьте пользовательский HTML в редактор Quill

1 голос
/ 14 марта 2019

Я использую Quill для формы отправки почты, и на панели инструментов у меня выпадающий список с подписями.Когда я выбираю подпись, я должен вставить собственный и сложный HTML-код (отформатированный и с img) в редакторе, когда я изменяю подпись, я должен заменить вставленный HTML-код.

Я вставил код в тег ap, указавидентификатор, но Quill очищает код, также удаляя идентификатор, поэтому я не могу найти тег p.

Мне нужно сохранить HTML-код и идентификатор.

Кто-то может мне помочь?Пожалуйста.

1 Ответ

1 голос
/ 12 апреля 2019

Вам нужно написать пользовательский Blot , например: 

class Signature extends BlockEmbed {
  static create(value) {
    const node = super.create(value);
    node.contentEditable = 'false';
    this._addSignature(node, value);
    return node;
  }

  static value(node) {
    return node.getAttribute(Signature.blotName)
  }

  static _addSignature(node, value) {
    node.setAttribute(Signature.blotName, value);

    // This is a simple switch, but you can use
    // whatever method of building HTML you need.
    // Could even be async.
    switch (value) {
      case 1:
        return this._addSignature1(node);
      default:
        throw new Error(`Unknown signature type ${ value }`);
    }
  }

  static _addSignature1(node) {
    const div = document.createElement('DIV');
    div.textContent = 'Signature with image';
    const img = document.createElement('IMG');
    img.src = 'https://example.com/image.jpg';

    node.appendChild(div);
    node.appendChild(img);
  }
}
Signature.blotName = 'signature';
Signature.tagName = 'DIV';
Signature.className = 'ql-signature';

Убедитесь, что вы зарегистрировались it: 

Quill.register(Signature);

Тогда вы можете использовать его так: 

quill.updateContents([
  { insert: { signature: 1 } },
]);
...