Summernote富文本编辑器-限制图片高于特定高度和宽度答案

【问题标题】：Summernote rich text editor-restrict image above particular height and widthSummernote富文本编辑器-限制图片高于特定高度和宽度
【发布时间】：2021-11-28 22:58:46
【问题描述】：

当我在编辑器中上传图片时，我可以找到它的大小。但我希望它的高度和宽度限制高于特定限制的高度和宽度。以下是我上传图片时得到的结果。

See image to image upload result

对于尺寸限制，它的工作方式如下-

onImageUpload(images, insertImage) {
    if (images[0].size <= 100000) {
        for (let i = 0; i < images.length; i++) {
            const reader = new FileReader();
            reader.onloadend = () => {
                insertImage(reader.result);
            };
            reader.readAsDataURL(images[i]);
        }
    } else {
        alert('Image not saved, max allowed image size is 100kb');
    }

};

【问题讨论】：

标签： javascript reactjs file-upload rich-text-editor summernote

【解决方案1】：

你用的是什么编辑器？ UEditor 是一个非常好的富文本编辑器。

【讨论】：

我使用的是summernote富文本编辑器

【解决方案2】：

onImageUpload(images, insertImage) {
    console.log('onImageUpload', images);
    if (images[0].size <= 100000) {
        for (let i = 0; i < images.length; i++) {
            const reader = new FileReader();
            reader.onloadend = () => {
                var i = new Image();
                i.src = reader.result;
                i.onload = function () {
                    if (i.width <= 200 && i.height <= 200) {
                        insertImage(reader.result);
                    } else {
                        cogoToast.warn('Image not saved, image width and height should be less than 200*200');
                    }
                };
            };
            reader.readAsDataURL(images[i]);
        }
    } else {
        cogoToast.warn('Image not saved, max allowed image size is 100kb');
    }
};

它会以这种方式工作。谢谢！

【讨论】：