啓示:javascript
搜索引擎:百度上啥都有,傻傻找API和文檔找不到的時候必定記得去搜索引擎上面找一找css
網頁產物:ueditor是網頁的產物,沒有API咱們照樣能夠像調網頁元素那樣調,同樣的html
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>
a、官網的api和文檔:官網的api和文檔是首選,可是必然不可能覆蓋全部java
b、搜索引擎:而後直接上搜索引擎找也能夠看作首選,api
c、直接改:直接頁面查看元素和代碼直接改,由於都是網頁產物,徹底都是OK的瀏覽器
其高度通常不考慮,給個初始高度,而後任其自動擴展就行,對於其寬度,有兩種思路,一種是調節其所在的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 ,因而,咱們能夠用這個類來調節,走起:ui
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.htmlspa