ckeditor4.x版，折叠工具栏时，编辑框高度不跟随变化，怎么办
日期：2014-05-16 浏览次数：20432 次
ckeditor4.x版，折叠工具栏时，编辑框高度不跟随变化，怎么处理?
先看两张图：
![]()
按理说，第二张图，编辑框应变大，点展开时，编辑框应该变小，但实际没变化，这不是我想要的，怎么弄呢?
测试环境是：chrome浏览器，我用的是最新4.3版，实际应该4.x版都有这个问题吧。
我点F12查看无素，发现，控制编辑框高框的是：
具体来说是这个高度：
<div id="cke_88_contents" class="cke_contents cke_reset" role="presentation" style="height: 222px;">
初步的解决思路是，展开/折叠工具栏时，改开这个高度即可，但发现，没办法得到这个对象（id值是变化的），怎么办?
另外，发现，展开/折叠工具栏时，函数是：CKEDITOR.tools.callFunction(222, event);
222即为高度，但具体要怎么用呢?学艺不精，请大侠指点，多谢。
------解决方案--------------------
像这样取试试，如果能找到对应的，就会返回对应的dom元素，如果找不到就会返回null
所以得到返回值，使用的时候，要先判断是不是找到了对应的dom元素。
之后，就按照设置属性的样式设置就行。
三个参数：标签名，className，role的值。看你给的标签样式写的。其实这些东西，还是根据id进行判断最好，就算是id有所区别，但是id的值，肯定也是有一定的规则的，其中有一部分肯定是不会变化的。
先看两张图：
按理说，第二张图，编辑框应变大，点展开时，编辑框应该变小，但实际没变化，这不是我想要的，怎么弄呢?
测试环境是：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的值，肯定也是有一定的规则的，其中有一部分肯定是不会变化的。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
