vue实战026:TinyMCE重写图片上传功能
1、 TinyMCE提供了图片异步上传处理函数images_upload_handler让用户配置上传图片的相关参数，这里有三个参数，图片数据（blobinfo是一个对象，包含上传文件的信息），成功时的回调函数（success，上传成功的时候向success传入一个图片地址），失败时的回调函数（failure，失败的时候向 failure 传入报错信息），这里我们可以通过images_upload_handler来重新自定义一个上传方法以便适配我们的项目。
2、更改上传方法我们同样在tinymce的init中去配置，如果你直接在上文vue实战025:配置TinyMCE富文本编辑器中的init中添加images_upload_handler方法你会发现根本找不到$axios，因为axios需要在方法中调用。
3、所以这里我们需要重新来调整下tinymce的结构了，去掉模型中的init绑定，我们写个方法通过window.tinymce.init来配置init，然后在mounted调用该方法自动加载我们定义的配置信息，这时我们就必须挂载的tinymce对象才能正常显示编辑器（这里的DefaultInit就是我们之前在data中定义的init参数）。
4、 然后我们就可以在init中重写我们的images_upload_handler方法了，这里我用的是vue，数据发送用的是axios，这里的方法跟我们前面说到的“Vue实战024:Vue-Quill-Editor自定义图片上传”一样，但是没那么麻烦，接受参数之后直接将图片的url传给success即可，tinymce会自动帮你插入到光标所在位置的。
5、除了点击上传外，tinymce最大的亮点就是可以直接复制粘贴上传，这样大大方便了我们编写文章，要实现这个功能相当的简单，前面我们已经加载了paste插件, 接下来只需要在初始化中插入配置项即可（粘贴后会自动调用图片上传接口将图片传至服务器中）:
paste_data_images: true, // 设置为“true”即允许粘贴图像，而将其设置为“false”则不允许粘贴图像。
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>