我正在 Twitter 上工作,就像用户提到 Quill 编辑器一样。
我的自定义印迹代码是
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嵌入到羽毛笔编辑器中。
这是我为它编写的点击事件。我在这里做的事情是用自定义的内联印迹替换@之后输入的文本用户。
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');
});
});
}
直到这里,一切都像魅力一样工作,但我面临的问题是在插入嵌入用户提及印迹之后,如果用户在键盘上输入Enter 按钮以转到新行,则 Quill 的handleEnter()函数将被触发并且它正在插入@undefined usermention 印迹给编辑。
当我按 Enter 进入新行时,这是 handleEnter() 函数的调试状态 - Quill
@undefined usermention 被插入到编辑器中。我希望用户输入新行。
当用户按 Enter 键时,我知道 quill.format() 正在返回 usermention:true。但是如果用户在输入几个字符后按 Enter 键,它会将他带到新行,在这种情况下 quill.format() 是空的。
有人可以在这方面帮助我吗?谢谢你。