pukiwiki改造/Edit改造

表記、友瀬のサイトで実施している独自拡張。
他の方にも役に立つと思われるので、一応公開しておきます。

この改造は「Editプラグインの振舞い」を変えるものです。
友瀬のサイトでは一般への編集は許可していないため、この改造が具体的にどうなっているのかは他の方にはわからないです。
あしからず（＾＾；

改造目的†

Pukiwikiの編集画面において、友瀬がもっている２つの不満を解消することが目的です。
正確に言うと、不満というよりは「Ajaxを用いた疑似的WYSIWYG的な編集」の実現を検討していて、そのために必要な前提というところです。

不満点１：プレビューのサイズ†

プレビューを行うと「プレビュー表示」と「編集エリア」が順に表示されますが、通常のプレビューは「最終的なページ全体」を表示するため、多くの場合ブラウザの高さ以上の長さになり、編集エリアがすごく下のほうになってしまう。
普通に編集する分には Endキーで最後まで行けばいいのですが、Ajax的にやるには「プレビューエリア」と「編集エリア」とを同時に表示しておきたいので。

不満点２：作成済ページを編集する際、編集開始時にはプレビューが見えない。†

「どの部分を編集するのか」を確認するためにプレビューは有効なので、それも最初から見たい。
これもAjax的には必要な要素ですよね。

改造の概要†

問題点１に対しては、CSSによるプレビューエリアの表示方法の変更。
プレビュー表示領域の高さを一定サイズに制限して、それを超えるようなページではスクロールで表示するように変更。

問題点２に対しては、editプラグインのaction処理を改造し、既存ページの編集開始時にもプレビューエリアを表示するように変更。

具体的な改造内容†

改造１：プレビューエリアの高さ制限†

CSS内、「div#preview」のスタイルを変更。次の要素を追加しました。

/* プレビューエリアのサイズ。ブラウザ表示部分の高さに対して40% */
height: 40vh;
/* プレビューエリアをはみ出る場合のスクロール指定（自動でスクロール可能エリアにする）*/
overflow:auto;
/* プレビューエリアを手動でサイズ変更できるようにする。高さ方向のみ。 */
resize: vertical;

使っているスキンによって多少アレンジは必要かと思います。

改造２：Editプラグインの処理変更†

編集開始時のページ生成処理の変更。
plugin_edit_action() の最後、もともとの「テキストエリアに編集対象ページのpukiwikiソースを入れる」処理の代わりに、 「プレビューデータ」＋「テキストエリアに編集対象ページのpukiwikiソースを入れる」を戻すように変更。

-- return array('msg'=>$_title_edit, 'body'=>edit_form($page, $postdata));
	
++ $body = $_msg_preview . "\n";
++ if ($postdata == '')
++ 	$body .= '<strong>' . $_msg_preview_delete . '</strong>';
++ 	
++ $postdata_pre = make_str_rules($postdata);
++ $postdata_pre = explode("\n", $postdata_pre);
++ $postdata_pre = drop_submit(convert_html($postdata_pre));
++ $body .= '<div id="preview">' . $postdata_pre . '</div>' . "\n";
++ 
++ $body .= edit_form($page, $postdata);
++ 	
++ return array('msg'=>$_title_edit, 'body'=>$body);

メモ。†

コメント†

ご意見などがあれば。