vue2 使用 tinymce富文本编辑器可以粘贴图片吗

Vue2 中使用 TinyMCE 富文本编辑器确实支持粘贴图片功能。TinyMCE 提供了丰富的文本处理能力，包括图片上传、粘贴等。要在 Vue 组件中集成 TinyMCE 并允许用户粘贴图片，你可以按照以下步骤操作：

1. 安装依赖：首先需要安装 tiny-mce-vue 包，可以通过 npm 或者 yarn 进行安装：

   npm install @tinymce/tinymce-vue

2. 配置 TinyMCE：在 Vue 文件中初始化 TinyMCE，设置插件配置，包括图片相关选项：

<template>
  <div ref="tinymce">
    <!-- 你的富文本编辑区域 -->
  </div>
</template>

<script>
import { createTinymce } from '@tinymce/tinymce-vue'

export default {
  setup() {
    const editorOptions = {
      plugins: 'image', // 必须包含 image 插件
      images_upload_url: '/api/upload-image', // 图片上传的服务器端地址
      image_insertion_allow_types: ['image/png', 'image/jpeg'], // 允许的图片类型
      paste_data_images: true, // 允许粘贴数据图片
    }

    const editor = createTinymce(editorOptions)
    
    return { editor }
  },
}
</script>

3. 注册组件事件监听：为了让用户能在组件外部触发粘贴事件，你需要监听浏览器的 `paste` 事件，并将粘贴的内容传递给 TinyMCE 的 `insertContent` 方法，以便插入图片。

4. 监听粘贴并处理图片：

mounted() {
  document.addEventListener('paste', (event) => {
    if (!event.clipboardData || !event.clipboardData.items) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();

    const items = event.clipboardData.items;

    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.type === 'text/html') {
        // 解析 HTML 获取图片数据
        let imageData = item.getAsHTML();
        this.editor.insertContent(imageData);
        break;
      }
    }
  });
},

现在，当用户在 TinyMCE 编辑区域粘贴图片时，它会被正确地插入到编辑器中。