コメント入力をプレビューさせる(JavaScript)

友人のblogのコメント入力欄に、プレビュー機能がある。
それも、よくあるような、確認ボタンを押して別画面で確認するのではなくて、
書いた側から、入力フォームの下に表示されるんである。
WYSIWYGなインターフェイス。
…これ、欲しいなぁ…
そういうわけで、ドリコムブログをHackしてみました。
(つまり要するにパクリ)



導入方法
1. JavaScriptプログラムセットの導入。
Comment Preview JavaScript Pack(SJIS / EUC-JP)

これを解凍し、自分のblogにあった文字コードのものを適当な場所にアップ。
(ちなみに、popup.jsだけは必要ない)


2. コメント入力欄を修正
まず、頭に、JavaScriptプログラムへのリンクを記述。
<head>?</head>の適当な場所に以下の文字列を挿入。

<script src=”http://hoge/js/prev.js” type=”text/javascript”></script>
<script src=”http://hoge/js/cookie_util.js” type=”text/javascript”></script>
<script src=”http://hoge/js/tags.js” type=”text/javascript”></script>
<script src=”http://hoge/js/render.js” type=”text/javascript”></script>
<script src=”http://hoge/js/select.js” type=”text/javascript”></script>
<script src=”http://hoge/js/insert_tags.js” type=”text/javascript”></script>
<script src=”http://hoge/js/comment_edit.js” type=”text/javascript”></script>


次に、コメントフォーム部分をカスタマイズ。
重要なのは3点。

・formとtextareaの名前をチェック。
・イベント捕捉のための空<div>要素を入れる。
・プレビュー場所の指定。

・formとtextareaの名前をチェック。
テンプレート内の、form/textareaの名前が、それぞれ、
comment_edit.js内の、
COMMENT_FORM_NAME/COMMENT_TEXTAREA_NAME と
一致していることを確認。
とりあえず、MovableTypeのデフォルトの値(comments_form/text)になっていますが
これを変えている人、MT以外のヒトはこれを変更のこと。

・イベント補足のための空<div>要素を入れる。
<form>?</form>内のどこかに、次の行を挿入。

<div id="emoji" onclick="renderPreviewAll(gCommentForm);"></div>

・プレビュー場所の指定。
プレビューさせたい場所に、次の行を挿入。
見栄えは適当にCSSなどでいじってください。

<div id="comment_preview"></div>


以上で保存して、再構築すれば完成。

注意点としては、プログラムファイルや、関数名などが、かぶっていると動作しないばかりか
予期せぬ動作をしかねないので十分にチェックを。
また、文字コードが違っていると動作しません。正しいものを入れてください。

あ、あと、お決まりの文句ですが、すべて自己責任で行ってください。
ドリコムに問い合わせたりもしないように。