我在羽毛笔中使用内联提示印迹,同时设置我在代码下方使用的选择来进行设置选择。
this.quill.deleteText(this.mentionCharPos, this.cursorPos - this.mentionCharPos, Quill.sources.API);
this.quill.insertText(this.mentionCharPos, mentionChar, "mention", render.id, Quill.sources.USER);
this.quill.insertText(this.mentionCharPos + name.length + 1, " ", 'mention', false, Quill.sources.USER);
this.quill.setSelection(this.mentionCharPos + name.length + 2, 0, Quill.sources.SILENT);
this.mentionCharPos - > @ position name - >提名(例如:satya)
当文本被插入编辑器时,当我做退格时光标位置在适当的位置,然后光标本身隐藏,如果给出空间,它显示在编辑器的末尾。
我也在添加提示印迹的代码。
import Quill from 'quill';
const Inline = Quill.import('blots/inline');
class MentionBlot extends Inline {
static create(id) {
const node = super.create();
node.dataset.id = id;
node.setAttribute('contenteditable', true);
return node;
}
static value(domNode) {
return domNode.dataset;
}
static formats(node) {
return node.dataset.id;
}
format(name, value) {
if (name === "mention" && value) {
this.domNode.setAttribute("data-id",
value);
} else {
super.format(name, value);
}
}
formats() {
const formats = super.formats();
formats['mention'] =
MentionBlot.formats(this.domNode);
return formats;
}
}
MentionBlot.blotName = 'mention';
MentionBlot.tagName = 'span';
MentionBlot.className = 'mention';
Quill.register({
'formats/mention': MentionBlot
});
如果我认为光标位置正确,如果我认为它是真的那么它工作得很好。当我把满足感作为假的时候,我正面临着这个问题。
https://www.dropbox.com/s/6kmmmy1gsidggxt/Screen%20Recording%202019-03-07%20at%2010.08%20AM.mov?dl=0
我找到了一个解决方案,在插入后插入一个空格:
insertEmbed(range.index, 'mention', value, 'user');
insertText(range.index + 1, "\u00a0", 'user');
没关系。