如何将表情符号添加到 ProseMirror？

Question

我开始使用 prosemirror，但我正在努力寻找它的扩展。即使是标签、提及或表情符号等基本扩展也很难找到。我是不是错过了这个编辑器的某些东西？我知道它已经相当成熟（试图放弃草稿以支持它），但我可能会错过这里的一些东西。

Answer 1

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', {class: "emoji", draggable: "false", alt: node.attrs.char, src}]
      },

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

祝你好运！

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