Wordpressプラグイン TinyMCE Advancedの絵文字版を勝手にバージョンアップ

Wordpresの高機能エディタ「TinyMCE Advanced」はめちゃくちゃ便利ですが、TypePadの絵文字を入れた
TinyMCE AdvancedっていうプラグインにTypePad絵文字追加したよ | PHPプログラマのバリ・ポジ情報ブログ

はもっと便利ですよね。クライアントさんに喜ばれるので入れている方も多いと思います。

しかし、この絵文字入りのTinyMCE(TinyMCE-AdvancedEmoji)は更新が進んでおらず、3.2のままなんですよね…。2011年8月現在、元のプラグインは3.4.2.1を公開しています。
そこで、新しいバージョン3.4.2.1に絵文字機能を付ける手順をまとめてみました。
GPLって言ってるし、ライセンス的には大丈夫だよね？？（なんか問題あったら教えてください…。）
これで更新があっても大丈夫。

プログラムのダウンロード

まずは、本家 TinyMCE Advancedをダウンロード
TinyMCE Advanced — WordPress Plugins

それから、絵文字入りのTinyMCE(TinyMCE-AdvancedEmoji)をダウンロード
TinyMCE AdvancedっていうプラグインにTypePad絵文字追加したよ | PHPプログラマのバリ・ポジ情報ブログ

1. tinymce-advanced.3.4.2.1.zip(バージョンによります)
2. tinymce-advancedemoji.zip

を展開する。

ファイルとフォルダのコピー

１の以下のファイルまたはフォルダを２の展開フォルダにコピー。階層にも注意。
images\emoji.gif
mce\emoji

ファイルを修正

tadv_admin.php

139行目 追加

if ( in_array('emoji', $allbtns) ) $plugins[] = 'emoji';

145行目 修正
配列の最後にこれを追加。

, 'TypePad Emoji' => 'emoji'

行全体を書くと、

$buttons = array( 'Horizontal rule' => 'hr', 'Hide next row' => 'wp_adv', 'Quote' => 'blockquote', 'Bold' => 'bold', 'Italic' => 'italic', 'Strikethrough' => 'strikethrough', 'Underline' => 'underline', 'Bullet List' => 'bullist', 'Numbered List' => 'numlist', 'Outdent' => 'outdent', 'Indent' => 'indent', 'Allign Left' => 'justifyleft', 'Center' => 'justifycenter', 'Alligh Right' => 'justifyright', 'Justify' => 'justifyfull', 'Cut' => 'cut', 'Copy' => 'copy', 'Paste' => 'paste', 'Link' => 'link', 'Remove Link' => 'unlink', 'Insert Image' => 'image', 'More Tag' => 'wp_more', 'Split Page' => 'wp_page', 'Search' => 'search', 'Replace' => 'replace', '<!--fontselect-->' => 'fontselect', '<!--fontsizeselect-->' => 'fontsizeselect', 'Help' => 'wp_help', 'Full Screen' => 'fullscreen', '<!--styleselect-->' => 'styleselect', '<!--formatselect-->' => 'formatselect', 'Text Color' => 'forecolor', 'Back Color' => 'backcolor', 'Paste as Text' => 'pastetext', 'Paste from Word' => 'pasteword', 'Remove Format' => 'removeformat', 'Clean Code' => 'cleanup', 'Check Spelling' => 'spellchecker', 'Character Map' => 'charmap', 'Print' => 'print', 'Undo' => 'undo', 'Redo' => 'redo', 'Table' => 'tablecontrols', 'Citation' => 'cite', 'Inserted Text' => 'ins', 'Deleted Text' => 'del', 'Abbreviation' => 'abbr', 'Acronym' => 'acronym', 'XHTML Attribs' => 'attribs', 'Layer' => 'layer', 'Advanced HR' => 'advhr', 'View HTML' => 'code', 'Hidden Chars' => 'visualchars', 'NB Space' => 'nonbreaking', 'Sub' => 'sub', 'Sup' => 'sup', 'Visual Aids' => 'visualaid', 'Insert Date' => 'insertdate', 'Insert Time' => 'inserttime', 'Anchor' => 'anchor', 'Style' => 'styleprops', 'Smilies' => 'emotions', 'Insert Movie' => 'media', 'IE Spell' => 'iespell', 'TypePad Emoji' => 'emoji' );

