[TOC] ### 上传图片，首先要启用图片插件 在plugins参数中把image加进去 <img src="https://img.tnblog.net/arcimg/aojiancc2/eeb4f364723f4576ab342a809bb1974d.png" style="width:666px;height:auto;"> 在工具栏显示图片工具按钮，在toolbar参数中把image加进去 <img src="https://img.tnblog.net/arcimg/aojiancc2/f8f2cad529044540818eaf0fc7b937b2.png" style="width:432px;height:auto;"> toolbar我这里是在使用的时候单独传递进去的，相当于就是在使用的时候个性化配置toolbar,在使用的时候如果不传递toolbar就是使用的默认的配置  **注意不同的使用方法，可能配置plugins和toolbar的地方不一样** 我这里是单独提出来写到js里边的  然后在初始化的时候赋值上去就行了： <img src="https://img.tnblog.net/arcimg/aojiancc2/a2bb7e182cd74faa884035126dcbf68c.png" style="width:500px;height:auto;"> 所以这里根据不同的情况放上去即可。做完这两步配置后，就可以看到上传图片的按钮了，但是点图片按钮是没有上传选项的，只能添加图片地址。要支持上传需要对接上传图片的接口才行，简单的方式只需要配置一个上传图片的地址就行了。 ### 简单的方式,配置上传地址 简单的方式只需要配置一个上传图片的地址就行了。 加入配置参数`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); }) } }); ``` 几点说明： tn2> 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才能粘贴 }) ``` 具体配置的位置根据自己项目中的使用修改即可。