14
有没有办法将CKEditor 3.0的高度设置为百分比，比如100％，这样就占用了整个窗口？CKEditor 3.0高度
我目前使用的绝对值，但它们不与我的UI :(
CKEDITOR.replace('editor1',{
height: '600px'
});
A
回答
9
很多与CKEditor的4这个调整大小的东西摆弄我做了这其中的工作原理后非常完美的我：
在config.js：
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）中完美运行。
3
上的CKEditor的CKEDITOR.config.height的文件说，他们不支持百分比单位如融合得很好：30 ％; 然而，有一类cke_contents td，如果你设置高度（具有绝对值，它将起作用）
似乎ckeditor对这个问题没有很好的解决方案。 我能想到的唯一的另一种方式是使用javascript来改变上述td的样式。
+1
一切你需要了解这个问题是在这里http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.height – kajo 2011-03-12 16:56:58
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);
}
}
});
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，所以在调整窗口或相应容器的大小时会自动调整高度。
+0
尝试使用全屏幕模式。正如你所看到的，这不是一个好的解决方案。 – looper 2012-08-13 11:21:15
+0
我无法得到这个工作！ – 2017-10-25 15:30:22
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
1
把你的CSS配置文件中此属性：
.cke_reset{
min-height: 200px;
}
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改变高度。
我已经通过所见即所得的模块改变settings.height所见即所得/编辑/ JS/CKEditor的-3.0.js
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();
}
但这将在更新过程中被覆盖，所以就跟着上层溶液。
0
这里是上面的代码的道场版......如果有人有兴趣...
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);
0
我刚刚周围做这个的CKEditor4，不知道这是任何使用您
<!DOCTYPE html>
<html>
\t <head>
\t \t <meta charset="utf-8">
\t \t <title></title>
\t \t <script src="ckeditor/ckeditor.js"></script>
\t \t <!-- tested with CKEditor 4.5.3 (revision 6c70c82) -->
\t \t <style type="text/css">
\t \t \t .cke_1 {
\t \t \t \t height: 100% !important;
\t \t \t \t width: 100% !important;
\t \t \t \t position: static;
\t \t \t \t top: 0px;
\t \t \t \t left: 0px;
\t \t \t \t right: 0px;
\t \t \t \t bottom: 0px;
\t \t \t }
\t \t \t .cke_inner {
\t \t \t \t height: 100% !important;
\t \t \t \t width: 100% !important;
\t \t \t \t display: table !important;
\t \t \t } \t \t \t
\t \t \t .cke_top { display: table-cell !important; }
\t \t \t .cke_contents { height: 100% !important; display: table-row !important; }
\t \t \t .cke_bottom { display: table-cell !important; }
\t \t \t textarea.cktextarea {
\t \t \t \t width: 100% !important;
\t \t \t \t height: 100% !important;
\t \t \t }
\t \t </style>
\t \t <script>
\t \t \t CKEDITOR.config.width = '100%';
\t \t \t CKEDITOR.config.height = '100%';
\t \t \t CKEDITOR.plugins.registered['maximize'] = {
\t \t \t \t init: function(editor) {
\t \t \t \t \t var command = editor.addCommand('maximize', {
\t \t \t \t \t \t modes: { wysiwyg:1, source:1 },
\t \t \t \t \t \t exec: function(editor) {
\t \t \t \t \t \t \t if (editor.container.getStyle('position') != 'fixed') {
\t \t \t \t \t \t \t \t this.setState(CKEDITOR.TRISTATE_ON);
\t \t \t \t \t \t \t \t editor.container.setStyle('position', 'fixed');;
\t \t \t \t \t \t \t } else {
\t \t \t \t \t \t \t \t this.setState(CKEDITOR.TRISTATE_OFF);
\t \t \t \t \t \t \t \t editor.container.setStyle('position', 'static');
\t \t \t \t \t \t \t }
\t \t \t \t \t \t }
\t \t \t \t \t });
\t \t \t \t \t editor.ui.addButton('Maximize', { label: 'Maximize', command: 'maximize', toolbar: 'tools' });
\t \t \t \t }
\t \t \t }
\t \t </script>
\t </head>
\t <body>
\t \t <div style="background: darkgray; padding: 0.5em; display: inline-block; position: fixed; left: 20px; top: 20px; left: 20px; right: 20px; bottom: 20px;">
\t \t \t <textarea name="editor1" id="editor1" class="cktextarea"></textarea>
\t \t \t <script>CKEDITOR.replace('editor1');</script>
\t \t </div>
</body>
</html>如果不使用最大化的插件有很多的javascript不必要的，我换成个的功能是插件，因为它打破了新的CSS（在我把所有的CSS设置为重要的时候自行破解）。
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>
\t <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge">
\t <title>CKEditor Sample</title>
\t <script src="../ckeditor.js"></script>
\t <script src="js/sample.js"></script>
\t <link rel="stylesheet" href="css/samples.css">
\t <link rel="stylesheet" href="toolbarconfigurator/lib/codemirror/neo.css">
</head>
<body id="main">
\t <div id="editor">
\t </div>
\t <script>
\t \t initSample();
\t \t CKEDITOR.on("instanceReady", function() { initFullSize(); });
\t \t function initFullSize() {
\t \t \t window.addEventListener("resize", onWindowResize);
\t \t \t document.getElementById("main").style.minWidth = "970px";
\t \t \t document.getElementById("cke_1_resizer").style.display = "none";
\t \t \t document.getElementsByClassName("cke_inner cke_reset")[0].style.height = "100%";
\t \t \t onWindowResize();
\t \t }
\t \t function onWindowResize() {
\t \t \t document.getElementById("main").style.height = document.documentElement.clientHeight + "px";
\t \t \t document.getElementById("cke_editor").style.height = document.documentElement.clientHeight - 3 + "px";
\t \t \t document.getElementById("cke_1_contents").style.height = (document.documentElement.clientHeight - document.getElementById("cke_1_top").clientHeight - document.getElementById("cke_1_bottom").clientHeight - 3) + "px";
\t \t }
\t </script>
</body>
</html>相关问题
- 1. WSS 3.0和CKEDITOR
- 2. 的CKEditor和JavaScript的 - 调整高度和宽度CKEditor的
- 3. Rails/Ckeditor如何更改高度？
- 4. 不同高度的多个CKEditor
- 5. Swift 3.0 - UIButton标签高度为零高度
- 6. Ckeditor无法使用百分比的图像宽度和高度
- 7. ckeditor-ckfinder上传图像的默认属性（宽度和高度）
- 8. ActionScript 3.0 flex SWF元数据宽度和高度
- 9. 从zend表单中更改ckeditor的高度
- 10. CKEditor。如何关闭自动增长（设置不变高度）
- 11. 如何设置CKEditor 5（经典编辑器）的高度
- 12. 行高度选项CKEditor的不表明即使添加插件
- 13. CKEditor禁用自动检测并插入高度/重量
- 14. CKEditor图像的宽度和高度为HTML属性，而不是内联样式
- 15. 首选内容高度在Swift 3.0中不起作用
- 16. 如何计算Android 3.0（平板）系统栏高度？
- 17. WSE 3.0提高WSE1608错误
- 18. UIScrollView高度与UIView高度
- 19. 最小高度vs高度
- 20. 升级至高级图3.0升级至高图3.0条形图失真导致
- 21. 使用下载的模板皮肤自定义CKEditor 3.0
- 22. Collectionviewcell自动布局高度，动态高度，内容高度
- 23. 将元素的高度设置为％高度的元素高度
- 24. 将高度设置为高度30％的parrent高度的100％？
- 25. WPF高度/宽度
- 26. 度100％的高度
- 27. 高度和宽度
- 28. CKEditor IE8问题
- 29. IE高度小于Firefox的高度
- 30. 将UITableViewCell高度设置为UIImage高度？
感谢这个伟大的答案！ – Victor 2013-07-27 13:37:10