Question

我设法在Angular 7中设置了ngx-quill，我将需要创建一个自定义文本印迹，其外观如下（简化）：

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

我必须能够执行以下操作：

随后随时在创建AND上设置其可编辑内容
按下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上添加并公开您自己的功能。通过它们，您可以在返回节点之前将构造函数的任何内容附加到节点本身。

然后，在对笔刷外部进行数据修改时，可以使用笔刷查询所有类型的污点，然后调用这些外部函数。

ngx-quill / quill.js自定义污点处理

1 个答案: