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({ width: 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();
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM