如何在 React 的 Tip-Tap 编辑器中上传文件？

Question

我正在使用tip-tap编辑器来实现我正在工作的项目所需的消息传递功能。一切似乎都对我有利，除了我找不到本地选项来上传图像以外的文件。

是否可以在 Tip-Tap 编辑器中上传文件以进行反应？

Answer 1

tiptap editor

不支持

files

仅

images

，并且在快速搜索时没有第三方扩展可以做到这一点。

Answer 2

由于

tiptap

不支持

files

并且您将使用它来实现

messaging

，因此我与您分享我为

chat

实施的解决方案。

它包括添加

button

以这种方式上传文件： Ejemplo del botón

然后可以使用编辑器提供的快捷方式调用该按钮

const EventHandler = Extension.create({
  name: "eventHandler",

  addProseMirrorPlugins() {
    return [
      new Plugin({
        key: new PluginKey("eventHandler"),
        props: {
          handleKeyDown: (view, event) => {
            if (event.metaKey || event.ctrlKey) {
              // Open files
              if (event.key === "o") {
                event.preventDefault();
                let plusMenuFile = document.getElementById("plus-menu-tools-item-file");
                if (plusMenuFile) {
                  plusMenuFile.click();
                } else {
                  document.getElementById("MediaFilesText-input-file").click();
                }
              }
              // ...
            }
          }
        }
      })
    ];
  }
});

const editor = useEditor({
   extensions: [
      StarterKit,
      EventHandler,
      //...
   ]
});

这里我留下了如何在tiptap编辑器中使用它的示例：https://codesandbox.io/s/adoring-grothendieck-fu82ju

Answer 3

如果您将tiptap与Material-UI一起使用，则此库https://www.npmjs.com/package/mui-tiptap-editor已经具有上传功能。