Home > Movable Type > コメント編集ボタンの設置

コメント編集ボタンの設置

2004-11-24 (水)
Movable Type

MTのエントリー投稿画面にある編集ボタン。
こいつをコメントフォームにもつけられる方法をnetwork styly *さんで発見しました！
未確認なのですがIEでのみ機能するそうです。

＜参考先＞
network styly *: コメント欄にもhtmlタグはめ込みツールバーを設置する
Sync A World You Want To Explore: コメントにもリンクを

以下導入方法です↓

1.)ウェブログの設定
このボタンを使うという事はコメント欄でのHTMLタグ使用の許可をしなければなりません。
ウェブログの設定 →設定から除去機能のカスタマイズにチェックを入れてください。
テキストエリアに使いたいタグを入れます。
ワタシの場合はコメント欄に絵文字も使用してるのでこんな感じ↓

a href,b,br/,p,strong,em,ul,li,blockquote,img src,i

2.)javascriptの追加
個別アーカイブの<head>～</head>間のjavascript部分に以下を追加します。
function mouseover(el) { el.className = "raised"; } function mouseout(el) { el.className = "button"; } function mousedown(el) { el.className = "pressed"; } function mouseup(el) { el.className = "raised"; } function format_me(v) { var str = document.selection.createRange().text; document.comments_form.text.focus(); document.selection.createRange().text = "<" + v + ">" + str + "</" + v + ">"; return; } function insert_link() { var str = document.selection.createRange().text; document.comments_form.text.focus(); var my_link = prompt("Enter URL:","http://"); if (my_link != null) { document.selection.createRange().text = "<a target=\"_blank\" href=\"" + my_link + "\">" + str + "</a>"; } return; } function format_quote() { var str = document.selection.createRange().text; document.comments_form.text.focus(); document.selection.createRange().text = "<blockquote>" + str + "</blockquote>"; return; }

3.)ボタンの追加
コメント投稿フォーム内のボタンを表示させたい箇所に以下を挿入します。
ボタン画像のパスはご自分の環境に合わせて変えてください。
デフォルトではimagesディレクトリに入ってるかと思います。
<style type="text/css"></style> <div id="toolbar"> コメント編集ボタン : <img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="format_quote()" src="/images/html-quote.gif" width="22" height="16" align="middle" alt="引用形式にします" /> <img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="format_me('b');" src="/images/html-bold.gif" width="22" height="16" align="middle" alt="太字にします" /> <img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="format_me('i');" src="/images/html-italic.gif" width="22" height="16" align="middle" alt="イタリック体にします" /> <img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="insert_link();" src="/images/html-link.gif" width="22" height="16" align="middle" alt="リンクを作成します" /> </div>

4.)リビルド

出来上がった編集ボタンはこんな感じです↓

左から「引用」「太字」「斜体」「リンク」
適用させたいテキストをドラッグして選択状態にしてお好きなボタンを押すだけでコメント欄に使えてちょっと便利です。

本当はカラー&フォントサイズセレクターもつけられたらいいな♪と思ったんですが…
検索するとエントリー投稿画面用の方法は見つかるんですがコメント投稿用の手順はヒットしませんでした。
残念です…

Newer: 手作りジンジャーエール
Older: フォントコレクション[X'mas]

Home > Movable Type > コメント編集ボタンの設置

Categories

Archives

Search

Feeds

RSS2.0
ATOM

Page Top