如何將表情符號添加到 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 的情況。