3

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

... /*** 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 键的行为从退出可编辑区域更改为仅插入换行符并让用户继续输入？

每一个帮助表示赞赏！:)

4

1 回答 1

1

虽然可能不是您正在寻找的答案，但我可能会对您有所了解。

顺便说一句，我目前正在努力解决同样的问题，并来到这里寻找最佳实践的指导。

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

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

于 2019-07-28T00:40:10.107 回答