top

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

ボタンを画像にした時、これを応用すればQuicktagsでタグ挿入ボタンだけでなく絵文字も入れられることに気付いたので、覚え書きしておきます。
事前にQuicktagsボタンを画像に変えるカスタマイズは導入済みとの前提で進めます。

■imgタグを許可できる場合
imgタグを許可してもいいのなら、絵文字を入れるのも簡単です。

1.imgタグの許可
作業の前に管理画面でimgタグを許可する設定にします。設定→全般タブで「許可するHTMLタグ」のカスタム設定にチェックを入れ、横のテキストボックスに以下の内容を入れて保存します。

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

緑字の部分は好きに増減していいです(ただしpとbr/だけは残すこと)。
次にコメント・トラックバックのタブへ行き、「HTMLの利用を許可する」にチェックを入れて保存・再構築します。

2.js_quicktags.jsの編集
好きなところに絵文字をアップし、以下のボタンを使う絵文字の数だけ追加します。
つまり挿入するタグの場所に画像のソースを入れればいいわけです。

edButtons.push(
   new edButton(
      'ed_bold'
      'http://hogehoge.com/emoji.gif'
      ,'画像名'
      ,'<img src="hogehoge.com/emoji.gif" width="17" height="17" alt="" />'
      ,''
      ,''
   )
);

サンプル頁 これでタグも絵文字も一括管理♪


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

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

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

2.画像変換スクリプトの追加
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() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = '';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの 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;
}

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

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

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

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

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

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。