zoukankan      html  css  js  c++  java
  • UEditor手动调节其宽度

    其高度一般不考虑,给个初始高度,然后任其自动扩展就行,对于其宽度,有两种思路,一种是调节其所在的DIV的宽度,让其自动填充,另一种是直接调节编辑器的宽度:

    adjust_editor_size: function () {
                        //注:由于编辑器的宽度官方并没有给出有效的调节方法,这里我们用调节其所属DIV的宽度的方式来调其宽度(让编辑器自动跟随其父变化而变化),所以,此方法应先于编辑器的生成而调用。
                        return;
                        var editor_parent = $('.editor_parent');
                        var explain_w = editor_parent.prev().width();
                        var area_w = $('.center').width();
    
                        var editor_parent_w = area_w - explain_w - 100;
    
                        editor_parent.width(editor_parent_w);
                    }    

    但上边的方法有个缺点,那就是当窗口大小变化时就不顶用了,于是,我们可以在浏览器中看到,我们的编辑器有一个固定的样式类叫 edui-editor ,于是,我们可以用这个类来调节,走起:

    editor_resize: function () {
                        var editor_parent = $('.editor_parent');
                        var explain_w = editor_parent.prev().width();
                        var area_w = $('.center').width();
    
                        var editor_parent_w = area_w - explain_w - 100;
    
                        var editor = $('.edui-editor');
                        //editor.width(editor_parent_w);
                        editor.animate({  editor_parent_w + "px" });
                    }

    搞定的同时,我们还发现,只要调一下 edui-editor 的高度,其直系子DIV的宽度都会自动跟着动,还好,剩心不少啊!

    $(window).resize(function () {
      page.fn.editor_resize();
    });
    
    page.fi.iEditor = page.fk.kEditor = UE.getEditor('editor_container', {
      toolbars: [[
                                'source', '|', 'undo', 'redo', '|'
                                , 'fontfamily', 'fontsize', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', '|'
                                , 'superscript', 'removeformat', 'formatmatch', '|',
                                'forecolor', 'backcolor', '|',
                                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                                'touppercase', 'tolowercase', '|',
                                'link', 'unlink', '|',
                                'emotion', 'scrawl', 'simpleupload', 'imagenone', 'imageleft', 'imageright', 'imagecenter'
      ]]
    });
    
    page.fi.iEditor.ready(function () {
      page.fn.editor_resize();
    });
  • 相关阅读:
    奇虎360安全牛人全球挑战赛无线部…
    Portugal 2 1 minute has Pipansihuan Germany and USA tacit or kick the ball
    求最大公约数和最小公倍数
    JQuery的Ajax跨域请求的解决方式
    从Java到C++——从union到VARIANT与CComVariant的深层剖析
    抽卡概率的測试
    jquery序列化表单以及回调函数的使用
    Notepad++插件安装和使用和打开大文件
    Android开发遇到的问题
    bzoj3068: 小白树
  • 原文地址:https://www.cnblogs.com/liangjiang/p/5805580.html
Copyright © 2011-2022 走看看