ngx-quill / quill.js自定义印迹操作

Question

我已经成功地在角7中设置了ngx-quill，我需要创建一个定制的文本印迹，它看起来如下(简化)：

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

我必须能够做到以下几点：

• 在任何时候将其可编辑内容设置为“创建”和“其后”。
• 在按enter (只为了在可编辑区域中插入行中断)时，我不希望它分裂污点或执行任何复杂的魔术，我只想看到区域中的行中断。

到目前为止，我的习惯是：

/**
 * 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 });

然后我陷入了如何从这一点出发的问题。

所以：

• 创建后如何更新自定义印迹的内容？
• 如何从定制的blot类访问代码的任何部分(Quill实例等等)？
• 如何将Enter键的行为从退出可编辑区域更改为只插入中断行并让用户继续键入？

每一个帮助都很感激！:)

Answer 1

虽然很可能不是你想要的答案，但我可能对你有一些见解。

顺便说一句，我目前正努力解决同样的问题，我来这里是为了寻求最佳实践的指导。

然而，对您来说，一个潜在的解决方案是在Blot上添加和公开您自己的函数。从它们中，您可以在返回节点之前将构造函数中的任何内容附加到节点本身。

然后，当您对quill外部的数据进行修改时，您可以使用quill查询所有类型的印迹，然后调用这些外部函数。