在 Quill 编辑器中嵌入自定义内联印迹后插入未定义印迹

Question

我正在为 Quill 编辑器开发 Twitter，就像用户提到的那样。

我的自定义印迹代码是

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 嵌入到羽毛笔编辑器中。

这是我为它写的点击事件。我在这里做的是用自定义 Inline 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');

    });
  });
}

直到这里，一切都像魅力一样工作，但我面临的问题是在插入嵌入 usermention 印迹后，如果用户输入 Enter 按钮 在键盘上转到新行，Quill 的 handleEnter() 函数被触发，它正在向编辑器插入 @undefined usermention blot .

执行以上功能后，我的编辑器状态是这样的。

当我按回车键转到新行时，这是 handleEnter() 函数的调试状态 - Quill

@undefined usermention 已插入到编辑器中。我希望用户输入新行。

当用户按下 Enter 时，我了解到 quill.format() 正在返回 usermention:true。但是，如果用户在输入更多字符后按下 Enter，则会将他带到新行，在这种情况下 quill.format() 是空的。

有人可以在这方面帮助我吗？谢谢。

Answer 1

参考：https://quilljs.com/docs/modules/keyboard/

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

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
    }
  }
};

希望以上回答能满足您的需求。

在 Quill 编辑器中嵌入自定义内联印迹后插入未定义印迹

Undefined blot inserted after embedding custom inline blot in Quill editor

javascript

quill

ngx-quill