vue3使用tinymce上传图片

Vue3中使用TinyMCE插件上传图片通常需要以下几个步骤：

1. 首先，在项目中安装TinyMCE和相关的文件上传插件。可以使用npm或yarn来安装：

   npm install @tinymce/tinymce-vue @tinymce/tinymce-skins tiny-mce-file-uploader

2. 在`main.js`或入口文件中引入并配置TinyMCE：

   import Vue from 'vue';
   import { createInitalizationOptions } from '@tinymce/tinymce-vue';
   Vue.use(createInitalizationOptions({
     selector: 'textarea', // 或者你想应用到的元素ID
     plugins: ['filemanager'],
     fileManagerLocation: '/path/to/file-manager', // 你的文件管理器URL
     toolbar: 'insertfile imagetools',
   }));

这里启用了filemanager插件，并指定了上传文件的URL。

3. 在HTML模板中添加TinyMCE编辑器：

   <textarea v-tinymce></textarea>

4. 当用户选择图片时，TinyMCE会触发`image-upload-complete`事件，可以通过监听这个事件处理上传后的图片：

   export default {
     mounted() {
       this.$refs.tinyMCEEditor.on('image-upload-complete', (event) => {
         const blob = event.detail.blob; // 图片blob
         // 进行后续处理，例如保存到服务器或者显示在页面上
       });
     },
   }