Angular7中ngx-quill自定义Text Blot开发问题求助

针对你在Angular 7中搭建ngx-quill后，自定义Blot遇到的三个问题，我给你整理了可直接落地的解决方案，结合你的现有代码调整即可：

问题1：创建后如何更新自定义Blot的内容？ #

自定义Embed Blot的内容更新，需要同步修改Blot的value并触发Quill的更新机制，或者直接修改DOM后通知Quill感知变化。这里有两种可行方式：

方式1：通过Quill的format方法更新 #

当你需要修改已插入的Blot内容时，可以先定位到目标Blot，修改其cmd.content后调用quill.format()触发更新：

// 假设你要修改当前选中位置的Blot（或者通过索引定位）
const range = this.quill.getSelection();
if (range) {
  // 获取当前位置的格式（包含自定义Blot的信息）
  const blotFormat = this.quill.getFormat(range.index);
  if (blotFormat['cmd-custom']) {
    // 修改可编辑内容
    blotFormat['cmd-custom'].cmd.content = '你的新内容';
    // 触发Quill更新，USER来源表示用户操作
    this.quill.format('cmd-custom', blotFormat['cmd-custom'], Quill.sources.USER);
  }
}

方式2：直接修改DOM后触发Quill更新 #

如果你已经拿到Blot对应的DOM节点，可以直接修改可编辑span的内容，然后手动通知Quill更新：

// 假设你有Blot的DOM节点引用
const editableSpan = blotNode.querySelector('[contenteditable=true]');
editableSpan.innerText = '新的可编辑内容';
// 获取Blot实例并触发Quill更新
const blot = Quill.find(blotNode);
blot.scroll.quill.update(Quill.sources.USER);

你的value方法已经在同步cmd.content和DOM内容，所以这两种方式都能保证Blot的value和DOM状态一致。

问题2：如何在自定义Blot类中访问Quill实例？ #

在Blot的事件监听或方法中，你可以通过Blot实例的scroll.quill属性拿到Quill实例。在你的create方法的keydown监听里，可以这样修改：

node.addEventListener('keydown', function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // 通过当前节点找到对应的Blot实例
    const currentBlot = Quill.find(this);
    // 获取Quill实例
    const quillInstance = currentBlot.scroll.quill;
    // 现在你可以调用quillInstance的任何方法了，比如quillInstance.update()
  }
});

另外，如果你在Blot类的其他方法（比如update）中，直接用this.scroll.quill就能拿到Quill实例，不需要额外操作。

问题3：如何修改Enter键行为，使其仅插入换行并允许继续输入？ #

要实现仅在可编辑区域插入换行，需要阻止Enter键的默认Quill行为，然后手动在可编辑span中插入换行，并调整光标位置。修改你的keydown监听代码如下：

node.addEventListener('keydown', function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // 找到可编辑的子span
    const editableSpan = this.querySelector('[contenteditable=true]');
    // 创建换行元素
    const br = document.createElement('br');
    // 获取当前光标位置
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    
    // 在光标位置插入换行
    range.insertNode(br);
    // 将光标移动到换行之后，保证继续输入
    range.setStartAfter(br);
    range.setEndAfter(br);
    selection.removeAllRanges();
    selection.addRange(range);
    
    // 通知Quill更新内容状态
    const currentBlot = Quill.find(this);
    currentBlot.scroll.quill.update(Quill.sources.USER);
  }
});

同时，建议给可编辑span加个样式，确保换行能正常显示：

.quill-cmd-custom [contenteditable=true] {
  white-space: pre-wrap;
}

这样按下Enter时，只会在可编辑区域插入换行，不会拆分Blot，也能继续输入。

内容的提问来源于stack exchange，提问作者slashpm