コメントにQuicktagsで絵文字挿入ボタンを

■imgタグを許可しない場合
他のタグは許可できてもimgタグだけは許可したくない…て場合もありますよね。そういう場合はちょっとややこしくなりますが、[ハート]のような仮タグをjavascriptでimgタグに変換することで実装可能です。

１．js_quicktags.jsにボタンの追加
上と同じですが、imgソースの部分を[ハート]のような仮タグにします。この仮タグがコメント欄に挿入されることになります。

edButtons.push(
　　　new edButton(
　　　　　　'ed_bold'
　　　　　　'http://hogehoge.com/emoji.gif'
　　　　　　,'画像名'
　　　　　　,'[仮タグ名]'
　　　　　　,''
　　　　　　,''
　　　)
);

２．画像変換スクリプトの追加
stroll::blogさんのコメントにカスタマイズ絵文字入力機能から「画像設定スクリプト」と「画像変換スクリプト」をお借りします。Quicktagsを使う場合は「画像リスト出力スクリプト」は要りません。

以下のソースをjs_quicktags.jsの一番下に追加。
・緑字と赤字の部分を使う絵文字に合わせて編集。ここで注意するのは、緑字の部分は仮タグ名から[ ]を取ったものにすること。
・青字のclass名は<$MTCommentBody$>を囲んでいるdivのclass名です。3.3デフォルトのテンプレならこのままで動きます。

// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array('仮タグ名', '画像のアドレス');
list[list.length] = new Array('仮タグ名', '画像のアドレス');
return list;
}

function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値（alt属性以外）
var att = 'border="0" style="vertical-align:middle" width="15" height="15"';

// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}


// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = '';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentbodyClassName = 'comment-content';

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentbodyClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}

function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i][0] + ']').join('<img src="' + list[i][1] + '"' + att + ' alt="" />');
}
return s;
}

＊仮タグを囲んでいる[ ]はオレンジ色の部分を変更することで ( ) :: など好きなものに変えられます。その場合はボタンの仮タグを囲む記号もここで指定したものに変更します。

３．エントリーアーカイブテンプレートの編集
以下の記述を</form>の下に追加。

<script type="text/javascript">
<!--
changeCustmizeEmojiTag();
// -->
</script>

以上、タグ挿入ボタンも絵文字も１つのスクリプトで全部済ましてしまえ～という人向きのカスタマイズでした(^^;。

関連するエントリー：絵文字孝