将拖放图片上传功能添加到Tiptap

Need to be able to drag and drop image files into your Tiptap WYSIWYG editor? Tiptap is highly customisable, so let's add some drag-and-drop magic to the Image extension.

需要能够将图像文件拖放到您的Tiptap所见即所得编辑器中吗？Tiptap是高度可定制的，因此让我们为Image扩展添加一些拖放魔法。

If you don't already know, Tiptap is a headless WYSIWYG editor that uses ProseMirror under the hood. I love how easy it is to build/add just the features you need and create a totally custom editing experience for your users.

如果您还不知道，Tiptap是一个使用ProseMirror作为核心的无头所见即所得编辑器。我喜欢它有多么容易构建/添加您所需的功能，并为用户创建完全定制的编辑体验。

Although Tiptap comes with an image extension, it doesn't have drag-and-drop functionality out of the box (at the time of writing). But like every other part of Tiptap, it's fairly straightforward to add this extra feature - and that's what we will do in this blog post!

尽管Tiptap带有图像扩展，但它在默认情况下没有拖放功能（截至撰写本文时）。但是，就像Tiptap的其他部分一样，添加此额外功能非常简单 - 这就是我们在本博客文章中要做的事情！

Here's what we will build:

这是我们将要构建的内容：

First things first, you're going to need Tiptap installed, and you will also need to use the Image extension.

首先，您需要安装Tiptap，并且还需要使用Image扩展。

I'm going to assume you already have Tiptap installed, but here's the bare bones of it.

我假设你已经安装了Tiptap，但这是它的基本结构。

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Image from '@tiptap/extension-image'; new Editor({ element: document.querySelector('.editor'), extensions: [ StarterKit, Image ], content: '<p>Hello World!</p>',
});

<div class="editor"></div>

There are instructions in the Tiptap documentation for ReactJS (my framework of choice), Vue, and other options.

Tiptap文档中有关于ReactJS（我选择的框架）、Vue和其他选项的说明。

I've created a Tiptap CodePen if you want to follow along without the setup.

我创建了一个Tiptap CodePen，如果您不想进行设置，可以在那里跟随。

Add the Dropcursor extension

添加Dropcursor扩展

I'm going to highly recommend the Tiptap Dropcursor extension if you have the image extension installed.

如果您安装了图像扩展，我强烈推荐使用Tiptap Dropcursor扩展。

Without it, you can still move your images around within the editor, but you can't necessarily see whe...