CKEditorを別ウィンドウで利用する

CKEditorを別ウィンドウから操作するサンプルが、おそらく探し方が悪いのだろうが見つからなかったので、忘れないようにメモ。




サンプル


子windowを開く





親側必要部分ソース



<script type="text/javascript" src="../common/js/jquery.js"></script>
<script type="text/javascript">
<!--
jQuery.noConflict()(document).ready(function($) {
	var cwnd = null;
	$('#open_cwnd').click(function() {
		if (!cwnd || cwnd.closed) {
			// 親window側の表示領域id
			var pTxtId = 'disp_area';
			// 子window url
			var url = 'ckeditor_other_window_child.html';
			// ターゲットwindow名
			var tgt = 'ckeditor_sample';
			// ターゲットウィンドウオープン
			cwnd = window.open(url, tgt, 'resizable=yes,scrollbars=yes,width=640,height=480');
		}
		cwnd.focus();

		return false;
	});
});
//-->
</script>
<style type="text/css">
<!--
#disp_area {
	border: 1px solid black;
}
-->
</style>

<div><a href="#" id="open_cwnd">子windowを開く</a></div>
<div id="disp_area"></div>




子側ソース



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditorサンプル編集側 | ゆ～てぃる</title>
<link rel="stylesheet" type="text/css" href="../common/css/share.css">
<script type="text/javascript" src="../common/js/jquery.js"></script>
<script type="text/javascript" src="../common/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
jQuery.noConflict()(document).ready(function($) {
	// 親window側のjquery
	var p$ = window.opener.jQuery;
	// 親window側の表示領域id
	var pTxtId = 'disp_area';
	// 子window側テキストエリア（ckeditor置換用）
	var cTxtId = 'child_txt';
	// 開いたときの表示エリアのテキストを復元
	$('#' + cTxtId).val(p$('#' + pTxtId).html());
	// ckeditorをテキストエリアと置換
	var ed = CKEDITOR.replace(cTxtId);
	// ロード完了時にエディタのサイズをwindowにフィットさせる
	// (本来new してすぐ定義してからelementとreplaceすべきなのだろうが方法わからず)
	ed.on('loaded', adjustEditorSize);

	// OKボタンクリック
	$('#btn_ok').click(function() {
		if (!window.opener || window.opener.closed) {
			alert('呼び出し側が閉じられているか、ページを移動しています');
			return false;
		}
		//// 相手がtextareaなどform系で値を持つ場合はこちら
		//p$('#' + pTxtId).val(ed.getData()).focus();
		// div要素中に結果htmlを表示
		p$('#' + pTxtId).html(ed.getData()).focus();
		window.close();
	});
	// キャンセルボタンクリック
	$('#btn_cancel').click(function() {
		window.close();
	});
	// windowリサイズ(bodyエリアのmargin, padding 0前提で記載)
	$(window).resize(adjustEditorSize);
	function adjustEditorSize() {
		var newH = $(window).innerHeight() - $('#title').outerHeight() - $('#btn_ok').outerHeight();
		ed.resize('100%', newH);
	}
	// form submitはキャンセル
	$('#fm_wysiwyg').submit(function() {
		return false;
	});
});
//-->
</script>
</head>

<body>
<div id="title">CKEditorサンプル編集側</div>

<div style="width:100%">
<form name="fm_wysiwyg" id="fm_wysiwyg" method="post" action="#">
<textarea id="child_txt" name="child_txt"></textarea>
<div style="text-align:right; padding-right:1.6em">
<input type="button" id="btn_ok" value="OK" style="width:7em" />
<input type="button" id="btn_cancel" value="キャンセル" style="width:7em" />
</div>
</form>
</div>

</body>
</html>