ckeditor自动填满容器

  ckeditor设置了高度为100%百分比时并不会自动将容器填充满,通过firebug查看生成的ckeditor代码结构后,如下图,编辑器的td设置了高度为height:100%的样式,但是并没有实现容器的完整填充。

ckeditor自动填满容器

  

ckeditor有自动全屏的功能,如果是想自动填充整个显示窗口,而不是指定的容器,可以通过调用

CKEDITOR.instances.content.execCommand('maximize');

来实现全屏,注意红色部分为实例名

  注意:replace的textarea要使用id,使用name的话红色部分ckeditor会自动生成一个实例名称,而不是对应的name值,但是id和ckeditor的实例名是一样的。

  通过firebug查看ckeditor全屏后的代码发现,其实ckeditor全屏显后,编辑器的高度是通过计算后得到的,是一个具体的数字,而不是百分比。

 

  所以ckeditor要实现指定容器的填充显示,我们可以计算出编辑器的高度,然后赋值给编辑器的父容器td。ckeditor的结构为一个3行的表格,第一个放置工具栏,第二个就是编辑器区域,第三个为状态栏【如果没有通过配置去掉的话】,所以编辑器的区域的高度就是容器高度-(工具栏+状态栏的高度),计算出来后设置编辑器区域td的height就行了。

 

  如果要初始化完毕后自动填充容器,可以使用instanceReady事件,具体参考:如何判断ckeditor是否已经加载和初始化完毕

示例代码

 var h = document.getElementById('content').offsetHeight; //得到textarea的高度
CKEDITOR.replace('content', {height:'100%'});//设置height:100%没用
CKEDITOR.on('instanceReady', function (e) {
  var td = document.getElementById('cke_contents_' + e.editor.name), tbody = td.parentNode.parentNode;
  td.style.height = h - tbody.rows[0].offsetHeight - tbody.rows[2].offsetHeight + 'px';
})

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:ckeditor自动填满容器

评论(0)Web开发网
阅读(1283)喜欢(0)JavaScript/Ajax开发技巧