CKEditorの塩っぱいプレビュー機能を改善する(2)

前回はダイアログ化に成功したので、トドメのカスタムプレビュー表示を実装した。
とりあえず、導入後のイメージ

サンプル一覧ページに編集内容を挿入した。

おおよそ、期待する動作を実現できたと思われる。

以下、導入方法の説明。
まずは、こちらから最新ソースを取得する。
導入手順は、前回を参照。
前回からの追加は、

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(); } 
             );
 }

などとCKEditorと同じスコープ内に記述する。
プレビュー画面上での画面遷移を抑止したい場合は、上記のように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の何れか未定義の場合は、
フォールバックとしてエディタ編集中の内容のみがダイアログ表示される。