CKEditor 3.0 Height

前端未结

关注

 10  1277

暗喜

Is there a way to set the height of CKEditor 3.0 to a percentage, such as 100%, such that it takes up the whole window?

I am currently using absolute values, but the

相关标签:

10条回答

广开言路

2020-12-29 09:05

here is the dojo version of the code above... in case anyone is interested...

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 讨论(0)

挽巷

2020-12-29 09:08

First add a function for resizing your edtior:

function resizeEditor() {

  var defaultHeight = 300;
  var newHeight = window.innerHeight-150; 
  var height = defaultHeight > newHeight ? defaultHeight: newHeight;

  CKEDITOR.instances.editor1.resize('100%',height);
}

Note: 150 works for me, maybe change the value from 150 to more or less.

Call this from the window onresize Event:

window.onresize = function() {
  resizeEditor();
}

and add the first call to the constructor of your editor:

CKEDITOR.replace('editor1',
  {  
    on:
    {
      instanceReady: function(ev)
      {
        setTimeout(resizeEditor, 500);
      }
    }
  });

0 讨论(0)

一生所求

2020-12-29 09:08

I just got around doing this in CKEditor4, not sure if it is any use to you

<!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>

If you are not using the maximize plugin a lot of the javascript is unnecessary, I replaced the functionality of this plugin because it was breaking the new CSS (and breaking by itself after I set all the CSS !important).

0 讨论(0)

一个人的身影

2020-12-29 09:13
None of the above solutions worked fine for me in order to set the height either with percentage or without it. Percentages are still not supported at all unless you hack it with one of the above solutions.

As stated in the documentation, you may set the height and css style with:
```
<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
0 讨论(0)
发布评论:

提交评论
- 加载中...
遥遥无期

2020-12-29 09:14
I managed to configure a 100% height via CSS:
1. Configure the editor with config.height = '100%', even when the docs say this isn't supported.
2. Put this in your 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;
}
```
I tested this with Chrome, Firefox and Safari and it worked fine. Since this is pure CSS, the height will get adjusted automatically when the window or the corresponding container is resized.
0 讨论(0)
发布评论:

提交评论
- 加载中...

难免孤独

2020-12-29 09:14

This is solution for me, without jQuery, working in C# WebBrowser control, also no vertical scroll when horizontal shown.

<!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>

0 讨论(0)

1 2 下一页