如何在Tiptap中上传或禁用粘贴图片

Once you add the Image extension to the Tiptap WYSIWYG editor, users can paste images in from HTML and the clipboard. That may (or may not be) what you want to happen. Here's how I handled image pasting in Tiptap.

一旦将图像扩展添加到Tiptap所见即所得编辑器中，用户可以从HTML和剪贴板中粘贴图像。这可能是您想要发生的事情，也可能不是。以下是我处理Tiptap中图像粘贴的方法。

This is a kind of follow-up post to Adding drag and drop image uploads to Tiptap. We took care of users uploading images through drag and drop - but what happens if they paste images into the editor content?

这是对向Tiptap添加拖放图片上传的一种后续帖子。我们已经处理了用户通过拖放上传图片的情况 - 但是如果他们将图片粘贴到编辑器内容中会发生什么呢？

Once you add the Image extension in Tiptap, your editor can handle images, or in this case the <img> element.

一旦在Tiptap中添加了Image扩展，您的编辑器就可以处理图像，或者在这种情况下是<img>元素。

In the previous blog post, we added a handleDrop function, that took care of uploading images when they were dropped into the editor.

在上一篇博客文章中，我们添加了一个handleDrop函数，用于在将图像拖放到编辑器中时处理上传。

In this post, we will add a handlePaste function, so your editor can also upload images that are pasted in.

在本文中，我们将添加一个handlePaste函数，以便您的编辑器也可以上传粘贴的图像。

Pasting an image file in Tiptap

在Tiptap中粘贴图像文件

By default, you can't paste an image file into Tiptap, so we need to write some code to allow this behaviour.

默认情况下，您无法将图像文件粘贴到Tiptap中，因此我们需要编写一些代码来允许此行为。

Like the handleDrop function we used for drag and drop images in Tiptap, handlePaste is a function provided to use from ProseMirror (the rich-text editor Tiptap uses under the hood).

与我们在Tiptap中用于拖放图像的handleDrop函数一样，handlePaste是一个提供给ProseMirror使用的函数（Tiptap在内部使用的富文本编辑器）。

handlePaste is "used to override the behaviour of pasting". That sounds like what we need to do here - let's get it set up!

handlePaste是用于覆盖粘贴行为的。这听起来像是我们需要在这里做的事情 - 让我们开始设置吧！

new Editor({ element: document.querySelector('.editor'), extensions: [ StarterKit, Image, ], editorProps: { handlePaste: function(view, event, slice) { return false; } }, content: ` <p>Hello World!</p> `,
});

This is the bit we are working on:

这是我们正在处理的部分：

handlePaste: function(view, event, slice, moved) { return false; }...