如何实现 Quill Emoji Blot

Question

我正在尝试为 Quill Editor 实现 Emoji Blot，

但我对编辑器上的光标有一些问题。

为了解决这个问题，我在表情符号插入后添加了一个 space，但是当我尝试删除它们时，需要两次返回 space 来删除表情符号。第一次光标停在表情符号的开头，第二次光标被删除。

有没有人做过类似的事情？我怎样才能让这段代码正常工作？

提前致谢。

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

我将表情符号标签从 span 更改为 img 并替换了：

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

有

myEditor.setSelection(cursorPosition + 1);

这解决了问题。请在此处查看示例：https://jsfiddle.net/nadavrt/Ldgfp5pa/

至于导致 span 行为异常的原因，我的猜测是由于 Quill 本身的错误，Quill 无法正确注册 Blot 的宽度。我建议您在项目的 GitHub 页面上打开一个错误问题。

如何实现 Quill Emoji Blot

How to implement Quill Emoji Blot

javascript

quill