Vue3+thinymce实现插入图片

在Vue3中集成TinyMCE富文本编辑器并允许用户插入图片通常涉及以下几个步骤：

1. 安装依赖：首先需要安装`@tinymce/tinymce-vue`库，可以使用npm或yarn命令行工具进行安装：

   npm install @tinymce/tinymce-vue
   # 或者
   yarn add @tinymce/tinymce-vue

2. 引入组件：在你的项目中，引入`Tinymce.vue`组件，并配置它以便支持图片上传：

   <script setup>
     import { createApp } from 'vue';
     import { TinymceComponent } from '@tinymce/tinymce-vue';

     const tinymceOptions = {
       selector: 'textarea', // 编辑器绑定的元素选择器
       plugins: 'image', // 启用插件，包括图片功能
       images_upload_url: '/api/upload-image', // 图片上传的API URL
       images_dimensions: true, // 获取图片尺寸信息
       image_caption: true, // 允许添加图片描述
     };
   </script>

   <template>
     <div>
       <TinymceComponent :config="tinymceOptions" />
     </div>
   </template>

3. 配置图片上传：你需要设置一个服务器端的处理程序来接收并存储图片文件。这个URL应该指向后端API，用于处理文件上传。

4. 实现后端接口：创建一个后端路由来接收图片数据，处理文件并返回响应，可能需要生成一个唯一的ID或URL保存图片。

5. 渲染和测试：将组件添加到你的Vue应用中，现在用户就可以通过TinyMCE编辑器插入图片了。