UEditor自动调节宽度

一、总结

一句话总结：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>

1、网页插件修改样式常见方法？

官网 api 文档

搜索引擎

直接

a、官网的api和文档：官网的api和文档是首选，但是必然不可能覆盖所有

b、搜索引擎：然后直接上搜索引擎找也可以看做首选，

c、直接改：直接页面查看元素和代码直接改，因为都是网页产物，完全都是OK的

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

参考： UEditor手动调节其宽度 - 亮将 - 博客园
https://www.cnblogs.com/liangjiang/p/5805580.html