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