使两个编辑器在自动增长时具有相同的大小
make both editors in the same size when they autogrowing
我在一个页面中使用了两个 CKEDITOR 的编辑器,并且我将它们始终保持相同的大小。我用的是auto grow插件,所以试了一下:
CKEDITOR.plugins.addExternal( 'autogrow', location.href + 'ckeditor/autogrow/', 'plugin.js' );
var e1 = CKEDITOR.replace("heb_editor", {extraPlugins: 'autogrow'});
var e2 = CKEDITOR.replace("eng_editor", {extraPlugins: 'autogrow'});
e1.on("resize", r);
e2.on("resize", r);
function r(){
if($("#cke_1_contents").height() > e2.config.height)
$("#cke_2_contents").height($("#cke_1_contents").height());
else
$("#cke_1_contents").height($("#cke_2_contents").height());
}
没用。它确实将第二个编辑器的大小调整为第一个编辑器的大小,但它没有在需要时将第一个编辑器的大小调整为第二个的大小。怎么办?
这是一个 JSfiddle:http://jsfiddle.net/povw33x7/
忘记我之前说的(我删除了,但你仍然可以在revision history中看到它)。
使用我在此 Web site 上找到的一些代码,您可以计算盒子的高度。现在,您只需要应用它来更新调整大小的框高度:
function getBoxHeight(boxId) {
// using a function to get the height of the box from ==>
var ckeditorFrame = $('#' + boxId + ' iframe');
var innerDoc = (ckeditorFrame.get(0).contentDocument) ? ckeditorFrame.get(0).contentDocument : ckeditorFrame.get(0).contentWindow.document;
var messageHeight = $(innerDoc.body).height();
return messageHeight ? messageHeight : 0;
}
function r() {
if (getBoxHeight("cke_1_contents") > getBoxHeight("cke_2_contents")) {
$("#cke_2_contents").height($("#cke_1_contents").height());
} else {
$("#cke_1_contents").height($("#cke_2_contents").height());
}
}
如您在此 JSFiddle 上所见:http://jsfiddle.net/povw33x7/3/。这个解决方案比另一个更干净,尽管它仍然有一个小故障,因为它可能会在其中一个框中留下额外的空白 space(一行的高度)。
我在一个页面中使用了两个 CKEDITOR 的编辑器,并且我将它们始终保持相同的大小。我用的是auto grow插件,所以试了一下:
CKEDITOR.plugins.addExternal( 'autogrow', location.href + 'ckeditor/autogrow/', 'plugin.js' );
var e1 = CKEDITOR.replace("heb_editor", {extraPlugins: 'autogrow'});
var e2 = CKEDITOR.replace("eng_editor", {extraPlugins: 'autogrow'});
e1.on("resize", r);
e2.on("resize", r);
function r(){
if($("#cke_1_contents").height() > e2.config.height)
$("#cke_2_contents").height($("#cke_1_contents").height());
else
$("#cke_1_contents").height($("#cke_2_contents").height());
}
没用。它确实将第二个编辑器的大小调整为第一个编辑器的大小,但它没有在需要时将第一个编辑器的大小调整为第二个的大小。怎么办?
这是一个 JSfiddle:http://jsfiddle.net/povw33x7/
忘记我之前说的(我删除了,但你仍然可以在revision history中看到它)。
使用我在此 Web site 上找到的一些代码,您可以计算盒子的高度。现在,您只需要应用它来更新调整大小的框高度:
function getBoxHeight(boxId) {
// using a function to get the height of the box from ==>
var ckeditorFrame = $('#' + boxId + ' iframe');
var innerDoc = (ckeditorFrame.get(0).contentDocument) ? ckeditorFrame.get(0).contentDocument : ckeditorFrame.get(0).contentWindow.document;
var messageHeight = $(innerDoc.body).height();
return messageHeight ? messageHeight : 0;
}
function r() {
if (getBoxHeight("cke_1_contents") > getBoxHeight("cke_2_contents")) {
$("#cke_2_contents").height($("#cke_1_contents").height());
} else {
$("#cke_1_contents").height($("#cke_2_contents").height());
}
}
如您在此 JSFiddle 上所见:http://jsfiddle.net/povw33x7/3/。这个解决方案比另一个更干净,尽管它仍然有一个小故障,因为它可能会在其中一个框中留下额外的空白 space(一行的高度)。