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

Question

我已经成功地在 angular 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 });

然后我陷入了如何从这一点开始的困境。

所以:

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

感谢您的帮助! :)

Answer 1

虽然可能不是您正在寻找的答案，但我可能会为您提供一些见解。

顺便说一下，我目前正在为同样的问题而苦苦挣扎，所以我来这里是为了寻求有关最佳实践的指导。

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

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