ckeditor4.x版，折叠工具栏时，编辑框高度不跟随变化，怎么处理?

<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就行了。试试看！

解决方案 »

  1.   

    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的话，只要传入一个标签名就行了。
    返回值，和上面说的一样。
      

  2.   

    突然感觉，这个估计是ckeditor4.x的一个BUG吧，之前用3.X的版本，好像没发现这个问题啊，求高人解决。
    PS：刚才用IE11测试了下，似乎高度会变化，工具栏收缩时，编辑区变自动变大，但高度还是没符合要求，而chrome浏览器，则完全没变大，看来，这个应该是bug的了。
      

  3.   

    源码还是不要修改的好，可能会影响到其他的功能。改变工具条的那块，肯定会有一个事件被触发吧，在触发这个事件的元素上，再把自己写的这个，改变高度的事件绑定上去就行了啊。使用addEventListener和attachEvent的方法，反正绑定多个事件是可以的。更直接一点的说法，比如你之前是在点击一个按钮时，工具条就会变化，那么就把现在这个功能，也绑定到这个按钮的点击事件上面去。当然，这么做，可能会使得后期维护出现难度，不过你如果是用的插件的话，应该也没有问题，插件也没有什么要维护的，想更新的时候，就换最新版本的插件好了。。
      

  4.   


    看了下，展开收获的HTML代码是：<a title="展开工具栏" id="cke_1_toolbar_collapser" tabindex="-1" class="cke_toolbox_collapser cke_toolbox_collapser_min" onclick="CKEDITOR.tools.callFunction(210)"><span class="cke_arrow">◀</span></a>很明显，那要在：CKEDITOR.tools.callFunction(210)这个函数里边改变编辑区高度啊，那不去源码里边代，那怎么改?把事件绑定到a标签上去?具体怎么绑呢?水平有限，请继续指点，多谢
      

  5.   

    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";
    }
    }
    再添加一个更改高度的函数，既然是直接绑定在标签中的，那就更好绑定了。
    直接在标签的onclick中，原来的函数之后，在放一个就行了。
    比如:
    onclick="CKEDITOR.tools.callFunction(210);changeHeight(500);"changeHeight传入的值，就是要变成的高度。
    这个就得注意一下，在点击展开，和点击收缩时，都这么调用，只是传入的值，要不同才行。你自己试试传入多大的值，适合就改成多大即可。不过，这样估计在之前支持高度变化的浏览器上面，高度就会变化两次，你试试呗。
      

  6.   


    onclick="CKEDITOR.tools.callFunction(210);changeHeight(500);"
    把两个函数绑定到a上，貌似不可行啊
    我的作法是：
    先求到a对象，然后这样绑定：
    a.onclick = function(){
    CKEDITOR.tools.callFunction(210);
    changeHeight(500);
    }
    这样做貌似可行啊，但实际上，折叠变没效果了呢。
    也就是说，只有重新绑定onclick，去点击这个折叠工具栏，点击就没反应了，不知道问题出在那里呢?
    我就算这样写也没效果：
    a.onclick = function(){
    CKEDITOR.tools.callFunction(210);
    //changeHeight(500);
    }
    看来直接这样绑定单击事件不可靠啊，有影响
      

  7.   

    onclick="CKEDITOR.tools.callFunction(210);changeHeight(500);"这个里面，两个函数调换个顺序，因为有可能CKEDITOR.tools.callFunction这个里面有一个功能，就是阻止a标签的默认动作，这个时候，就只能执行一个函数，你换下试试。如果这种方式不行，你改其他的方式肯定也是有问题的这种方式虽然算是耦合度最高的，不推荐使用的，但是兼容问题什么的，一点都不存在。
    最通用的，最简单，最不用担心兼容问题的写法了。一般不用考虑这个方法带来的问题，如果有问题，就肯定是某一个函数内部的问题了。试试看。
      

  8.   

    不行，一绑定单击后就不能折叠了，
    就算这样子也不行：
    a.onclick = CKEDITOR.tools.callFunction(210);
    打算换思路了，不用它这个函数CKEDITOR.tools.callFunction(210);
    而去找到具体的折叠/展开方法代码，估计只能这样做了吧，但这个要去研究源码看怎么实现了，麻烦了，不好弄啊。
      

  9.   

    这样子绑定：
    a.onclick = "CKEDITOR.tools.callFunction(210);changeHeight(500);";
    也没效果，并且好像没有这样子写的吧，值应该是函数才行。把CKEDITOR.tools.callFunction(210)写到
    changeHeight(500)中去，也没效果，试了。
      

  10.   

    我晕的很，你在最初给的函数是
    CKEDITOR.tools.callFunction(222,event);这个样式的，为啥后面贴代码的时候，就没有第二个参数了呢？第二个参数是必须要传入的。而且只能写成event。
      

  11.   

    如果是因为落下这个event导致的问题，那就不需要后面给的那个函数了，直接写成插件自带的那个就行了。
      

  12.   

    应该跟event无关啊，加了也变成点击没反应了啊
    ，困了，休息去了，改天再好好研究了，还是很感谢你认真指点啊，学了不少
      

  13.   

    今天又认真测试了下，发现，上面那个可行：
    a.onclick = function(){
    CKEDITOR.tools.callFunction(210);
    changeHeight(500);
    }
    原来是自己测试时，大意，将210改为了其它数据，200，
    a.onclick = function(){
    CKEDITOR.tools.callFunction(200);//200是不行的，准确说非210的值都不行的，都会造成点击工具栏无效，很奇怪的一个函数，原来，工具栏收缩，必须要有210这个值才行，大意了。
    changeHeight(500);
    }
    好了，结了，感谢各位参与。