とりあえず、導入後のイメージ
 |
| サンプル一覧ページに編集内容を挿入した。 |
以下、導入方法の説明。
まずは、こちらから最新ソースを取得する。
導入手順は、前回を参照。
前回からの追加は、
function CKEDITOR_PREVIEW_URL(){
//プレビューに利用するページのURL
return '/_samples/';
}
/**
* プレビュー表示のイベントハンドラー
* @param {String} frameId プレビュー表示用IFRAME要素のID
* @param {String} content エディタ編集中の内容
*/
function CKEDITOR_PREVIEW(frameId,content){
$('#'+frameId).contents().find('h1').after(''+content+'')
.end()
.find('a').click(
function(e){ e.preventDefault(); }
);
}
プレビュー画面上での画面遷移を抑止したい場合は、上記のようにpreventDefaultを入れた方がいい。
子供だましかな...
クロスドメインページをプレビューに利用したい場合は、
function CKEDITOR_PREVIEW_URL(){
return '';
}
function CKEDITOR_PREVIEW(frameId,content){
$.getJSON('http://www.hoge.com/?callback=?',
function(json){
$('#'+frameId).contents().find('html').html(json.data)
.find('#foo').html(''+content+'');
}
);
}
この場合、必要であればspinnerなどを入れた方がいい。
ちなみに、CKEDITOR_PREVIEW_URL、及びCKEDITOR_PREVIEWの何れか未定義の場合は、
フォールバックとしてエディタ編集中の内容のみがダイアログ表示される。
