松鼠的博客

TinyMCE 編輯器支持粘貼圖片，但是自動會將圖片轉(zhuǎn)換成 base64 編碼，這樣將內(nèi)容提交到后臺，數(shù)據(jù)會很大。

圖 | TinyMCE

本文內(nèi)容配置TinyMCE（版本：5.10.0）向編輯器中粘貼圖片自動上傳到后臺，以下為配置代碼：

tinymce.init({
selector: '#textarea',
plugins: 'preview autolink directionality visualchars fullscreen image link template code table pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autoresize imagetools paste',
paste_data_images: true,
//粘貼圖片后，自動上傳
urlconverter_callback: function(url, node, on_save, name) {
console.log('圖片鏈接', url );
return url;
},
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//轉(zhuǎn)化為易于理解的file對象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'upload.php');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
//failFun('Invalid JSON: ' + xhr.responseText);
failFun( '上傳失敗' );
return;
}
succFun(json.location);
};
formData = new FormData();
formData.append('file', file, file.name );//此處與源文檔不一樣
xhr.send(formData);
}
});

配置項
plugins中添加paste；
paste_data_images設(shè)置為true；
添加：

urlconverter_callback: function(url, node, on_save, name) {
console.log('圖片鏈接', url );
return url;
}
以下是配置后粘貼圖片效果，和上傳效果一樣。

圖 | TinyMCE

參考文章：http://blog.ncmem.com/wordpress/2023/12/27/tinymce%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e7%b2%98%e8%b4%b4%e5%9b%be%e7%89%87%e8%87%aa%e5%8a%a8%e4%b8%8a%e4%bc%a0%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3/

歡迎入群一起討論