有没有办法将CKEditor 3.0的高度设置为百分比，例如100％，这会占用整个窗口？
我目前正在使用绝对值，但它们与我的UI不能很好地融合:(
CKEDITOR.replace('editor1',{
height: '600px'
});
答案 0 :(得分：11)
首先添加一个调整edtior大小的函数：
function resizeEditor() {
var defaultHeight = 300;
var newHeight = window.innerHeight-150;
var height = defaultHeight > newHeight ? defaultHeight: newHeight;
CKEDITOR.instances.editor1.resize('100%',height);
}
注意：150适用于我，可能会将值从150更改为更多或更少。
从onresize事件：
窗口调用此方法window.onresize = function() {
resizeEditor();
}
并将第一个调用添加到编辑器的构造函数中：
CKEDITOR.replace('editor1',
{
on:
{
instanceReady: function(ev)
{
setTimeout(resizeEditor, 500);
}
}
});
答案 1 :(得分：9)
在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循环。如果您有一个编辑器，则可以将该行留下并使用标准ID cke_1_contents。
在此示例中，高度取自第一个编辑器工具栏（cke_1_top）和contentpanel（cke_1_contents）。 .textPanel高度是编辑器应该适应的周围div。我添加了10px因为我的布局需要它。
我认为它可以更有效率（它可以像编辑一样多次启动调整大小）但是现在它终于在我最近的所有浏览器（ff，即chrome和safari）中完美运行。
答案 2 :(得分：6)
我设法通过CSS配置100％的高度：
config.height = '100%'配置编辑器，即使文档说不支持此功能。span.cke_wrapper cke_ltr,table.cke_editor, td.cke_contents, span.cke_skin_kama, span.cke_wrapper, span.cke_browser_webkit{
height: 100%!important;
}
我使用Chrome，Firefox和Safari进行了测试，效果很好。由于这是纯CSS，因此在调整窗口或相应容器的大小时，将自动调整高度。
答案 3 :(得分：3)
有关CKEDITOR.config.height的ckeditor的文档说它们不支持百分比单位，例如：30％; 但是，有一个带有一类cke_contents的td。如果你设置高度（用绝对值，它将起作用）。
似乎ckeditor没有很好的解决方案。 我能想到的另一种方法是使用javascript来改变上面td的样式。
答案 4 :(得分：2)
上述解决方案均无法正常使用，以便按百分比设置高度或不设置高度。除非您使用上述解决方案之一进行破解，否则仍然不支持百分比。
如文档中所述，您可以使用以下方法设置高度和css样式：
<head>
<script type="text/javascript">
CKEDITOR.config.height = 1000;
CKEDITOR.config.contentsCss = '/css/yourstyle.css';
</script>
</head>
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.height
答案 5 :(得分：1)
将此属性放在css配置文件中：
.cke_reset{
min-height: 200px;
}
答案 6 :(得分：0)
我一直在寻找一种干净的方法让CKEditor窗口与它正在替换的textarea的高度相同。我正在使用Drupal，这就是我做到的...
在我的主题中，我加载了一个javascript文件，（在我的.info文件中使用“scripts [] = default.js”。）
在这个文件中我有：
$(document).ready(function(){
// Set CKEditor height
if (typeof CKEDITOR!='undefined') {
CKEDITOR.on( 'instanceReady', function( e ) {
e.editor.element.show();
var elHeight = $(e.editor.element.$).height();
e.editor.element.hide();
e.editor.resize('100%', elHeight, true);
});
}
}
这就是你可以用css改变高度。
我一直在通过wysiwyg / editors / js / ckeditor-3.0.js中的wysiwyg模块更改settings.height
Drupal.wysiwyg.editor.attach.ckeditor = function(context, params, settings) {
// Apply editor instance settings.
CKEDITOR.config.customConfig = '';
// Match the height of the replaced field
settings.height = $('#' + params.field).height();
}
但这会在更新期间被覆盖，所以选择最佳解决方案。
答案 7 :(得分：0)
这里是上面代码的dojo版本......万一有人感兴趣...
var adjustEditor = function() {
var editorNode = dom.byId('cke_messageEditor');
console.log("editor node %s ", editorNode);
var editorStyle = domStyle.getComputedStyle(editorNode);
console.log("editor node %s and style %s", editorNode, editorStyle);
var textEditHeight = domGeom.getMarginBox(editorNode, editorStyle).h;
var toolbarNode = dom.byId('cke_1_top');
var toolbarStyle = domStyle.getComputedStyle(toolbarNode)
var ckTopHeight = domGeom.getMarginBox(toolbarNode, toolbarStyle).h;
var contentNode = dom.byId('cke_1_contents');
var contentStyle = domStyle.getComputedStyle(contentNode)
var ckContentsBox = domGeom.getMarginBox(contentNode, contentStyle);
console.log("text editor: %s, button bar: %s", textEditHeight, ckTopHeight);
console.log("setting margin box to: %s ", JSON.stringify(ckContentsBox));
ckContentsBox.h = textEditHeight - ckTopHeight;
console.log("setting margin box to: %s ", JSON.stringify(ckContentsBox));
domGeom.setMarginBox(contentNode, ckContentsBox, contentStyle);
}
// adjust editor immediately
CKEDITOR.on('instanceReady', adjustEditor);
// and again everytime the window is resized
on(window, "resize", adjustEditor);
答案 8 :(得分：0)
我只是在CKEditor4中做了这个，不确定它对你有用吗</ p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="ckeditor/ckeditor.js"></script>
<!-- tested with CKEditor 4.5.3 (revision 6c70c82) -->
<style type="text/css">
.cke_1 {
height: 100% !important;
width: 100% !important;
position: static;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.cke_inner {
height: 100% !important;
width: 100% !important;
display: table !important;
}
.cke_top { display: table-cell !important; }
.cke_contents { height: 100% !important; display: table-row !important; }
.cke_bottom { display: table-cell !important; }
textarea.cktextarea {
width: 100% !important;
height: 100% !important;
}
</style>
<script>
CKEDITOR.config.width = '100%';
CKEDITOR.config.height = '100%';
CKEDITOR.plugins.registered['maximize'] = {
init: function(editor) {
var command = editor.addCommand('maximize', {
modes: { wysiwyg:1, source:1 },
exec: function(editor) {
if (editor.container.getStyle('position') != 'fixed') {
this.setState(CKEDITOR.TRISTATE_ON);
editor.container.setStyle('position', 'fixed');;
} else {
this.setState(CKEDITOR.TRISTATE_OFF);
editor.container.setStyle('position', 'static');
}
}
});
editor.ui.addButton('Maximize', { label: 'Maximize', command: 'maximize', toolbar: 'tools' });
}
}
</script>
</head>
<body>
<div style="background: darkgray; padding: 0.5em; display: inline-block; position: fixed; left: 20px; top: 20px; left: 20px; right: 20px; bottom: 20px;">
<textarea name="editor1" id="editor1" class="cktextarea"></textarea>
<script>CKEDITOR.replace('editor1');</script>
</div>
</body>
</html>
如果你没有使用最大化插件，很多javascript是不必要的，我替换了这个插件的功能，因为它打破了新的CSS（并且在我设置所有CSS之后自行打破！重要）。 p>
答案 9 :(得分：0)
这是我的解决方案，没有jQuery，在C＃WebBrowser控件中工作，在水平显示时也没有垂直滚动。
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge">
<title>CKEditor Sample</title>
<script src="../ckeditor.js"></script>
<script src="js/sample.js"></script>
<link rel="stylesheet" href="css/samples.css">
<link rel="stylesheet" href="toolbarconfigurator/lib/codemirror/neo.css">
</head>
<body id="main">
<div id="editor">
</div>
<script>
initSample();
CKEDITOR.on("instanceReady", function () { initFullSize(); });
function initFullSize() {
window.addEventListener("resize", onWindowResize);
document.getElementById("main").style.minWidth = "970px";
document.getElementById("cke_1_resizer").style.display = "none";
document.getElementsByClassName("cke_inner cke_reset")[0].style.height = "100%";
onWindowResize();
}
function onWindowResize() {
document.getElementById("main").style.height = document.documentElement.clientHeight + "px";
document.getElementById("cke_editor").style.height = document.documentElement.clientHeight - 3 + "px";
document.getElementById("cke_1_contents").style.height = (document.documentElement.clientHeight - document.getElementById("cke_1_top").clientHeight - document.getElementById("cke_1_bottom").clientHeight - 3) + "px";
}
</script>
</body>
</html>