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

Question

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

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，你想将它与你的其他自定义节点（如标签提及）和标记（链接、斜体、粗体）结合起来，以创建一个插入到编辑器中的 Schema。从这里跟随恐龙教程的其余部分。

祝你好运！

如果您仍然卡住，我强烈建议您查看基于 ProseMirror 构建的库，例如tiptap 和rich-markdown-editor，以查看 ProseMirror 的集成和使用情况。