TinyMCE作为富文本编辑器，免不了要跟图片打交道，所以好好研究了一下文档，发现tinyMCE已经实现了远程上传图片并调用的功能,配置还是挺简单的，直接附上配置。
tinymce.init({
selector: #tinymceEditer,
branding: false,
elementpath: false,
height: height,
language: zh_CN.GB2312,
menubar: edit insert view format table tools,
plugins: [ //image跟imagetools为开启图片上传的插件功能
advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools,
searchreplace visualblocks visualchars code fullpage,
insertdatetime media nonbreaking save table contextmenu directionality,
emoticons paste textcolor colorpicker textpattern imagetools codesample
],
toolbar1: newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample,
autosave_interval: 20s,
image_advtab: true, //开启图片上传的高级选项功能
table_default_styles: {
width: 100%,
borderCollapse: collapse
},
image_title: false, // 是否开启图片标题设置的选择，这里设置否
automatic_uploads: true, //开启点击图片上传时，自动进行远程上传操作
images_upload_handler: (blobInfo, success, failure) => { // 图片异步上传处理函数
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open(POST, /api/handler-upload-img.su?method=country-img);
xhr.onload = function () {
var json;
if (xhr.status !== 200) {
failure(HTTP Error: + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
// console.log(json);
json.location = util.baseURL + json.data.filename; //在该位置，如果您的后端人员返回的字段已经包含json.location信息，则该处可以省略
if (!json || typeof json.location !== string) {
failure(Invalid JSON: + xhr.responseText);
return;
}
success(json.location);
};
formData = new FormData();
formData.append(file, blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
},
images_upload_base_path: util.baseURL, // 图片上传的基本路径
images_upload_url: util.apis.upload_img + ?method=country-img, // 图片上传的具体地址，该选项一定需要设置，才会出现图片上传选项
