tinymce 限制上传的图片大小 大于1M 提示并且关闭加载调可以点击继续重新选择上传
要限制上传的图片大小,您可以使用 Tinymce 的 image_uploadtab 钩子,并在上传之前检查文件大小。以下是一个示例代码:
tinymce.init({
selector: 'textarea',
plugins: 'image',
toolbar: 'image',
images_upload_handler: function (blobInfo, success, failure) {
if (blobInfo.blob().size > 1048576) { // 1MB
alert('File size exceeds 1MB limit');
return;
}
// continue with image upload
},
setup: function (editor) {
editor.on('preInit', function () {
editor.ui.registry.addButton('image', {
icon: 'image',
tooltip: 'Insert image',
onAction: function () {
editor.execCommand('mceInsertContent', false, '<img src=""/>');
editor.windowManager.open({
title: 'Insert image',
body: [
{
type: 'textbox',
name: 'src',
label: 'Source',
autofocus: true,
onchange: function () {
var input = this;
var value = input.value();
if (value && value.length > 0) {
var xhr = new XMLHttpRequest();
xhr.open('HEAD', value, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
input.parent().find('#size').text(' (' + formatBytes(xhr.getResponseHeader('Content-Length')) + ')');
} else {
input.parent().find('#size').text('');
}
}
};
xhr.send();
} else {
input.parent().find('#size').text('');
}
}
},
{
type: 'label',
name: 'size',
label: '',
text: ''
}
],
onsubmit: function (e) {
var src = e.data.src;
if (src && src.length > 0) {
if (src.indexOf('data:image') === 0) {
editor.execCommand('mceInsertContent', false, '<img src="' + src + '"/>');
} else {
var xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.responseType = 'blob';
xhr.onload = function () {
if (xhr.status === 200) {
var blob = xhr.response;
if (blob.size > 1048576) { // 1MB
alert('File size exceeds 1MB limit');
return;
}
var reader = new FileReader();
reader.onload = function () {
var dataUrl = reader.result;
editor.execCommand('mceInsertContent', false, '<img src="' + dataUrl + '"/>');
};
reader.readAsDataURL(blob);
}
};
xhr.send();
}
}
}
});
}
});
});
}
});
function formatBytes(bytes, decimals) {
if (bytes === 0) return '0 Bytes';
var k = 1024,
dm = decimals || 2,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
在这个代码中,我们使用 images_upload_handler 钩子来检查上传的图片大小。如果大小超过 1MB,我们会弹出一个警告框,并停止上传。如果大小在限制范围内,我们将继续上传图片。在插入图片时,我们还添加了一个标签来显示图片的大小。
原文地址: https://www.cveoy.top/t/topic/bO6h 著作权归作者所有。请勿转载和采集!