« × はてブガジェット 2つ追加 --- はてなセリフ & amazon.co.jp | メイン | Google マイマップ EXPO »

Redmine の wiki 編集画面を auto preview にする

Redmineのwikiのプレビューが、幸いなことにAjaxを利用してプレビュー部分を書き出していたので、それをうまくHackして、書いていると自動的にプレビューが生成されるようにしてみます。

方法は以下の通り。

1. custom_wiki_preview.js というファイルを /public/javascripts 以下に作成する。

2. custom_wiki_preview.js の中に以下の内容を記述する。

var preveiwTimerId;
var previewFunc = function(){
new Ajax.Updater('preview', '/wiki/1/Docs/preview',
{asynchronous:true, evalScripts:true, method:'post',
onComplete:function(request){
Element.setStyle($('content_text'),{'width':'50%'});
Element.setStyle($('preview'),
{'position':'absolute','width':'48%','top':'146px','right':'10px'});
}, parameters:Form.serialize('wiki_form')});
return false;
}
var previewTimerFunc = function(){
clearTimeout(preveiwTimerId);
preveiwTimerId = setTimeout(previewFunc,1000);

}
Event.observe('content_text', 'keyup', previewTimerFunc, false);


3. /app/views/wiki/edit.rhtml に以下の記述を追記する。

<script type="text/javascript" src="/javascripts/custom_wiki_preview.js"></script>


これでOKです。

wikiの編集画面で、編集エリアに何か入力を加え、1秒待つと↓このように、画面右側にプレビューが表示されるようになります(デフォルトでは画面下に表示される)。

redmine_auto_wiki_preview.png


上記JavaScriptの内容は、編集欄のKeyupイベントを監視して、イベント発生毎にpreviewTimerFunc()を実行します。
previewTimerFunc() の中では、previewFuncを1秒後に実行するようにタイマーをセットしています。ここで、前のタイマーIDをクリアしているので、連続してキーが入力されたときは、previewFuncが実行されずサーバに負担をかけにくいようにしています。

3のステップで、rhtmlをいじっちゃってますが、これがやだなーって人は、2で作ったjsファイルをページにappendするbookmarkletを作っても良いですし、FireFox限定でよければGreasemonkeyスクリプトを作るという方法もあります。