vue实战026:TinyMCE重写图片上传功能
1、TinyMCE提供了图片异步上传处理函数images_upload_han蟠校盯昂dler让用户配置上传图片的相关焊剑杂锭参数，这里有三个参数，图片数据（blobinfo是一个对象，包含上传文件的信息），成功时的回调函数（success，上传成功的时候向success传入一个图片地址），失败时的回调函数（failure，失败的时候向 failure 传入报错信息），这里我们可以通过images_upload_handler来重新自定义一个上传方法以便适配我们的项目。
3、所以这里我们需要重新来调整下tinymce的结构了，去掉模型中的init绑定，我们写个方法通过window.tinymce.init来配置init，然后在mounted调用该方法自动加载我们定义的配置信息，这时我们就必须挂载的tinymce对象才能正常显示编辑器（这里的DefaultInit就是我们之前在data中定义的init参数）。
6、打开我们的后台，可以在图片存储路径中找到对应的图片信息 ，tinymce将图片自动上传至服务器了，是不是相当的方便快捷。
7、下面是到目前为止的完整代艨位雅剖码，后续继续优化和完善。<template> <div> <textarea :id= "tinymceId" v-model="tinymceHtml"></textarea> </div></template><script>import tinymce from 'tinymce/tinymce'import Editor from '@tinymce/tinymce-vue'import 'tinymce/themes/silver'import 'tinymce/plugins/image'// 插入上传图片插件import 'tinymce/plugins/media'// 插入视频插件import 'tinymce/plugins/table'// 插入表格插件import 'tinymce/plugins/link' //超链接插件import 'tinymce/plugins/code' //代码块插件import 'tinymce/plugins/lists'// 列表插件import 'tinymce/plugins/contextmenu' //右键菜单插件import 'tinymce/plugins/wordcount' // 字数统计插件import 'tinymce/plugins/colorpicker' //选择颜色插件import 'tinymce/plugins/textcolor' //文本颜色插件import 'tinymce/plugins/fullscreen' //全屏import 'tinymce/plugins/help' import 'tinymce/plugins/charmap'import 'tinymce/plugins/paste'import 'tinymce/plugins/hr'import 'tinymce/plugins/searchreplace'import 'tinymce/plugins/insertdatetime'import 'tinymce/plugins/toc'import 'tinymce/plugins/codesample'export default { data () { const ide = Date.now() return { tinymceId: ide, tinymceHtml:'', DefaultInit: { language_url:'/tinymce/langs/zh_CN.js', //导入语言文件 language: "zh_CN",//语言设置 skin_url: '/tinymce/skins/ui/oxide',//主题样式 height:500, //高度 menubar: false,// 隐藏最上方menu菜单 toolbar: true,//false禁用工具栏（隐藏工具栏） browser_spellcheck: true, // 拼写检查 branding: false, // 去水印 statusbar: false, // 隐藏编辑器底部的状态栏 elementpath: false, //禁用下角的当前标签路径 paste_data_images: true, // 允许粘贴图像 toolbar:['bold italic underline strikethrough blockquote|forecolor backcolor|formatselect |fontsizeselect | alignleft aligncenter alignright alignjustify | outdent indent |codeformat blockformats| removeformat undo redo ', 'bullist numlist toc pastetext|codesample charmap hr insertdatetime |lists image media table link unlink |code searchreplace fullscreen help '], plugins: 'lists image media table wordcount code fullscreen help codesample toc insertdatetime searchreplace link charmap paste hr' , } } }, mounted () { this.init() }, methods: { init () { const self = this window.tinymce.init({ // 默认配置 ...this.DefaultInit, // 图片上传 images_upload_handler: function (blobInfo, success, failure){ let formData = new FormData() console.log(blobInfo.filename()) formData.append('img',blobInfo.blob()) self.$axios.post('http://127.0.0.1:8000/upload/',formData) .then(response =>{ console.log(response.data['url']) if(response.data['code']==200){ success(response.data['url']) }else{ failure('上传失败！') } }) }, // 挂载的DOM对象 selector: `#${this.tinymceId}`, }) } } }</script>