NoneNgx -quill / quill.js манипуляция с пользовательским блотом

Question

Мне удалось настроить ngx-quill в angular 7, и мне нужно было бы создать пользовательский текстовый блот, который бы выглядел следующим образом (упрощенно):

... /*** Custom blot: [its editable text content] ***/ ...

Я должен быть в состоянии сделать следующее:

• установить его редактируемый контент на создание И потом в любое время
• при нажатии клавиши ввода (просто чтобы вставить разрыв строки в редактируемой области), я не хочу, чтобы он разбивал пятно или занимался какой-либо сложной магией, я просто хочу увидеть разрыв строки в области

Мой пользовательский блот до сих пор:

/**
 * REGISTER BLOT: CUSTOM
 */
var Embed = Quill.import('blots/embed');
class QuillBlotCustom extends Embed {
  static blotName: string = 'cmd-custom';
  static className: string = 'quill-cmd-custom';
  static tagName: string = 'span';

  static create(value: { cmd: any, ... }) {
    let node = super.create(value);
    const content = value.cmd.content ? value.cmd.content : '';
    node.innerHTML = `<span>${value.cmd.prefix}${value.cmd.title}: <span contenteditable=true>${content}</span>${value.cmd.postfix}</span>`;
    node.style.color = value.cmd.color;
    node.style.backgroundColor = value.cmd.bgColor;
    node.setAttribute('valueCmd', JSON.stringify(value.cmd));
    node.addEventListener('keydown', function(e) {
      // handling Enter key
      if (e.keyCode === 13) {
        e.preventDefault();
        // HOW TO ACCESS QUILL INSTANCE FROM HERE?

      }
    }); 
    setTimeout(() => {

    return node;
  }

  static value(node) {
    const val = {
      cmd: JSON.parse(node.getAttribute('valueCmd')),
      //text: node.firstElementChild.firstElementChild.firstElementChild.innerText,
      node: node
    };
    val.cmd.content = node.firstElementChild.firstElementChild.firstElementChild.innerText

    return val;
  }

  update(mutations: MutationRecord[], context: {[key: string]: any}) {
    console.log('update');
  }
}

Quill.register({
  'formats/cmd-custom': QuillBlotCustom
});

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

const cmd = ...;
this.quill.insertEmbed(range.index, 'cmd-custom', { cmd: cmd });

И тогда я застрял в том, как исходить из этого момента.

Так:

• Как я могу обновить содержимое пользовательского блота после его создания?
• Как я могу получить доступ к любой части моего кода (экземпляр Quill и т. Д.) Из класса пользовательского блота?
• Как я могу изменить поведение клавиши Enter, не выходя из редактируемой области, просто вставить разрыв строки и позволить пользователю продолжить ввод?

Любая помощь приветствуется!:)

Answer 1

Хотя, скорее всего, это не тот ответ, который вы ищете, я могу кое-что для вас понять.

Между прочим, я в настоящее время борюсь с этой же проблемой и собираюсь найти руководство по наилучшей практике.

Однако потенциальное решение для вас заключается в добавлении и представлении ваших собственных функций в Blot. Из них вы можете прикрепить все, что хотите от вашего конструктора, к самому узлу, прежде чем возвращать его.

Затем, когда у вас есть модификация данных, внешних по отношению к quill, вы можете использовать quill для запроса всех ваших блотов типа, чтобы затем вызывать эти внешние функции.