vue, vue3 Tinymce 图片上传 。复制粘贴图片

上传图片，首先要启用图片插件

在plugins参数中把image加进去

在工具栏显示图片工具按钮，在toolbar参数中把image加进去

toolbar我这里是在使用的时候单独传递进去的，相当于就是在使用的时候个性化配置toolbar,在使用的时候如果不传递toolbar就是使用的默认的配置

注意不同的使用方法，可能配置plugins和toolbar的地方不一样
我这里是单独提出来写到js里边的

然后在初始化的时候赋值上去就行了：

所以这里根据不同的情况放上去即可。做完这两步配置后，就可以看到上传图片的按钮了，但是点图片按钮是没有上传选项的，只能添加图片地址。要支持上传需要对接上传图片的接口才行，简单的方式只需要配置一个上传图片的地址就行了。

简单的方式,配置上传地址

简单的方式只需要配置一个上传图片的地址就行了。

加入配置参数images_upload_url此参数用于指定一个接受上传文件的后端处理程序地址，例如：

images_upload_url: '/demo/upimg.php',

如果返回的地址是相对路径，还有一个参数images_upload_base_path，可以给相对路径指定它所相对的基本路径。

images_upload_base_path: '/demo',

核心示例代码：

tinymce.init({
    selector: '#tinydemo',
    language:'zh_CN',
    plugins: 'image',
    toolbar: 'image',
    images_upload_url: '/demo/upimg.php',
    images_upload_base_path: '/demo',
});

简单的配置一下就可以上传图片了

但是一般我们的图片上传接口不会那么简单只有一个图片信息，一般我们还会传递一些额外信息，比如存储图片的捅信息、存储文件标识等等，还会传递headers token什么的，所以一般会手动调用上传图片的接口。Tinymce 提供了images_upload_handler来手动处理图片上传。

自定义前端上传逻辑

使用 images_upload_handler 可自定义上传处理逻辑。使用该配置，则无需使用其他上传配置选项。

最新版tiny为images_upload_handler加入了第四个参数：上传进度。本例兼容旧版，未使用第四个参数。
更多配置参考：http://tinymce.ax-z.cn/configure/file-image-upload.php

使用images_upload_handler示例：

import { getImgUrl } from '/@/utils/toolsFunctions'
import { getToken } from '/@/utils/auth';
tinymce.init({
    selector: '#tinydemo',
    plugins: 'image',
    toolbar: 'image',
    images_upload_handler: function (blobInfo, succFun, failFun) {
            var file = blobInfo.blob();//转化为易于理解的file对象
            const formData = new FormData()
            formData.append('file', file, 'image.png')
            // 其他额外参数
            formData.append('bucketName', 'teacher-certification')
            formData.append('filePath', 'teacherTraining')
            formData.append('fileType', '1')
            fetch('/oss/api/SmartFiles/UpLoadFormXXX', {
                method: 'POST',
                headers: {
                    // 'Content-Type': 'application/json',
                    Authorization: 'Bearer ' + getToken() // 替换为你的 token
                },
                body: formData
            })
                .then((response) => {
                    if (response.ok) {
                        return response.json() // 转换为JSON
                    }
                    throw new Error('Network response was not ok.')
                })
                .then((response) => {
                    console.log('上传成功', response)
                    succFun(getImgUrl(response.data.id));
                })
                .catch((error) => {
                    console.error('上传失败', error)
                    failFun('上传失败 ' + error);
                })
    }
});

几点说明：

1：getToken是我封装获取token的，上传接口需要token进行身份验证才能调用
2：getImgUrl：我这里上传图片的接口不会直接返回图片的url，而是返回一个图片的id然后调用封装的getImgUrl方法去获取图片的地址。我这里后台封装上传图片与文件的方法是使用的oss文件存储那一套
3：我这里调用接口的方式是使用的原生的fetch方法，所以看起来麻烦一点，比如使用axios获取封装过程的axios会更加的简洁。

复制粘贴图片

让Tinymce支持直接粘贴图片上传，截图上传。非常简单，上面已经自定义了images_upload_handler方法，自定义了上传逻辑，只需要加点配置就行了。只需要配置paste和支持粘贴就行了，具体核心代码如下：

tinymce.init({
  selector: '#tinydemo',
  plugins: 'paste',// 配置1
  toolbar: 'paste',// 配置2
  paste_data_images: true // 配置3， 默认是false的，记得要改为true才能粘贴
})

具体配置的位置根据自己项目中的使用修改即可。