エントリー
freoのver1.20.0以降のTinyMCE4のカスタマイズ
- カテゴリー：TinyMCE4
freoのver1.20.0からTinyMCE4が標準添付されるようになりました。
しかし、ver1.20.0に添付されている js/admin.js のTinyMCEの設定では、不十分な部分が多いので、ここで設定の補足をしていきたいと思います。
※今後の更新で不要になる可能性があるので、その際はご容赦ください。
※他にもTinyMCE4の設定をカスタマイズするで紹介している方法もあるので合わせて参考にしてください。
【登録編集画面（テキストエリア）の字の大きさの変更】
例：登録編集画面の字の大きさを16pxに変更したい場合
js/admin.js のTinyMCEの設定部分の
content_css: [
freo_path + 'css/common.css',
],の下あたりに、
content_style: "body {font-size:16px;}",を追加します。
そうすると、通常はこのような表示（css/common.css の設定（14px×80%=12.8px）による表示）が
以下のように変更されます。
※上記の追加設定によりfreo本体の字の大きさは変更されないはずですが、他の設定との兼ね合いで本文をペーストした際に <span style="font-size: 16px;">ペーストした文章...</span> といったコードが追加される可能性があるのでご注意ください。文章をペーストする場合はできるだけテキストとしてペースト（ Ctrl + Shift + V、またはメニューの「テキストとして貼り付け」にチェックを入れてから Ctrl + V）してください。
【複数のcssファイルを参照したい場合】
TinyMCE4では読み込めるcssファイルを複数選択することが可能となりました。freoのデフォルトの設定では、css/common.css のみですが、他のファイル（例：css/style.css）も組み込みたい場合は、js/admin.js のTinyMCEの設定部分にある
content_css: [
freo_path + 'css/common.css',
],の部分を、
content_css: [
freo_path + "css/common.css",
freo_path + "css/style.css",
],に変更（赤字の部分を追加）します。
ファイルの順番は、templates/header.html の <head> 内で設定している順番に合わせてください。
※css/common.css を外す場合は、テキストエリア内の余白がなくなってしまうので、
content_style: "body {padding:10px;}",を追加して余白をとってください。
【プラグインの追加】
例：続きを読むボタン（pagebreakプラグイン）を追加したい場合⇒2018/5/27更新の1.20.1で追加済み
js/admin.js のTinyMCEの設定部分にある
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code'
],の部分を、
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code pagebreak'
],
に変更（赤字の部分を追加）します（pluginsの設定が3行ありますが、どの行に追加してもOK）。
そうすると、メニューの挿入の項目に「ページ区切り」が追加されます。
※TinyMCE4.xで使用しているプラグイン一覧はこちらを、メニューアイテム一覧についてはこちらをご覧ください。
【ツールボタンの追加】
プラグインを追加すると、メニューには自動的に追加されますが、ツールバーのボタンは任意で設定する必要があります。
例：続きを読むボタン（pagebreakプラグイン）を追加したい場合⇒2018/5/27更新の1.20.1で追加済み
あらかじめ上記のプラグインを追加したうえで、同じく js/admin.js のTinyMCEの設定部分にある
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',の部分を、
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image pagebreak',
に変更（赤字の部分を追加）します。
そうすると、ツールバーに「ページ区切り」ボタンが表示されます。
※TinyMCE4.xで使用しているツールボタン一覧についてはこちらをご覧ください。
【メニューやボタンのツールチップの表記の変更】
例：メニューやボタンのツールチップに表示される「ページ区切り」を「続きを読むを挿入」に変更したい場合
tinymce/langs/ja.js の145行目あたりにある
"Page break": "\u30da\u30fc\u30b8\u533a\u5207\u308a",の部分を、
"Page break": "\u7d9a\u304d\u3092\u8aad\u3080\u3092\u633f\u5165",に変更（緑字の部分を赤字に）します。
そうすると、ボタンのツールチップの表記が
のように変更されます（メニューの項目の表記も同時に変更されます）。
※TinyMCEの翻訳ファイル（tinymce/langs/ja.js）では、日本語はユニコードで記載されているので、表記を変更する場合は Unicode Escape Sequence で日本語をユニコードに変換してお使い下さい。
関連エントリー
- 2017/12/11 TinyMCEのmobile版を試してみました
- 2017/09/26 TinyMCE4用rubyタグ入力プラグイン
- 2017/09/26 TinyMCE4用ネタバレ入力プラグイン
- 2016/07/17 freoにTinyMCE4を導入する
- 2013/09/30 TinyMCE4でTinyMCE3.xのプラグインを使用する
- 2013/07/19 TinyMCE4の設定をカスタマイズする
コメント
- コメントはまだありません。
コメント登録
- コメントを入力してください。
- 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
