tinyMCE實現(xiàn)遠(yuǎn)程圖片上傳并使用的配置
最近Vue后臺項目開發(fā)中业岁，使用tinyMCE作為富文本編輯器。作為富文本編輯器，免不了要跟圖片打交道锚沸，所以好好研究了一下文檔，發(fā)現(xiàn)tinyMCE已經(jīng)實現(xiàn)了遠(yuǎn)程上傳圖片并調(diào)用的功能（在看文檔之前涕癣，已經(jīng)有g(shù)oogle過相關(guān)信息哗蜈，秉持著喜歡原滋原味的功能，所以還是去啃一下文檔）,配置還是挺簡單的坠韩，直接附上配置：
ps: 本文發(fā)布時距潘，使用的是tinyMCE 4.7.4版本
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, // 是否開啟圖片標(biāo)題設(shè)置的選擇，這里設(shè)置否
automatic_uploads: true, //開啟點擊圖片上傳時只搁，自動進(jìn)行遠(yuǎn)程上傳操作
images_upload_handler: (blobInfo, success, failure) => { // 圖片異步上傳處理函數(shù)
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; //在該位置音比，如果您的后端人員返回的字段已經(jīng)包含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', // 圖片上傳的具體地址氢惋，該選項一定需要設(shè)置洞翩，才會出現(xiàn)圖片上傳選項
以上是本人使用時的簡單配置稽犁，如有不當(dāng)之處或者有更好的做法，感謝指正Ｉб凇Ｒ押ァ！歡迎交流＠赐馈Ｂ亲怠！
