wikiページのダイナミックプレビュー
Chris
僕は結構typoが多いので、プレビューしまくりたいと思ってるんですが、
いちいちプレビューのリンクをクリックするのが面倒だなぁと思ってました。
で、↓こんなことして、入力して1秒間キー入力がなかったら、入力欄の右側に自動的にプレビューが表示されるようにしてみました。
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_wikipreview.js"></script>
これでOKです。
プレビュー機能はいちいちサーバにアクセスするので、あまりに頻繁にプレビューしちゃうとサーバに結構負荷がかかるので注意が必要ですけど。
Jack
これ、使わせていただいています。とても快適です。
で、教えて欲しいことがあります。
最初、この custom_wiki_preview.js をそのまま写して作成したら、
プレビューが「404エラー」のページになってしまいました。
そこで、3行目のこの部分
その目的のページがプレビューできたのですが、
他のページもプレビューできるようになってしまったではありませんか！
これは一体どういうことなのでしょう？？
このカラクリについて、クリスさんまたはどなたか教えていただけませんか。
IE6環境です。Firefox2.0でも同じ現象になりました。
Yoshiomi Kurisu
Jackさん、すみません、凡ミスでした。
↓ソース修正してみましたので、これなら大丈夫なはずです。
var preveiwTimerId;
var previewFunc = function(){
var url = window.document.location.href.split('/');
url = '/' + url.slice(url.length-4,url.length-1).join('/') + '/preview';
new Ajax.Updater('preview', url,
{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);
で、Jackさんの質問に対する答えは以下のようになります。
redmineのwikiのプレビュー後のHTMLを返すURLは、
（存在するwikiのURL）/preview
となります。
まずこの時点で、wikiのURLが存在しない場合は404エラーが返ってしまいます。
Jackさんが最初に404エラーが返ってしまったのも、これが原因です。
で、逆に存在するwikiのURLであれば、どこのURLを指定しても、
preview機能を利用することができます。
preview機能は、DBに格納されている内容ではなく、
ページ中のテキストエリアの情報を都度サーバへ飛ばし、
wiki記法をHTMLに変換して返すという仕様になっているため、
他のページのpreviewURLを指定しても、今自分が書いている内容のpreview情報が
取得できるということになります。
08/01/31 に Jack<Jac...@gmail.com> さんは書きました:
--
栗栖義臣
chri...@gmail.com
http://blog.chrisryu.com/
http://dev.chrisryu.com/
Yoshiomi Kurisu
すみません。再び凡ミスです。（病み上がりで頭が回ってないです；）
↓新規ページの時でも表示されるように修正しました。
var preveiwTimerId;
var previewFunc = function(){
var url = window.document.location.href.split('/edit').join('/').split('/');
url = '/' + url.slice(url.length-3,url.length).join('/') + '/preview';
new Ajax.Updater('preview', url,
{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);
08/01/31 に Yoshiomi Kurisu<chri...@gmail.com> さんは書きました:
Jack
新規ページの対応もありがとうございます。
新規ページでは、URLに"/edit"がついていないところがミソということですね。
使わせていただきます。
＃ 風邪だったですか？ ご自愛ください。
On 1月31日, 午後9:23, "Yoshiomi Kurisu" <chris4...@gmail.com> wrote:
> 栗栖です。
>
> すみません。再び凡ミスです。（病み上がりで頭が回ってないです；）
>
> ↓新規ページの時でも表示されるように修正しました。
>
> var preveiwTimerId;
> var previewFunc = function(){
> var url = window.document.location.href.split('/edit').join('/').split('/');
> url = '/' + url.slice(url.length-3,url.length).join('/') + '/preview';
> new Ajax.Updater('preview', url,
> {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);
>
> chris4...@gmail.comhttp://blog.chrisryu.com/http://dev.chrisryu.com/- 引用テキストを表示しない -
>
> - 引用テキストを表示 -