以前書いたこれの追記記事です。
http://qiita.com/qwe001/items/9a86839db4da5a7ab763
何がしたいか
今回、フォントサイズの変更機能の実装が必要だったのでつけたわけですが、
こちらのボタンは「Font Sizes」という文字列となっています。
で、これを日本語化すると「フォントサイズ」となるわけですが、
TinyMCEのCSSでは width: 90px; と書いてあるので、入りきらず、表記が「フォントサ…」となっちゃいます。ださすぎわろた。
TinyMCEで使用されている全アイコンを調べましたが、フォントサイズにあたるアイコンはありませんでした
なので、デフォルトの表記を「サイズ」にしつつ、
左側に「A」みたいなアイコンをつけます。
イメージとしてはこんな感じ。
実装
JSファイルを編集
- js/tinymce/langs/ja.js
- 「フォントサイズ」という文字列を「サイズ」に変更します。
- 31行目らへんを次のように変更
"Font Sizes": "\u30b5\u30a4\u30ba",
HTML(CSS)ファイルを編集
- index.phpとかindex.htmlとかindex.blade.phpとかそういうの
- !importantをつけないとオーバーライドできないので注意
- widthはautoでもいいです。
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
[aria-label^="Font Sizes"] .mce-txt {
width: 60px !important;
font-family: FontAwesome !important;
}
[aria-label^="Font Sizes"] .mce-txt:before {
content: "\f031";
margin-right: 5px;
}
</style>
最初はmce-txtクラスだけの指定でいけるだろうと思ってたんですが、どうもこのクラス他のボタン要素とかにも使ってたみたいです。
IDは私の環境ではmceu_4となっていますが、なんか他の人の環境だと番号が変わりそうな予感がしたので、属性セレクターで指定することに。
デモ
日本語化ファイルのCDNはないので、デモでは文字列が英語なのと、widthがautoになっています。
一応こんな風になりますよってイメージということで。