| 本文 |
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>
|
