要限制上传的图片大小,您可以使用 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,我们会弹出一个警告框,并停止上传。如果大小在限制范围内,我们将继续上传图片。在插入图片时,我们还添加了一个标签来显示图片的大小。

tinymce 限制上传的图片大小 大于1M 提示并且关闭加载调可以点击继续重新选择上传

原文地址: https://www.cveoy.top/t/topic/bO6h 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录