[PukiWiki] Editor Bar

PukiWiki を WYSIWYG な感じで編集してみたい!!

http://pukiwiki.sourceforge.jp/?%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%2Fguiedit.inc.php なものもあるみたいです。

/lib/html.php の中に

<form action="$script" method="post" style="margin-bottom:0px;">
$template

 $addtag
 <input type="hidden" name="cmd"    value="edit" />
 <input type="hidden" name="page"   value="$s_page" />
 <input type="hidden" name="digest" value="$s_digest" />
 <textarea name="msg" id="_str" rows="$rows" cols="$cols">$s_postdata</textarea>
 <br />
 <div style="float:left;">
  <input type="submit" name="preview" value="$btn_preview" accesskey="p" />
  <input type="submit" name="write"   value="$_btn_update" accesskey="s" />
  $add_top
  $add_notimestamp
 </div>
 <textarea name="original" rows="1" cols="1" style="display:none">$s_original</textarea>
</form>
<form action="$script" method="post" style="margin-top:0px;">
 <input type="hidden" name="cmd"    value="edit" />
 <input type="hidden" name="page"   value="$s_page" />
 <input type="submit" name="cancel" value="$_btn_cancel" accesskey="c" />
</form>
</div>

ここで、 textarea に id=”_str” を追加し、 textareaの前に以下を追加する。

<div class="tools" style="width: 650px;background-image: url('tools/toolbg.png');background-repeat: repeat-x;">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('\*')">
<img src="tools/h2.png" alt="*" title="大見出し" width="24" height="24" />
</a>
</div>

これは、光沢のある灰色のツールーバーを配置して、そこに、h2の画像を置く。これをクリックすると、_str がIDである textareaのカーソルの位置に * が追加される。 insertAtCaret?()の中身を変えると、いろいろなものが追加される。

plugin/secedit.inc.php を使っている場合は、 同じ個所を修正する必要あり。

ツールバー作成例

<?php
<div class="edit_form">
$template$addtag
<div class="tools" style="width: 650px;background-image: url('tools/toolbg.png');background-repeat: repeat-x;">a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('\*')">img src="tools/h2.png" alt="*" title="大見出し" width="24" height="24" />
</a>
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('**')">
<img src="tools/h3.png" alt="**" title="中見出し" width="24" height="24" />
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('***')">
<img src="tools/h4.png" alt="***" title="小見出し" width="24" height="24" />
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('\'\'\'\)">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('\'\'\'\'\'\)">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('-')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('+')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?(':')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('>')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('left:')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('center:')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('right:')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?(' ')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('サイト名:http://')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('|セル|セル|h\\n|セル|セル|')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?(' [添付]')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('#amazon2(electronics-jp または books-jp,キーワード)')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?(' [heart]')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?('\&\s\m\i\l\e\;')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?(' [huh]')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?(' [wink]')">
<a href="javascript:void(0)" onclick="$('#_str').insertAtCaret?(' [worried]')">
<a href="?FormattingRules" target="_blank"">
</div>
 <textarea name="msg" id="_str" rows="$rows" cols="$cols">$s_postdata</textarea>
 <br />
 <div style="float:left;">
  <input type="submit" name="preview" value="$btn_preview" accesskey="p" />
  <input type="submit" name="write"   value="$_btn_update" accesskey="s" />
  $add_top
  $add_notimestamp
 </div>
 <textarea name="original" rows="1" cols="1" style="display:none">$s_original</textarea>
</form>
<form action="$script" method="post" style="margin-top:0px;">
 <input type="hidden" name="cmd"    value="edit" />
 <input type="hidden" name="page"   value="$s_page" />
 <input type="submit" name="cancel" value="$_btn_cancel" accesskey="c" />
</form>
</div>