14

CKEditor 3.0の高さを100％などのパーセンテージに設定して、ウィンドウ全体を占めるようにする方法はありますか？

私は現在絶対値を使用していますが、それらは私のUIとうまく調和していません:(

CKEDITOR.replace('editor1',{
    height: '600px'
});
4

10 に答える 10

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から多かれ少なかれ変更する可能性があります。

イベントのサイズ変更ウィンドウからこれを呼び出します。

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ループがあります。エディターが1つある場合は、その行を省略して、標準IDcke_1_contentsを使用できます。

この例では、高さは最初のエディターツールバー（cke_1_top）とコンテンツパネル（cke_1_contents）から取得されます。.textPanelの高さは、エディターが収まるはずの周囲のdivです。レイアウトに必要だったため、10pxを追加しました。

もう少し効率的だと思います（エディターの数だけサイズ変更を開始します）が、今のところ、最近のすべてのブラウザー（ff、つまりchromeとsafari）でようやく問題なく動作しています。

于 2013-01-03T10:18:43.963 に答える
6

私はCSSを介して100％の高さを構成することができました：

  1. config.height = '100%'ドキュメントにこれがサポートされていないと記載されている場合でも、でエディターを構成します。
  2. これを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

CKEditorウィンドウを、置き換えるテキストエリアと同じ高さにするためのクリーンな方法を探していました。私は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

これが上記のコードの道場バージョンです...誰かが興味を持っている場合に備えて...

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

私は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を！importantに設定した後、それ自体で壊れていたため）、このプラグインの機能を置き換えました。

于 2015-08-25T21:22:31.930 に答える
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 に答える