エントリー
freoで絵文字を使うには
- カテゴリー:TinyMCE3
- js/admin.js の87行目以降のうち赤字部分を追加してアップします。
編集画面に表情アイコンが表示されます。//TinyMCE tinyMCE.init({ ~(略)~ plugins: 'advimage,advlink,autosave,contextmenu,fullscreen,inlinepopups,pagebreak,searchreplace,table,emotions', theme: 'advanced', ~(略)~ theme_advanced_buttons2: 'forecolor,backcolor,removeformat,|,link,unlink,image,charmap,pagebreak,|,search,replace,|,undo,redo,|,emotions', ~(略)~ });
これだけでtinyMCEに添付されている絵文字が使用できます。 - 過去にWDPで絵文字を使用していた場合、1.の作業に加えて行ってください。
Right Bower(kirijiさん)作成の WebDiaryProに絵文字ボタンを作る を参考に設定して使用している絵文字をfreoでも使うことを前提としています。
- 絵文字アイコンを tiny_mce/plugins/emotions/img/ 内に emoji/ を作成しアップします。
- tiny_mce/plugins/emotions/emotions.htm の下から5行目(</table>の前)に次のタグを加入します。
<tr> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_00.gif','…');"><img src="img/emoji/pp_00.gif" width="17" height="17" border="0" alt="{#…}" title="{#…}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_01.gif','ハート');"><img src="img/emoji/pp_01.gif" width="17" height="17" border="0" alt="{#ハート}" title="{#ハート}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_02.gif','汗');"><img src="img/emoji/pp_02.gif" width="17" height="17" border="0" alt="{#汗}" title="{#汗}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_03.gif','蒼ざめ');"><img src="img/emoji/pp_03.gif" width="17" height="17" border="0" alt="{#蒼ざめ}" title="{#蒼ざめ}" /></a></td> </tr> <tr> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_04.gif','怒');"><img src="img/emoji/pp_04.gif" width="17" height="17" border="0" alt="{#怒}" title="{#怒}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_05.gif','♪');"><img src="img/emoji/pp_05.gif" width="17" height="17" border="0" alt="{#♪}" title="{#♪}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_06.gif','?');"><img src="img/emoji/pp_06.gif" width="17" height="17" border="0" alt="{#?}" title="{#?}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_07.gif','!');"><img src="img/emoji/pp_07.gif" width="17" height="17" border="0" alt="{#!}" title="{#!}" /></a></td> </tr> <tr> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_08.gif','滝汗');"><img src="img/emoji/pp_08.gif" width="17" height="17" border="0" alt="{#滝汗}" title="{#滝汗}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_09.gif','ひらめき');"><img src="img/emoji/pp_09.gif" width="17" height="17" border="0" alt="{#ひらめき}" title="{#ひらめき}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_10.gif','ハートブレイク');"><img src="img/emoji/pp_10.gif" width="17" height="17" border="0" alt="{#ハートブレイク}" title="{#ハートブレイク}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_11.gif','LOVE LOVE');"><img src="img/emoji/pp_11.gif" width="17" height="17" border="0" alt="{#LOVE LOVE}" title="{#LOVE LOVE}" /></a></td> </tr> <tr> <td><a href="javascript:EmotionsDialog.insert('emoji/pp_12.gif','ドクロ');"><img src="img/emoji/pp_12.gif" width="17" height="17" border="0" alt="{#ドクロ}" title="{#ドクロ}" /></a></td> </tr>
- 文字コードをUTF-8にして保存してアップします。
- 編集画面の表情アイコンを押して次のようになればOKです。
※表示の変更ができてない場合はブラウザのキャッシュをクリアしてから更新してみてください。
関連エントリー
- 2017/06/10 freoのTinyMCEのバージョンをアップするには(HTML5に対応)
- 2012/10/24 freoでYouTube動画を貼り付けるTinyMCEプラグイン(colorboxで表示)
- 2012/10/06 freoのTinyMCEのテンプレートにメディア管理のファイルを使う
- 2012/10/06 freoのメディア管理のファイル書き換えでTinyMCEを導入する
- 2012/09/20 freoのTinyMCEにrubyタグ入力プラグインを導入する
- 2012/08/29 freoのTinyMCEにネタバレボタンを追加する方法
- 2012/06/20 freoでYouTube動画を貼り付けるTinyMCEプラグイン(埋め込み表示)
- 2011/05/01 freoに付属しているTinyMCEのフォントサイズ選択ボックスを追加する
- 2011/04/27 freoに付属しているTinyMCEのボタンのカスタマイズ
- 2011/02/14 freoのTinyMCEで登録編集画面の本文の文字が小さくなってしまうのを解消するには