Javascript 在羽毛笔编辑器中嵌入自定义内联斑点后插入的未定义斑点

我在推特上工作，就像用户提到的羽毛笔编辑器

我的自定义污点代码是

import Quill from 'quill';

const Base = Quill.import('blots/inline');

export default class MentionBlot extends Base {
static create(data) {
  const node = super.create(data.name);
  node.innerHTML = `@${data.name}`;
  node.setAttribute('contenteditable', false);
  node.setAttribute('name', data.name);
  node.setAttribute('id', data.id);
  return node;
}

MentionBlot.blotName = 'usermention';
MentionBlot.tagName = 'aumention';

我在下拉列表中显示用户列表。每当单击一个用户名时，我都会将该用户作为@user嵌入到quill编辑器中

这是我为它编写的点击事件。我在这里做的事情是用自定义内联blot替换用户在@之后输入的文本

  searchResult.forEach(element => {
    element.addEventListener('click', e => {
      e.preventDefault();
      e.stopPropagation();

      const quillEditor = window.editor;
      const content = quillEditor.getText();

      const quillRange = quillEditor.selection.savedRange; // cursor position
      if (!quillRange || quillRange.length != 0) return;
      const cursorPosition = quillRange.index;
      let mentionStartAt = 0;
      let lengthToBeDeleted = 0;
      for (let i = cursorPosition - 1; i >= 0; --i) {
        const char = content[i];
        if (char == '@') {
          mentionStartAt = i;
          lengthToBeDeleted += 1;
          break;
        } else {
          lengthToBeDeleted += 1;
        }
      }
      const data = {
        name: element.innerHTML,
        id: element.getAttribute('id')
      };

      quillEditor.deleteText(mentionStartAt, lengthToBeDeleted);
      quillEditor.insertEmbed(mentionStartAt, 'usermention', data, 'api');
      const cursorAfterDelete =
        quillEditor.selection.savedRange.index + element.innerHTML.length;

      quillEditor.insertText(cursorAfterDelete + 1, ' ', 'api');
      quillEditor.setSelection(cursorAfterDelete + 2, 'api');
      quillEditor.format('usermention', false, 'api');

    });
  });
}

在这里之前，一切都很有魅力，但我面临的问题是在插入嵌入usernoticeblot之后，如果用户在键盘上输入Enter按钮进入新行，Quill的handleEnter（）函数被触发，它正在向编辑器插入@undefined用户提示污点

执行上述函数后，我的编辑器状态为。

当我按enter键转到新行时，这是HandleCenter（）函数-Quill的调试状态

@未定义的usernotice已插入到编辑器中。我希望用户输入新行

当用户按Enter键时，我知道quill.format（）返回的是usertitle:true。但如果用户在输入几个字符后按Enter键，则会将用户带到新行，在本例中，quill.format（）为空

在这方面谁能帮我一下吗。谢谢。

参考：

使用Quill键盘绑定处理enter比向其中添加addLister更容易，下面的方法可以帮助您在Quill编辑器中触发enter事件时进行处理

var quill = new Quill('#editor', modules: {
keyboard: {
  bindings: bindings
}}});


var bindings = {
  handleEnter: {
    key: '13', // enter keycode
    handler: function(range, context) {
       //You can get the context here
    }
  }
};

---

我希望以上答案适合您的需要。

谢谢您的回复。覆盖键盘中的上下文解决了我的查询。