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