博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
UEditor自动调节宽度
阅读量:6412 次
发布时间:2019-06-23

本文共 2486 字,大约阅读时间需要 8 分钟。

UEditor自动调节宽度

一、总结

一句话总结:ueditor是网页的产物,没有API我们照样可以像调网页元素那样调,一样的,这里是改变插件的css样式实现

启示:

百度 文档 引擎
ueditor 网页 产物 调

搜索引擎:百度上啥都有,傻傻找API和文档找不到的时候一定记得去搜索引擎上面找一找

网页产物:ueditor是网页的产物,没有API我们照样可以像调网页元素那样调,一样的

1 
2

 

 

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({ 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

 

 

 
你可能感兴趣的文章
c++ map: 使用struct或者数组做value
查看>>
列表中的陷阱
查看>>
算法-无重复字符的最长子串
查看>>
java.lang.ClassNotFoundException: org.apache.axis2.transport.http.AxisAdminServlet
查看>>
SSL协议详解
查看>>
leetcode-496-Next Greater Element I
查看>>
Android Studio自带的抓图和录像功能
查看>>
教妹学 Java:动态伴侣 Groovy
查看>>
第三周作业
查看>>
对象.原型链,函数.原型对象
查看>>
动态 K th
查看>>
MVC 中引入Jquery文件的几种方法
查看>>
servlet容器开发要点
查看>>
Idea debugger 无法启动-unable to open debugger port , java.net.SocketException "socket closed"
查看>>
100c之54: 说谎族,诚实族和两面族
查看>>
[转载]使用Cufon技术实现Web自定义字体
查看>>
c#获取电脑硬件信息参数说明( Win32_PhysicalMedia )
查看>>
9.Java通过axis调用WebService
查看>>
7. Spring Boot 启动加载数据 CommandLineRunner
查看>>
请问两个div之间的上下距离怎么设置
查看>>