MT6 の TinyMCE で絵文字を使えるようにするプラグインを作りました

2014/03/05

MovableType 6 の TinyMCE で絵文字を使えるようにするプラグインを作りました。

hibiki/EmojiForTinyMCE · GitHub

他の絵文字プラグインが使えなくなってしまっていたので、それじゃあ自分で作るかーと思って作った感じです。TinyMCE の emotions プラグインをベースにして、Six Apart 絵文字 | Six Apart を使えるようにしました。

使い方

button

プラグインを追加すると TinyMCE のツールバーにスマイルマークのアイコンが追加されます。

emoji

スマイルマークのアイコンをクリックすることで絵文字がずらっと表示されますので、お好みの絵文字をクリックして使ってください。

絵文字を任意のものにしたい、増やしたい場合

1) mt-static/plugins/EmojiForTinyMCE/tinymce/img 内の画像を差し替え、または画像を追加してください。

2) 1) で行った調整にあわせて mt-static/plugins/EmojiForTinyMCE/tinymce の emoji.html を編集してください。

今後の予定、その他

  • 多言語対応はしていません(する箇所があんまりないといえばないですが…)。
  • スマイルマークのアイコンは 2 行目右端に追加されるのが固定になってますが「1 行目がいい」とかもあると思うので、どうにかしたい気もしてます。

MovableType で使われている TinyMCE は WordPress の TinyMCE とはちょっと違ってて、最初いまいちカスタマイズ方法が分かりませんでした。他のプラグインを参考にさせていただきなんとなく掴めたので、今は文字サイズの変更とかもプラグインで追加しちゃえばいいのかなーと思ってコソコソやってます。

ちなみに 1 つ前の記事「特定ディレクトリ内のファイル一覧を出して img タグにする」は、このプラグインを作る際に大量の画像から img タグを出したくてやっていた作業のログでした。