WangEditorV4 实现 粘贴来自word文档的内容有图片则进行上传操作给出demo

要实现粘贴来自Word文档的内容并进行图片上传操作，可以使用WangEditor V4的粘贴事件和上传图片的接口来实现。以下是一个简单的示例代码：

首先，你需要在HTML文件中引入WangEditor V4的相关文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WangEditorV4 Demo</title>
  <link rel="stylesheet" type="text/css" href="path/to/wangEditor.min.css">
</head>
<body>
  <div id="editor"></div>

  <script type="text/javascript" src="path/to/wangEditor.min.js"></script>
  <script type="text/javascript" src="path/to/axios.min.js"></script>
  <script type="text/javascript" src="path/to/wangEditorV4.js"></script>
</body>
</html>

然后，你需要在JavaScript文件中初始化WangEditor编辑器，并添加粘贴事件的监听器：

// 初始化编辑器
const editor = new wangEditor('#editor');
editor.create();

// 监听粘贴事件
editor.txt.eventHooks.pasteEvents.push({
  // 粘贴事件回调函数
  callback: function (pasteEvent) {
    const pasteData = pasteEvent.clipboardData || window.clipboardData; // 获取粘贴的数据
    const items = pasteData.items;

    // 遍历粘贴的数据
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
        const file = item.getAsFile(); // 获取粘贴的图片文件

        // 调用上传图片的函数
        uploadImage(file);
      }
    }
  }
});

// 上传图片的函数
function uploadImage(file) {
  const formData = new FormData();
  formData.append('image', file);

  // 发送图片上传请求
  axios.post('/upload', formData)
    .then(function (response) {
      const imageUrl = response.data.imageUrl;

      // 插入上传后的图片到编辑器中
      editor.txt.command('insertImage', imageUrl);
    })
    .catch(function (error) {
      console.log(error);
    });
}

上面的代码中，我们监听了粘贴事件，并在粘贴的数据中找到图片文件，然后调用uploadImage函数进行图片上传。在uploadImage函数中，我们使用了Axios库发送图片上传请求，并在上传成功后将返回的图片链接插入到编辑器中。

请注意，上述代码中的/upload是一个示例的上传图片接口，你需要根据实际情况修改成你自己的接口地址。

这只是一个简单的示例，你可以根据实际需求对代码进行修改和优化

WangEditorV4 实现粘贴来自word文档的内容有图片则进行上传操作给出demo

WangEditorV4 实现 粘贴来自word文档的内容有图片则进行上传操作给出demo

WangEditorV4 实现粘贴来自word文档的内容有图片则进行上传操作给出demo