После долгих хлопот с этим изменяющим размер материала на ckeditor 4, я сделал это, и он прекрасно работает для меня:
в config.js:
// prevent flashing of resizing by setting the content panel to zero height before it is resized
config.height = '0px';
config.width = '100%';
JQuery:
$(document).ready(function(){
// resize the editor(s) while the instance is ready
CKEDITOR.on('instanceReady', function() {
var textEditHeight = $(".textPanel").height();
var ckTopHeight = $("#cke_1_top").height();
var ckContentsHeight = $("#cke_1_contents").height();
for (var i = 1; i < 10; i++) {
$("#cke_"+i+"_contents").height( (textEditHeight - ckTopHeight - 10) + "px");
}
});
// resize the editor(s) while resizing the browser
$(window).resize(function(){
var textEditHeight = $(".textPanel").height();
var ckTopHeight = $("#cke_1_top").height();
var ckContentsHeight = $("#cke_1_contents").height();
for (var i = 1; i < 10; i++) {
$("#cke_"+i+"_contents").height( (textEditHeight - ckTopHeight - 10) + "px");
}
});
});
У меня есть несколько экземпляров редактора одинакового размера во вкладках, для каждого языка, следовательно, для цикла for. Если у вас есть один редактор, вы можете оставить эту строку и использовать стандартный идентификатор cke_1_contents.
В этом примере высоты взяты из первой панели инструментов редактора (cke_1_top) и панели содержимого (cke_1_contents). Высота .textPanel - это окружающий div, в который должен вписываться редактор. Я добавил 10px, потому что мне это нужно было для моего макета.
Я думаю, что он может быть немного более эффективным (он инициирует изменение размера столько раз, сколько есть редакторов), но сейчас он, наконец, работает безупречно во всех моих последних браузерах (например, Chrome и Safari).