[Vue3] Wangeditor富文本实粘贴图片

在 Vue3 中，Wangeditor 是一款常用的富文本编辑器，支持在其中处理图片粘贴功能。当用户复制并粘贴图片到 Wangeditor 编辑器时，你需要配置它的 paste事件处理器，以便解析粘贴内容，并将其转换成可以插入到编辑器内的图片格式。

以下是基本步骤：

1. 首先，在引入 Wangeditor 的基础上，注册 paste 事件：

import Wangeditor from 'wangeditor';
import 'wangeditor/dist/css/wangEditor.css';

export default {
  setup() {
    const editor = ref(null);
    
    // 初始化编辑器，并监听 paste 事件
    const initEditor = async () => {
      await editor.value.create();
      editor.value.config({
        // 其他配置...
        onPaste(text) {
          this.handleImagePaste(text); // 调用自定义的处理函数
        }
      });
    };

    return { editor, initEditor };
  },
  
  methods: {
    handleImagePaste(text) {
      // 实现图片粘贴解析逻辑，例如：
      const images = text.match(/<img[^>]+>/g) || []; // 使用正则匹配图片标签
      for (let image of images) {
        // 这里可以进一步处理图片URL、裁剪等操作，然后添加到编辑器内
        editor.value.insertHtml(image);
      }
    }
  }
};

在这个例子中，`handleImagePaste`函数会接收到用户的粘贴内容作为字符串，通过正则表达式查找图片标签，然后将它们添加到编辑器的内容中。