【freo】【freoTips】【テンプレート系TIPS】freoでTinyMCE4をカスタマイズしてみる
CMS[freo]の管理画面で利用しているHTMLエディタ「TinyMCE 4」（freoの1.20.0以降に採用）のカスタマイズ方法を紹介します。
解説の他、記事最下部にカスタマイズ例を載せています。
ここに色々機能を追加してみます。
編集箇所は、[freo/js/admin.js]の116～131行目
//TinyMCE
tinymce.init({
language: 'ja',
selector:'#tiny_mce',
height: 500,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code'
],
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
content_css: [
freo_path + 'css/common.css',
],
convert_urls: false
});
上記の部分です。
日本語化について
TinyMCEは英語状態で配布されていますが、freo(ver.1.20.0)配布時点で既に日本語化されています。
[freo/js/admin.js]の118行目
language: 'ja',
が、TinyMCEを日本語化している部分です。
TinyMCE化するテキストエリアの指定について
管理画面内のテキストエリアの内、TinyMCE化するテキストエリアは[freo/js/admin.js]及び各管理画面用テンプレートHTMLで指定されています。
TinyMCE化するテキストエリアに利用する属性をadmin.jsで指定し、管理画面用テンプレートHTMLでテキストエリアタグにその属性を設定しています。
つまり、[freo/js/admin.js]の119行目
selector:'#tiny_mce',
に指定されているように、「tiny_mce」というIDがTinyMCE化するテキストエリアに利用する属性で、たとえばエントリー登録画面（freo/templates/internals/admin/entry_form.html）の24行目
<dd><textarea name="entry[text]" cols="65" rows="30" id="tiny_mce">{$input.entry.text}</textarea></dd>
のように、テキストエリアにid="tiny_mce"とadmin.jsで指定したIDを設定しているのです。
TinyMCE化するテキストエリアを増やす方法
TinyMCE化するテキストエリアを増やすには、[freo/js/admin.js]の119行目に属性を追加していけばOKです。
たとえば[sample1][sample2]というIDを追加したいなら、
selector:'#tiny_mce,#sample1,#sample2',
となります。
全てのテキストエリアをTinyMCE化する方法
全てのテキストエリアをTinyMCE化するには、[freo/js/admin.js]の119行目を下記のように変更してください。
mode: 'textareas',
selector:を削除し、mode:を'textareas'にすれば、全てのテキストエリアがTinyMCE化されます。
テキストエリアをTinyMCEにした後の注意
テキストエリアにTinyMCEを利用すると、入力する内容にHTMLタグを利用できます。HTMLを利用しなくとも、改行タグ（<br />）や段落タグ（<p>～</p>）は自動的に挿入されてしまいます。
入力されたHTMLタグを反映した状態で画面上に表示するには、変数に[|smarty:nodefaults]という修飾子をつけなくてはなりません。
たとえば、ページのオプションID[arasuji]のテキストエリアにTinyMCEを使った場合、入力されている文章をタグを反映して表示するには、ページ用のテンプレート（例えば[freo/templates/internals/pages/default.html]）の任意の箇所に、
{$page_associate.option.arasuji|smarty:nodefaults}
ボタンの追加
テキスト色変更ボタンを追加する方法
テキスト色変更ボタンを追加するには、[freo/js/admin.js]の121～125行目を
plugins: [
'advlist autolink lists link image charmap print preview anchor pagebreak',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'textcolor'
],
のように変更（「,'textcolor'」を追加）し、126行目
toolbar: '～中略～',
内の任意の箇所に「forecolor」を追加して
toolbar: '～中略～ forecolor',
のようにしてください。
テキスト背景色変更ボタンを追加する方法
テキスト色変更ボタンを追加するには、[freo/js/admin.js]の121～125行目を
plugins: [
'advlist autolink lists link image charmap print preview anchor pagebreak',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'textcolor'
],
のように変更（「,'textcolor'」を追加）し、126行目
toolbar: '～中略～',
内の任意の箇所に「backcolor」を追加して
toolbar: '～中略～ backcolor',
のようにしてください。
下線ボタンを追加する方法
下線ボタンを追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「underline」を追加して
toolbar: '～中略～ underline',
のようにしてください。
取り消し線ボタンを追加する方法
取り消し線ボタンを追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「strikethrough」を追加して
toolbar: '～中略～ strikethrough',
のようにしてください。
検索と置き換えボタンを追加する方法
検索と置き換え（置換）ボタンを追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「searchreplace」を追加して
toolbar: '～中略～ searchreplace',
のようにしてください。
水平罫線ボタンを追加する方法
水平罫線ボタンを追加するには、[freo/js/admin.js]の121～125行目を
plugins: [
'advlist autolink lists link image charmap print preview anchor pagebreak',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'hr'
],
のように変更（「,'hr'」を追加）し、126行目
toolbar: '～中略～',
内の任意の箇所に「hr」を追加して
toolbar: '～中略～ hr',
のようにしてください。
リンクの削除ボタンを追加する方法
リンクの削除ボタンを追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「unlink」を追加して
toolbar: '～中略～ unlink',
のようにしてください。
表ボタンを追加する方法
表（テーブル）ボタンを追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「table」を追加して
toolbar: '～中略～ table',
のようにしてください。
ソースコードボタンを追加する方法
ソースコードボタンを追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「code」を追加して
toolbar: '～中略～ code',
のようにしてください。
ページ区切りボタンを追加する方法
ページ区切りボタンを追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「pagebreak」を追加して
toolbar: '～中略～ pagebreak',
のようにしてください。
全画面表示ボタンを追加する方法
全画面表示ボタンを追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「fullscreen」を追加して
toolbar: '～中略～ fullscreen',
のようにしてください。
フォントファミリーを追加する方法
フォントファミリー（フォント変更）を追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「fontselect」を追加して
toolbar: '～中略～ fontselect',
のようにしてください。
フォントファミリーを追加する方法
フォントファミリー（フォント変更）を追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「fontselect」を追加して
toolbar: '～中略～ fontselect',
のようにしてください。
フォントサイズを追加する方法
フォントサイズを追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「fontsizeselect」を追加して
toolbar: '～中略～ fontsizeselect',
のようにしてください。
見出し設定（段落）を追加する方法
見出し設定（段落）を追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
内の任意の箇所に「formatselect」を追加して
toolbar: '～中略～ formatselect',
のようにしてください。
ツールバーの追加
初期状態ではツールバーは一行ですが、ツールバーを複数行（９行まで）に増やすことができます。
ツールバーを追加するには、[freo/js/admin.js]の126行目
toolbar: '～中略～',
を、
toolbar1: '～中略～',
toolbar2: '～中略～',
toolbar3: '～中略～',
のように変更してください。
freo（ver.1.20.0以降）でのTinyMCE4カスタマイズ例
たとえば、下記の画像のようにfreoでのTinyMCEをカスタマイズするソースをご紹介します。
[freo/js/admin.js]の121～126行目を下記のように変更してください。
plugins: [
'advlist autolink lists link image charmap print preview anchor pagebreak',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'textcolor hr'
],
toolbar1: 'bold italic underline strikethrough hr | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent',
toolbar2: 'forecolor backcolor | link unlink image | table | pagebreak | undo redo | searchreplace | fullscreen | code',
toolbar3: 'styleselect formatselect fontselect fontsizeselect |',
桜
freo 1.20.2使用。
TinyMCEについてアイコンがGoogle Chomeだと表示されません。
Microsoft Edgeに変更すると英字表示され、エラーメッセージも見れます。
最初は、\templates\internals\admin\header.htmlを怪しんで調べましたが、jsフォルダからTinyMCEを読み込んでいるので、\js\admin.jsも見ていますが、原因が分かりません。
お知恵をお借り出来ませんでしょうか。
もしお時間が御座いましたら、記載URLにTinyMCEのスクリーンショットを張り付けた記事を制裁しています。見て頂けると幸いです。