如何更改CKEditor的编辑器大小？
Posted
技术标签:
【中文标题】如何更改CKEditor的编辑器大小？【英文标题】：How to change the editor size of CKEditor? 【发布时间】：2012-04-16 22:10:09 【问题描述】：由于它是 textarea ，我在 html 属性中尝试了 cols="50" 但它不起作用。
另外，我从上一个问题中找到了答案。他说我可以通过添加来做到这一点。
CKEDITOR.instances.myinstance.resize(1000, 900); 但是，大小仍然没有改变。
这是我尝试的代码，谢谢。
更新
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="../plugin/jquery-1.6.1.min.js"></script>
<script src="../plugin/jquery.validate.min.js"></script>
<script type="text/javascript" src="../plugin/ckeditor/ckeditor.js"></script>
<script>
$(document).ready(function()
$("#addlist").validate();
var editor = CKEDITOR.replace('editor1');
var div = document.getElementById('editor');
editor.resize($(div).width(),'900');
);
</script>
</head>
<body>
<form method="post" action="confirm.php">
<p><br />
<div id="editor">
<textarea id="editor1" name="editor1">
</div>
<? if (isset($_GET['file']))
$filepath=$_GET['file'];
require_once("../template/".$filepath);?> </textarea>
</p>
</br>
File Name </br>
<b>(Naming Without .html e.g. MyTemplate1) :</b>
</br>
<input id="tname" name="tname" class="required" />
<input type="submit" />
</p>
</form>
</body>
</html>
【问题讨论】：
【参考方案1】：使用以下脚本代码在编辑器初始化后调整高度。
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor =>
editor.editing.view.change( writer =>
writer.setStyle( 'height', '200px', editor.editing.view.document.getRoot() );
);
)
.catch( error =>
console.error( error );
);
</script>
【讨论】：
【参考方案2】：首先，定义文本区域。
<textarea type="text" name="title" id="textEditor" required></textarea>
然后在script标签中初始化ck编辑器。
<script type="text/javascript">
CKEDITOR.replace('textEditor',
height: '800px'
);
</script>
【讨论】：
【参考方案3】：如果您的编辑器需要 100% 的高度；
setInterval(function()
$('#cke_1_contents').css('height', $('#parent_div_id').outerHeight());
, 700);
【讨论】：
【参考方案4】：这个效果很好。
<script type="text/javascript">
CKEDITOR.replace('article-ckeditor',
height: '800px',
);
</script>
【讨论】：
【参考方案5】：要在初始化时设置 CKEditor 的高度，您可以按照列出的过程。
<script>
CKEDITOR.replace( 'editor1',
height:['500px']
);
</script>
【讨论】：
哇，CKEDITOR 文档没有提到这是 v4.6 的方式。谢谢！【参考方案6】：用于调整大小的 CkEditor：
CKEDITOR.replace('OnThisDateIwillLook',
toolbar: [['Bold', 'Italic', 'Underline'],],
skin: 'v2',
extraPlugins: 'autogrow',
autoGrow_minHeight: 250,
//autoGrow_maxHeight: auto,
);
【讨论】：
【参考方案7】：回答这个问题是因为我花了很长时间才弄清楚如何使用 jquery 解决这个问题。这类似于上面的一些答案，但包含要彻底的实例创建。
在我看来，这并不优雅，我不知道为什么 CKeditor 不从它的父容器中继承它的大小，这将是更可取的。
var new_editor = $('#selected_textarea').ckeditor(function()
var set_editor_height = $('#parent_container').height()
$('.cke_contents').css( 'height': set_editor_height );
);
这应该适用于类选择器，而不仅仅是 ID。
【讨论】：
【参考方案8】：在 ckeditor 版本 4.5.5 中
可以通过使用强制改变高度
CKEDITOR.config.height = '800px';
【讨论】：
配置选项似乎对我不起作用（虽然无法解释原因 - 这让我很烦恼）但这在 CKEDITOR.replace 调用之后就完美地工作了。【参考方案9】：CKEDITOR.config.;
CKEDITOR.config.
【讨论】：
【参考方案10】：Yes this worked perfectly We have to use config to override the styles
<textarea rows="1000" id="editor1" name="newsletter"></textarea>
<script>
CKEDITOR.replace('editor1');
CKEDITOR.config.;
CKEDITOR.config.
</script>
【讨论】：
【参考方案11】：//这会有所帮助。它对我有用。
<script>
CKEDITOR.replace( 'editor1',
uiColor: '#14B8C4',
toolbar: [
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'FontSize', 'TextColor', 'BGColor' ]
],
width:['250px']
);
</script>
【讨论】：
对您的回答做一些解释有助于我们理解它。 终于有人给出了明智的答案。除了这个，没有其他工作。好吧，可能还有其他人，但他们太老套了，我不想尝试。谢谢！！！【参考方案12】：editor.resize('100%', '350');
editor.resize('550', '350');
【讨论】：
【参考方案13】：去ckeditor文件夹找到config.js
CKEDITOR.editorConfig = function( config )
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.height = '80vh';
;
这将根据屏幕大小调整您的 ckeditor。
【讨论】：
【参考方案14】：使用config 更新样式
editor.config.;
editor.config.
【讨论】：
是的，这有效 CKEDITOR.replace('editor1'); CKEDITOR.config.; CKEDITOR.config.【参考方案15】：我在 4.3.4 版本中很难使用 resize 方法。
我做了一个hack并在css下面使用：-
.cke_reset width:807px !important;
工作就像一个魅力！
【讨论】：
【参考方案16】：我使用了这个解决方案（CKeditor4）：
.cke_contents height: 100% !important;
source
希望对你有帮助:)
【讨论】：
【参考方案17】：使用jQueryckeditor，它最终会听我的唯一方法就是使用一点技巧：
$('.ckeditor textarea').ckeditor(function ()
editor = $('.ckeditor textarea').ckeditorGet();
$('.cke_inner').css( 'width': '802px' );
);
【讨论】：
【参考方案18】：这是一个 jQuery 函数，它使用 cols= 属性来调整 ckeditor 高度（每行 20 像素的标量）
(function($)
jQuery.fn.cke_resize = function()
return this.each(function()
var $this = $(this);
var rows = $this.attr('rows');
var height = rows * 20;
$this.next("div.cke").find(".cke_contents").css("height", height);
);
;
)(jQuery);
CKEDITOR.on( 'instanceReady', function()
$("textarea.ckeditor").cke_resize();
)
那么你的html会自动调整大小
<textarea name="body" class="ckeditor" rows="10"></textarea>
【讨论】：
【参考方案19】：对于 CKEditor 4.0，我不得不使用：
CKEDITOR.replace('body', height: 500);
【讨论】：
4.x 版本中仍然存在调整大小功能，请参阅docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resize。所以 Blaze-Core 的 answer 也适用于 4.x 版本。 也为我工作。谢谢 这很好用，我确实收到警告说它已被弃用。【参考方案20】：正如其他答案中所述，必须使用 resize() 函数。对于那些想知道如何使用此代码的人editor.resize( '100%', '350' ) 见下文。
假设您为具有名称属性 test 的 textarea 创建了一个编辑器。然后你可以像这样在 CKEditor 的实例上调用 resize() 函数：
CKEDITOR.instances.test.resize( '100%', '80');
【讨论】：
【参考方案21】：尝试关注
为此，请使用resize 函数定义编辑器界面的尺寸，为窗口分配一个以像素或 CSS 接受的单位为单位的宽度和高度值。
// Set editor width to 100% and height to 350px.
editor.resize( '100%', '350' )
在设置高度值时，使用 isContentHeight 参数决定该值是适用于整个编辑器界面还是仅适用于编辑区域。
// The height value now applies to the editing area.
editor.resize( '100%', '350', true )
http://docs.cksource.com/CKEditor_3.x/Howto/Editor_Size_On_The_Fly
【讨论】：
谢谢。但是我到底要修改什么文件？你介意解释一下吗？ 再次感谢，在我可以更改尺寸之前是否需要有一个外部？ 但是当我移除外部时，它不起作用，就像我创建的 jsfiddle 一样。另外，由于我只想更改大小，为什么使用 editor1.resize('100%', '450', true) 不起作用？谢谢 您提供的 jsfiddle 也不起作用，请检查一下（或者是 chrome 问题？） ，这样对吗？以上是关于如何更改CKEditor的编辑器大小？的主要内容，如果未能解决你的问题，请参考以下文章