如何实现羽毛笔表情符号污点

Question

I am trying to implement an Emoji Blot to Quill Editor,

But I have some issues with the cursor on editor.

In order to solve this I added a space after the emoji insertion, but when I try to remove them is needed two backspaces to remove the emoji. On the first time the cursor stops at the beginning of the emoji, and on the second time the emoji is removed.

Does anyone already did something similar to this? How can I get this code to work properly?

Thanks in any advance.

 const Embed = Quill.import("blots/embed"); class EmojiBlot extends Embed { static create(classes) { let node = super.create(); classes.split(" ").forEach(iconClass => { node.classList.add(iconClass); }); return node; } static formats(node) { let format = {}; if (node.hasAttribute("class")) { format.class = node.getAttribute("class"); } return format; } static value(node) { return node.getAttribute("class"); } format(name, value) { if (name === "class") { if (value) { this.domNode.setAttribute(name, value); } else { this.domNode.removeAttribute(name, value); } } else { super.format(name, value); } } } EmojiBlot.blotName = "emoji"; EmojiBlot.tagName = "span"; Quill.register({ "formats/emoji": EmojiBlot }); var myEditor = new Quill("#editor-container", { modules: { toolbar: document.getElementById("toolbar") }, placeholder: "Compose an epic...", theme: "snow" // or 'bubble' }); const insertEmoji = function() { let editorSelection = myEditor.getSelection(); const cursorPosition = editorSelection && editorSelection.index ? editorSelection.index : 0; myEditor.insertEmbed(cursorPosition, "emoji", 'icon icon-smiley'); myEditor.insertText(cursorPosition + 1, ' ') myEditor.setSelection(cursorPosition + 2) }; document.querySelector(".emojiButton").addEventListener("click", insertEmoji); 

 #editor-container { height: 200px; } .icon { display: inline-block; height: 1em; width: 1em; margin: 0 .05em 0 .1em; vertical-align: -0.1em; background-repeat: no-repeat; background-position: center center; background-size: 1em 1em; font-size: 20px; } .icon-smiley { background-image: url("https://twemoji.maxcdn.com/2/svg/1f603.svg"); } 

 <link href="//cdn.quilljs.com/1.3.5/quill.snow.css" rel="stylesheet"/> <script src="//cdn.quilljs.com/1.3.5/quill.js"></script> <div id="editor-container" ></div> <div id="toolbar"> <button class="ql-bold"></button> <button class="ql-italic"></button> <button class="emojiButton">:D</button> </div> 

Answer 1

I changed the emoji tag from a span to an img and also replaced:

myEditor.insertText(cursorPosition + 1, ' ')
myEditor.setSelection(cursorPosition + 2)

With

myEditor.setSelection(cursorPosition + 1);

This solves the issue. See an example here: https://jsfiddle.net/nadavrt/Ldgfp5pa/

As to what is causing the span the misbehave, my guess is that Quill fails to register your Blot's width correctly due to an error in Quill itself. I would recommend that you open a bug issue on the project's GitHub page.