Vue3+tinymce6.3.0插入图片时如何打开自定义设置图片宽高功能

在Vue3中结合TinyMCE 6.3.0插件处理图片上传并允许用户自定义宽度和高度，你需要遵循以下步骤：

1. **安装依赖**:
首先，在你的项目中安装`@tinymce/tinymce-vue`和`vue-file-input`等必要库，你可以使用npm或yarn进行安装：

   npm install @tinymce/tinymce-vue vue-file-input --save

2. **配置TinyMCE**:
在你的Vue组件中，创建TinyMCE实例并配置它支持文件输入，并允许自定义尺寸。例如：

   <script setup>
     import { createTinymce } from '@tinymce/tinymce-vue';
     const tinymce = createTinymce({
       // ...其他TinyMCE配置项
       plugins: 'image imagetools', // 添加图像工具插件
       toolbar: 'insertimage imageoptions', // 显示"插入图片"和"图片选项"按钮

       // 自定义图片插入函数
       imageInsertAction: async (editor, e) => {
         const fileInput = document.createElement('input'); // 创建file input元素
         fileInput.type = 'file';
         fileInput.accept = '.jpg, .jpeg, .png'; // 可接受的图片格式

         fileInput.addEventListener('change', async () => {
           const file = fileInput.files[0];
           const result = await resizeImage(file); // 调用你的图片缩放函数
           editor.insertContent(result);
         });

         document.body.appendChild(fileInput); // 将input添加到DOM中以便用户选择文件
       },
   </script>

   <!-- 模板部分 -->
   <div v-tinymce="tinymceOptions" @tinymce-ready="tinymceReady"></div>
   <script>
     function resizeImage(file) {
       return new Promise((resolve, reject) => {
         // 使用第三方库如`sharp`处理图片并设置宽度和高度
         sharp(file)
           .resize({ width: 800, height: 600 }) // 示例值，根据需求调整
           .toBuffer((err, buffer) => {
             if (err) {
               reject(err);
             } else {
               resolve(`![](data:image/jpeg;base64,${buffer.toString('base64')})`);
             }
           });
       });
     }

     // ...其他生命周期钩子和tinymceReady函数
   </script>

在这个例子中，用户选择图片后，会自动触发`resizeImage`函数，将图片缩小并设置尺寸后插入编辑器。