UEditor自動調節寬度

UEditor自動調節寬度

1、總結

一句話總結：ueditor是網頁的產物，沒有API咱們照樣能夠像調網頁元素那樣調，同樣的，這裏是改變插件的css樣式實現

啓示：

百度 文檔 引擎

ueditor 網頁 產物 調

搜索引擎：百度上啥都有，傻傻找API和文檔找不到的時候必定記得去搜索引擎上面找一找

網頁產物：ueditor是網頁的產物，沒有API咱們照樣能夠像調網頁元素那樣調，同樣的

 1 <!-- ueditor -->
 2 <script type="text/javascript">  3 var $=jQuery;  4 var ueditor_width=$('.myEditor').width();  5 //$('.myEditor').css({'border':'5px ridge #ff00ff'});  6  //alert(width);  7 UE.getEditor('{$ueditorID}',{  8 initialFrameWidth:ueditor_width,  9 initialFrameHeight:200, 10  }); 11 12 //ueditor自動調節高度函數 13 function ueditor_setWidth(){ 14 var ueditor_width=$('.myEditor').width(); 15 $('.myEditor #edui1').css('width',ueditor_width); 16  } 17 18 //頁面尺寸改變編輯器的大小自動改變 19 $(window).resize(function(){ 20  ueditor_setWidth(); 21  }); 22 </script>

 

 

一、網頁插件修改樣式常見方法？

官網 api 文檔

搜索引擎

直接

a、官網的api和文檔：官網的api和文檔是首選，可是必然不可能覆蓋全部

b、搜索引擎：而後直接上搜索引擎找也能夠看作首選，

c、直接改：直接頁面查看元素和代碼直接改，由於都是網頁產物，徹底都是OK的

 

 

 

 

2、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();
});

 

參考： UEditor手動調節其寬度 - 亮將 - 博客園
https://www.cnblogs.com/liangjiang/p/5805580.html