tadv_defaults.php

20行目 修正
配列の最後(最後はワイプの文字列になっている)から一つ手前にこれを追加。

, 'emoji'

行全体を書くと、

$tadv_allbtns = array( 'wp_adv', 'bold', 'italic', 'strikethrough', 'underline', 'bullist', 'numlist', 'outdent', 'indent', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'cut', 'copy', 'paste', 'link', 'unlink', 'image', 'wp_more', 'wp_page', 'search', 'replace', 'fontselect', 'fontsizeselect', 'wp_help', 'fullscreen', 'styleselect', 'formatselect', 'forecolor', 'backcolor', 'pastetext', 'pasteword', 'removeformat', 'cleanup', 'spellchecker', 'charmap', 'print', 'undo', 'redo', 'tablecontrols', 'cite', 'ins', 'del', 'abbr', 'acronym', 'attribs', 'layer', 'advhr', 'code', 'visualchars', 'nonbreaking', 'sub', 'sup', 'visualaid', 'insertdate', 'inserttime', 'anchor', 'styleprops', 'emotions', 'media', 'blockquote', 'separator', 'emoji', '|' );

tinymce-advanced.php

305行目 修正
配列の最後にこれを追加。

, 'emoji'

行全体は、

$dolangs = array( 'advhr', 'advimage', 'advlink', 'searchreplace', 'style', 'table', 'xhtmlxtras', 'emoji' );

css/tadv-styles.css

59行目 追加

#emoji {
	background: url(../images/emoji.gif) no-repeat 0 0;
}

IE8で発生する不具合を微修正

IE8で、絵文字の挿入が意図しない場所になってしまう不具合があるので、これもついでに修正。
ここのサイトにお世話になりました。
Web系な仕事のブログ的な:WORDPRESS 絵文字プラグインの不具合を直す

mce/emoji/js/emoji.js

9行目、ed.execCommandの前に追加

if (tinymce.isIE) { ed.focus(); ed.selection.moveToBookmark(parent.tinymce.EditorManager.activeEditor.windowManager.bookmark); }

※ただし上記修正後、IE8では１度の操作で絵文字２コ以上を連続して挿入することができなくなる。

だそうですが、挿入位置が変わるよりは良いかと。

【2011/08/22 追記】
ohgumaさんより、貴重な情報を頂きましたので追記。
Wordpress の TinyMCE Advanced プラグインの絵文字対応 - 熊工房 ohgumaの腹凹ませたい日記

以下のサイトでこの不具合を完全に修正できるようです。
http://ameblo.jp/webtech58/entry-10225702548.html

mce/emoji/js/emoji.js

9行目、ed.execCommand()の前に追加

tinyMCEPopup.restoreSelection();
// Fixes crash in Safari
if (tinymce.isWebKit)
ed.getWin().focus();

"Fixes crash in Safari"とあるので、Sarafiの不具合も修正するのでしょうか。これは確認できていませんが、素直に追加。

9行目、ed.execCommand()の後に追加

tinyMCEPopup.storeSelection();

ちゃんと意味はわかっていませんが、restoreで記憶して、絵文字を追加した後、storeで戻しているんでしょうね。とりあえずIE8で動くことを確認できたのでよしとします。
貴重な情報ありがたいです。

WordPress管理画面からプラグインを有効にする

プラグインを有効にしたら、設定メニュの下にある「TinyMCE Advanced」から必要なツールバーを追加していきます。

あとは、こいつを追加するだけです。

圧縮ファイルのダウンロード

はてなでは公開できないんですね…。ただいまほかのサーバーでダウンロードできるように準備中です。
今すぐ欲しいって方は直接言ってください。
バージョンが上がったら上の方法で更新してまた誰かが公開してくれることを期待しています。