2017/03/26
CKEditorのその後1 プレビューにCSS のようにCSSを効かせておけばプレビューのボタンで表示される画面にもCSSが効きます。当たり前といえば当たり前ですがCKEditorを適応しているテキストエリアの部分しかプレビューしてくれません。私個人では全然問題ないんですが、自分以外の人も使うとなればページ全体のプレビューが見たいのが心情ですね。
とりあえずオリジナルのボタンをCKEditorのツールバー以外につけることで実現しました。
CKEditorを適応しているテキストエリアの情報をボタンクリックで下書きとして保存して別保存のheader部分とかとくっつけて別HTMLとして表示するという方法でいったん実装しました。その後別の本番保存のボタンでCKEditorを適応しているテキストエリアの情報を読み込んで本番ファイルの作成としました。
いったん下書きファイルを作るのでリロードがかかってしまいテキストエリア内のデーターを元に戻せなくなってしまいます。なので下書きファイルを作成しないでページ全体のプレビューを作成したいところです。
ググっていたら直接の答えに一番近かったのが
CKEDITOR.instances.テキストエリアのID名.getData();
で現状のKEditorを適応しているテキストエリアのデータが取れるということです。なのでプレビュー用のページ全体の枠組みのファイルを用意します。オリジナルのプレビューボタンにonclickでwindow.open()を使ってプレビュー用のページを開かせます。
その後開いた子ウィンドウから親ウィンドウのCKEditorを適応しているテキストエリアの部分を読み込んで書き込んであげればOKでした。
CKEditorのあるファイル側にウィンドウオープンする関数を作ります。
<script>
function prehtml(){
sub_win=window.open('preview.html');
return false;
}
</script>
次にオリジナルボタンを作成します。実際はｊQueryか何かでかっこよくイベントリスナーに書き換えてください。
<button onclick="return prehtml();">preview</button>
return付きで関数を呼んであげて関数側でfalseを返してあげないとテキストエリアの変更が元も戻ってしまうと思います。
そして枠組みのあるpreview.html側はCKEditorのテキストエリアの内容を表示したいところに、
<script>
var ck=window.opener.CKEDITOR.instances.テキストエリアのID名.getData();
document.write(ck);
</script>
という風にwindow.openerで親ウィンドウを指定してさらにCKEDITOR.instances.テキストエリアのID名.getData();することで値が取得できました。
これで、プレビュー後でも元に戻すが可能となりより柔軟な編集作業が可能となりました。
