如何在ProseMirror中添加表情符号？

如何解决如何在ProseMirror中添加表情符号？

我开始使用prosemirror，但是我一直在努力寻找扩展。即使是基本扩展，如标签，提及或表情符号，也很难找到。我是否缺少这个编辑器？我知道它已经很成熟了（试图放弃草案以支持它），但是我可能在这里会漏掉一些东西。

解决方法

ProseMirror 是一个成熟的框架，但它不像 Draft.js 那样容易拖放，因为您将必须为表情符号、标签、提及等

最初需要阅读大量文档，但是一旦您牢牢掌握，构建这些文档就会很容易。

让我们以表情符号为例。我们可以从这里改编恐龙的例子：https://prosemirror.net/examples/dino/。

首先，我们必须为表情符号定义一个 NodeSpec (https://prosemirror.net/docs/ref/#model.NodeSpec)。

const EmojiSpec = {
      attrs: {char: {}},// dynamic values here
      inline: true,group: "inline",draggable: false,selectable: false,parseDOM: [{ // how does prosemirror recognize an emoji if its being pasted from clipboard?
        tag: "img[emoji]",getAttrs: (dom: HTMLImageElement) => {
          return {char: dom.getAttribute("alt")};
        }
      }],toDOM: (node: PMNode) => { // how should prosemirror render the emoji based on the node values?
        return ['img',{class: "emoji",draggable: "false",alt: node.attrs.char}]
      },}

这是一个松散的实现。在生产中，您希望像这样根据 src 值计算图像 node.attrs.char

      toDOM: (node: PMNode) => {
        const src = getImageSrc(node.attrs.char)
        return ['img',alt: node.attrs.char,src}]
      },

一旦你有了这个表情符号 NodeSpec，你想把它与你的其他自定义节点（如标签提及）和标记（链接、斜体、粗体）结合起来，以制作一个你插入编辑器的架构。从这里开始学习恐龙教程的其余部分。

祝你好运！

如果您仍然遇到问题，我强烈建议您查看基于 ProseMirror 构建的库，例如 tiptap 和 rich-markdown-editor，以了解 ProseMirror 已被集成和使用。