• 百度ueditor上传图片时如何设置默认宽高度


    百度ueditor上传图片时如何设置默认宽高度

    一、总结

    一句话总结:直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度

    直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度

    1、如何改变ueditor.umeditor中插件的大小?

    其实也就是改css
    或者用js改css

    2、如何修改所有html,js插件的样式,或者插件里面的插件样式?

    css
    或者js控制的css

    3、解决不同浏览器上面的css属性适配问题?

    用基础css,或用js

    这个也可以用来解决ueditor插入图片的大小,以及各种

    用基础属性,用js

    在chrome和手机浏览器上面显示不同

     1     function updateGroupDiscussPictureSize(){
     2         $('.pet_sixin_to_r_nr img').each(function () {
     3             if(parseInt($(this).css('width'))>100){
     4                 $(this).css('width','100px');
     5             }
     6         });
     7         $('.pet_sixin_form_r_nr img').each(function () {
     8             if(parseInt($(this).css('width'))>100){
     9                 $(this).css('width','100px');
    10             }
    11         });
    12     }

    二、百度ueditor上传图片时设置默认宽高度 

    参考:百度ueditor上传图片时设置默认宽高度 - okokchina的专栏 - CSDN博客
    https://blog.csdn.net/okokchina/article/details/46550105

    我也是逼了dog了,百度编辑器官方文档其实做的很不详细,都是些基本的用法,想设置个上传图片默认尺寸都找不到相应文档。进过哥的不屑努力,终于是配置好了,其实也是很简单的,加了一行代码。。。。。

    找到编辑器根目录下面的ueditor.all.js ,一打开吓到哥了,上万行代码,不过不要怕,search 一下 :cllback() 找到这个函数

     function callback(){
                        try{
                            var link, json, loader,
                                body = (iframe.contentDocument || iframe.contentWindow.document).body,
                                result = body.innerText || body.textContent || '';
                            json = (new Function("return " + result))();
                            link = me.options.imageUrlPrefix + json.url;
                            if(json.state == 'SUCCESS' && json.url) {
                                loader = me.document.getElementById(loadingId);
                                loader.setAttribute('src', link);
                                loader.setAttribute('_src', link);
                                loader.setAttribute('title', json.title || '');
                                loader.setAttribute('alt', json.original || '');
                                loader.setAttribute('style','max-650px');//这里就是哥加入的代码
                                loader.removeAttribute('id');
                                domUtils.removeClasses(loader, 'loadingclass');
                            }

    看看注释部分,其实就是给img 上传的图片价格属性就行了! 你可以任意增加属性,就这么任性。
     
    好使,在min.js中配置这个就好了,因为前端页面饮用的是min.js
     
    在min.js中可以搜索setAttribute("src"

    三、百度UEditor插入图片尺寸自动适应编辑框大小问题

    百度UEditor

    昨天我使用百度UEditor,上传大图变的好大。不能够自动的缩写和编辑框内大小一样,找了半天代码没发现怎么修改,让它上传缩小,在config中 “imageCompressBorder”: 1600, /* 图片压缩 最长边限制 */没什么作用呢。最后还是被我找到了,下面我就来给大家说说如果才能UEditor插入图片尺寸自动适应编辑框大小
    首先我们找到如下文件:

    ueditor hemesiframe.css

    从这个文件里,就能看到有这一句:/*可以在这里添加你自己的css*/

    哈哈,接下来,我们写css吧:

    ———————————-

    img {
    max- 100%; /*图片自适应宽度*/
    }
    body {
    overflow-y: scroll !important;
    }
    .view {
    word-break: break-all;
    }
    .vote_area {
    display: block;
    }
    .vote_iframe {
    background-color: transparent;
    border: 0 none;
    height: 100%;
    }
    #edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/

    ————————————
    把以上横线里面的代码复制到编辑里面 保存 上传覆盖然后清理一下浏览器的缓存都可以使用了。

    大家可以修改后的预览:

    百度UEditor

    四、umeditor编辑器插件图片尺寸太大问题解决

    主要看懂UM.commands函数

    这个问题的处理办法在编辑器的image插件中其实是有解决方案的,只是被注释掉了。

    首先说下在网上找到的两种方法:

    1、在ueditor hemesiframe.css添加样式 ‘max- 100%’,找了下在umeditor中没有这个文件;

    2、是在umeditor.js中添加‘width=100%’的属性;

    第二种办法是可行的,只是在页面中我引用的是umeditor.min.js文件,要改这里比较麻烦。

    不过也正是从这里的ci.width得到启发---编辑器在插件图片时,是会根据图片插件传入的参数设置图片尺寸;

    于是,我找到了 image.js文件中,点击确定按钮执行的代码:

    这里的list就是传到umeditor.js中的opt参数,也就是待插入图片的相关信息;根据这条线索找到了当前文件中的getAllPic函数:

    上图中有一段被注释的代码,它就是调用scale计算图片尺寸的。至于为什么会被注释掉,还不清楚。

    打开注释,并在arr.push时添加到width和height属性就可以了,如下:

    从上述代码中可以看到,它是通过编辑器的宽度来对图片尺寸进行等比例计算。

     
  • 相关阅读:
    清空DB
    C#生成PDF
    C#程序打包发布
    用C#实现生成PDF文档的方法
    SCOPE_IDENTITY、IDENT_CURRENT 和 @@IDENTITY的比较
    如何在DataGridView中实现下拉列表可变的联动
    TreeList控件实现数据过滤功能
    SQL函数大全
    远程链接调用sql脚本
    gb2312简繁转换js兼容各种浏览器
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/10253259.html
Copyright © 2020-2023  润新知