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

Question

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

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

Answer 1

tiptap editor不支持仅支持files的images，并且在快速搜索中没有第三方扩展来实现它。

Answer 2

由于tiptap不支持files，而您将使用它的是messaging，因此我将与您分享我为chat实现的解决方案。

它包括添加一个button，以这种方式上传文件：机器人就业

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

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