欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

ckeditor4.x版,折叠工具栏时,编辑框高度不跟随变化,怎么办

更新时间: 2014-01-05 01:50:56 责任编辑: Author_N1

 

ckeditor4.x版,折叠工具栏时,编辑框高度不跟随变化,怎么处理?
先看两张图:



按理说,第二张图,编辑框应变大,点展开时,编辑框应该变小,但实际没变化,这不是我想要的,怎么弄呢?
测试环境是:chrome浏览器,我用的是最新4.3版,实际应该4.x版都有这个问题吧。

我点F12查看无素,发现,控制编辑框高框的是:

<div id="cke_88_contents" class="cke_contents cke_reset" role="presentation" style="height: 222px;">
<span id="cke_162" class="cke_voice_label">按 ALT+0 获得帮助</span>
<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" style="width: 100%; height: 100%;" title="所见即所得编辑器, textareafield-1156-inputEl" aria-describedby="cke_162" tabindex="0" allowtransparency="true"></iframe>
</div>

具体来说是这个高度:
<div id="cke_88_contents" class="cke_contents cke_reset" role="presentation" style="height: 222px;">
初步的解决思路是,展开/折叠工具栏时,改开这个高度即可,但发现,没办法得到这个对象(id值是变化的),怎么办?
另外,发现,展开/折叠工具栏时,函数是:CKEDITOR.tools.callFunction(222, event);
222即为高度,但具体要怎么用呢?学艺不精,请大侠指点,多谢。
--参考方法--
<body>
<div class = "aa" role = "aa">1</div>
<div class = "aaa" role = "aaa">2</div>
<div class = "aaaa" role = "abc">3</div>
<div class = "aa" role = "abc">4</div>
<div class = "aaa" role = "bbb">5</div>
<div class = "aaaa" role = "cba">6</div>
    </body>
<script>
function get(ele,className,role){
var allEle = document.getElementsByTagName(ele),
    eleClass = "",
eleRole = "",
reg = null;

for(var i=0,len = allEle.length;i<len;i++){
    eleClass = allEle[i].className;
eleRole = allEle[i].getAttribute("role");
reg = new RegExp("(^\s*
--参考方法--
\s+)"+className+"($\s*
--参考方法--
\s+)")
if(reg.test(eleClass) && eleRole == role){
return allEle[i];
}
}
return null;
}
console.log(get("div","aaa","bbb").innerHTML);


像这样取试试,如果能找到对应的,就会返回对应的dom元素,如果找不到就会返回null

所以得到返回值,使用的时候,要先判断是不是找到了对应的dom元素。

之后,就按照设置属性的样式设置就行。
三个参数:标签名,className,role的值。看你给的标签样式写的。其实这些东西,还是根据id进行判断最好,就算是id有所区别,但是id的值,肯定也是有一定的规则的,其中有一部分肯定是不会变化的。

我做下列的假设,假设id中,只有数字是变化的,那么可以直接使用正则表达式进行判断。
var str1 = "cke_88_contents";
var str2 = "cke_388_contents";
var str3 = "cke_1288_contents";
reg = /^cke\_[\d]+\_contents$/;
console.log(reg.test(str1));
console.log(reg.test(str2));
console.log(reg.test(str3));


这样进行判断,比上面的判断方法,应该会更精确。

如果id就是以这个规则变化,那就把上面的函数改一下,不要class和role了,只要一个id就行了。

试试看!

--参考方法--
function get(ele){
var allEle = document.getElementsByTagName(ele),
reg = /^cke\_[\d]+\_contents$/;

for(var i=0,len = allEle.length;i<len;i++){
    eleId = allEle[i].id;
if(reg.test(eleId)){
return allEle[i];
}
}
return null;
}


上面说错了,入过是按照id的话,只要传入一个标签名就行了。
返回值,和上面说的一样。
--参考方法--
源码还是不要修改的好,可能会影响到其他的功能。

改变工具条的那块,肯定会有一个事件被触发吧,在触发这个事件的元素上,再把自己写的这个,改变高度的事件绑定上去就行了啊。使用addEventListener和attachEvent的方法,反正绑定多个事件是可以的。

更直接一点的说法,比如你之前是在点击一个按钮时,工具条就会变化,那么就把现在这个功能,也绑定到这个按钮的点击事件上面去。

当然,这么做,可能会使得后期维护出现难度,不过你如果是用的插件的话,应该也没有问题,插件也没有什么要维护的,想更新的时候,就换最新版本的插件好了。。
--参考方法--
function get(ele){
var allEle = document.getElementsByTagName(ele),
reg = /^cke\_[\d]+\_contents$/;
for(var i=0,len = allEle.length;i<len;i++){
    eleId = allEle[i].id;
if(reg.test(eleId)){
return allEle[i];
}
}
return null;
}
function changeHeight(value){
var ele = get("div");
if(ele!==null){
ele.style.height = value+"px";
}
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:50:56
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1964/
本文WWW.DOC100.NET DOC100.NET版权所有。