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秒待つと↓このように、画面右側にプレビューが表示されるようになります（デフォルトでは画面下に表示される）。
上記JavaScriptの内容は、編集欄のKeyupイベントを監視して、イベント発生毎にpreviewTimerFunc()を実行します。
previewTimerFunc() の中では、previewFuncを1秒後に実行するようにタイマーをセットしています。ここで、前のタイマーIDをクリアしているので、連続してキーが入力されたときは、previewFuncが実行されずサーバに負担をかけにくいようにしています。
3のステップで、rhtmlをいじっちゃってますが、これがやだなーって人は、2で作ったjsファイルをページにappendするbookmarkletを作っても良いですし、FireFox限定でよければGreasemonkeyスクリプトを作るという方法もあります。
| 固定リンク
|
