有没有办法将 CKEditor 3.0 的高度设置为一个百分比，例如 100%，这样它就占据了整个窗口？
我目前正在使用绝对值，但它们与我的 UI 不能很好地融合 :(
CKEDITOR.replace('editor1',{
height: '600px'
});
问问题
24546 次
10 回答
11
首先添加一个调整编辑器大小的函数：
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);
}
}
});
于 2011-04-07T14:03:47.337 回答
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) 和内容面板 (cke_1_contents)。.textPanel 高度是编辑器应该适合的周围 div。我添加了 10px，因为我的布局需要它。
我认为它可以更高效一些（它启动调整大小的次数与编辑器的次数一样多），但现在它终于在我最近的所有浏览器（ff，即 chrome 和 safari）中完美运行。
于 2013-01-03T10:18:43.963 回答
6
我设法通过 CSS 配置了 100% 的高度：
- 使用 配置编辑器
config.height = '100%'，即使文档说不支持。 - 把它放在你的 CSS 中：
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，因此在调整窗口或相应容器的大小时会自动调整高度。
于 2012-02-10T17:43:36.707 回答
3
CKEDITOR.config.height 的 ckeditor 文档说它们不支持百分比单位，例如：30%；但是，有一个带有cke_contents 类的td。如果您在其上设置高度（使用绝对值它将起作用）。
ckeditor 似乎没有很好的解决这个问题的办法。我能想到的唯一其他方法是使用 javascript 来更改上述 td 的样式。
于 2009-12-30T20:26:34.493 回答
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
于 2012-10-19T13:16:10.303 回答
2
将此属性放在您的 css 配置文件中：
.cke_reset{
min-height: 200px;
}
于 2013-08-16T02:11:09.733 回答
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);
于 2014-02-24T09:23:27.203 回答
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();
}
但这会在更新期间被覆盖，所以选择了顶级解决方案。
于 2013-08-31T11:19:25.893 回答
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>于 2017-02-19T23:03:27.850 回答
0
我刚刚在CKEditor4中做了这个，不确定它是否对你有用
<!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 后自行破坏！重要）。
于 2015-08-25T21:22:31.930 回答