如何将表情符号添加到 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}]
      },
}

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

      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 的情况。