Movable TypeでコメントのLive PreviewのJavascript

 | コメント(0) | Edit

WordPressを触っていたら、プラグインでLive Comment Previewというのがあったのでいいなーと思ったんですが、つまり、コメントを書いている最中に、自分が書いているコメントがすぐに表示される、という仕組みなんですね。ライブコメントプレビュー。でも良く見たら、これってJavascriptで意外にあっさり実現できるかも、と思ってああでもない、こうでもないとちょこちょこ触っていたんですが、Googleしていろんなところから切り貼りして、結局私のオリジナルではないんですが作ってみましたのでコード書いておこうと思います。ご自由にご利用ください。

まず、Individual Entry Archiveのテンプレートを開き、最初の<head></head>の間のどこでもいいので、以下のタグを書き入れます。

<script type="text/javascript"> <!-- var newline = /\n/g;

function ReloadTextDiv() {
var NewText = document.getElementById("text").value;
NewText = NewText.replace(newline, "<br />");
var DivElement = document.getElementById("TextDisplay");
DivElement.innerHTML = NewText;
}
//-->
</script>

ここで気をつけなければいけないのは、1行目のvar newlineで指定してあるのは、スラッシュ、バックスラッシュ、エヌ、スラッシュ、ジー、セミコロン、です。バックスラッシュって時々、円マーク(¥)に変化してしまったりするので、そのときは手入力してみてください。

次に、コメントフォームの中に、<textarea...で始まるタグを見つけ出し、そこに

onkeyup="ReloadTextDiv();"

を追加します。ちなみに私のサイトだと、

<textarea tabindex="4" id="text" name="text" rows="10" cols="50" onkeyup="ReloadTextDiv();"></textarea>

というタグにしてます。そして最後に、プレビューを表示したいところに

<p><b>Preview: </b><span id="TextDisplay"> </span></p>

のように"TextDisplay"のIDを足してあげればできあがりです。あ、上の、<span id="TextDisplay">と</span>の間の微妙なスペースの部分には、& n b s p ; (をスペースなしで書く)を書いています。もしかしたら私が未熟すぎて、これが動かないブラウザもあるかもしれません。サンプルとしては、この記事のコメントの部分に行き、いろいろ試してみてください(でも実際に「投稿」は押さないでくださいね)。<b></b>タグや、<font color="red"></font>だとか<a href="#"></a>などのタグが目の前でどんどんプレビューされるのは結構楽しいですね。画像も出ますよ。コメントの中で、<img src="">のタグに、試しにhttp://eiyou.net/images/typekey.pngを入れてみると分かります。日本語は、リターンを押して漢字を決定するまでプレビューされないブラウザもあります(私が使っているサファリも)。

コメントする