TinyMCE插入图片默认的是直接插入图片地址的,而通常我们希望能直接将图片上传至我们的服务器并返回图片的服务器地址,前面在vue实战024:Vue-Quill-Editor自定义图片上传中也提到了图片上传,原理是一样的。当我们选择图片后将图片上传服务器,服务器返回相应的图片链接,前端将图片链接插入到富文本的指定光标上位置,在提交富文本的内容的时候图片只是以图片地址提交。
TinyMCE提供了图片异步上传处理函数images_upload_handler让用户配置上传图片的相关参数,这里有三个参数,图片数据(blobinfo是一个对象,包含上传文件的信息),成功时的回调函数(success,上传成功的时候向success传入一个图片地址),失败时的回调函数(failure,失败的时候向 failure 传入报错信息),这里我们可以通过images_upload_handler来重新自定义一个上传方法以便适配我们的项目。
更改上传方法我们同样在tinymce的init中去配置,如果你直接在上文vue实战025:配置TinyMCE富文本编辑器中的init中添加images_upload_han