正文 

当前位置： 首页 > 问答 >

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

     2023-03-22     155

关键词：

【中文标题】Summernote富文本编辑器-限制图片高于特定高度和宽度【英文标题】：Summernote rich text editor-restrict image above particular height and width 【发布时间】：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');

;

【问题讨论】：

【参考方案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');
    
;

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

【讨论】：

富文本编辑器summernote的基本使用(代码片段)

summernote比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。官方文档地址：https://summernote.org/getting-started我是用到cdn引入　　　　<!--插件引入--><linkhref="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summerno... 查看详情

summernote富文本编辑器

<!doctypehtml><head><title></title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1,user 查看详情

实践简洁大方的summernote富文本编辑器插件的用发——实例篇

实例化后的summernote是这样子的 很漂亮对吧，而我做成页面效果是这样的： 先说说实例化一个summernote的方法把，其实也不难，jq选择器选择一个要变成富文本编辑器的元素然后调用summernote方法传入一个对象作为参数便可... 查看详情

我怎么知道 Summernote（富文本编辑器）是专注的？

】我怎么知道Summernote（富文本编辑器）是专注的？【英文标题】：HowtoIknowthatSummernote(richtexteditor)isfocused?【发布时间】：2020-05-1909:29:42【问题描述】：我有一个使用codeigniter的项目。可以选择使用快捷键打开模式。就像，当我单... 查看详情

summernote 富编辑器文本区域高度变为零

】summernote富编辑器文本区域高度变为零【英文标题】：summernotericheditortextareaheightbecomezero【发布时间】：2018-07-2002:26:34【问题描述】：我正在使用https://summernote.org/富文本编辑器。将Summernote编辑器放置在引导模式中。在模态显示... 查看详情

summernote富文本编辑器-rails集成

使用官方提供的CDN服务将下面一段加入layout文件中<linkhref="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"rel="stylesheet"><scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery. 查看详情

图片上传到 Summernote 编辑器中的文件夹

】图片上传到Summernote编辑器中的文件夹【英文标题】：ImagesuploadtofolderinSummernoteeditor【发布时间】：2016-02-1815:43:15【问题描述】：我有asp.netmvc4应用程序。在那个应用程序中我有表单，在那个表单中我有summernote富文本编辑器。但... 查看详情

summernote - 在 HTML 视图中更新代码

】summernote-在HTML视图中更新代码【英文标题】：summernote-updatecodewheninHTMLview【发布时间】：2015-04-2020:29:15【问题描述】：我正在使用SummernoteWYSIWYG编辑器，但我陷入了这个问题：每次视图从富文本更改为HTML时，我都想进行一些计... 查看详情

MS Access 富文本编辑工具中的字体限制

】MSAccess富文本编辑工具中的字体限制【英文标题】：FontlimitationinMSAccessrichtextedittool【发布时间】：2019-04-0419:54:09【问题描述】：使用MSAccess(2010+)富文本控件。但是，编辑工具仅提供有限数量的字体点大小，例如6、8、10、12；与... 查看详情

如何使用summernote通过ajax同时传递内容和图片

】如何使用summernote通过ajax同时传递内容和图片【英文标题】：Howtousesummernotetopasscontentandimagesatsametimeviaajax【发布时间】：2019-05-1616:10:39【问题描述】：我正在尝试创建一个wp类型的文本编辑器来上传帖子的图像和内容。所以我... 查看详情

百度富文本编辑器ueditor自定义上传图片接口

如下图： 然后修改ueditor.all.js   查看详情

Summernote 显示在所有位置（Laravel 5.2）

】Summernote显示在所有位置（Laravel5.2）【英文标题】：Summernoteisdisplayedatallpositions(Laravel5.2)【发布时间】：2016-12-1022:38:48【问题描述】：我正在使用laravel5.2。当我点击“编辑组名”时，summernote文本编辑器显示在每个组名下方，如... 查看详情

使用百度umeditor富文本编辑器，修改自定义图片上传，修改源码

富文本编辑器，不多说了，这个大家应该都用到过，至于用到的什么版本，那就分很多种CKEditor：很早以前叫FCK，那个时候也用过，现在改名了，比较流行的一个插件，国外很多公司在用UEDITOR：百度开发的插件，lite版是UMEasyUI编... 查看详情

富文本编辑器handyeditor，上传和预览图片的host地址不一样(代码片段)

使用富文本编辑器(官网)时，大多时候都会用到图片上传，但是下载的富文本编辑器的默认配置是只有一个上传地址的host的。varhe=HE.getEditor(‘editor‘,autoHeight:true,autoFloat:false,topOffset:0,uploadPhoto:true,uploadPhotoUrl:uploadDomain,uploadPhotoHan... 查看详情

ios小技能：富文本编辑器(下篇)(代码片段)

...：核心代码逻辑II工具栏设计（含demo）2.1工具栏在富文本编辑器的底部2.2工具栏在富文本编辑器的顶部III常见问题3.1隐藏键盘失去焦点时，图片内容被清空3.2插入图片无效3.3插入的网络图片只能添加到最后位置seealso引言富文本... 查看详情

轻量级富文本编辑器quilleditor结合iview的使用

...ue-quill-editor是我们在使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，有... 查看详情

复制word图文到富文本编辑器

参考技术A大部分富文本编辑器能做到还原word的文本格式，例如字体字号表格以及布局相关的要素还原。但普遍对图片的支持比较差，都需要手动点击图片上传按钮，然后在光标的当前位置，插入指定的图片。这样用户的体验就... 查看详情

百度富文本编辑器支持从word复制粘贴保留格式和图片的插件

...息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc来快速实现这个word粘贴到富文本编辑器里面方法一：工具/原料百度doc任意富文本编辑器，以UEDdito... 查看详情