入手
https://www.tinymce.com/download/
の「Download TinyMCE Community」からTinyMCEをダウンロードする。
展開して作成される js/tinymce/ を tiny_mce4/ としてアップロードする。（フォルダ名は何でも可。）
freoへの導入
templates/internals/admin/header.html
の17行目あたりにあるにある
<script type="text/javascript" src="{$freo.core.http_url}tiny_mce/tiny_mce.js"></script>
を以下のように変更する。（アップロードしたTinyMCEを読み込む。）
<script type="text/javascript" src="{$freo.core.http_url}tiny_mce4/tinymce.min.js"></script>
次に
js/admin.js
の116行目あたりにある
//TinyMCE
tinyMCE.init({
language: 'ja',
〜略〜
theme_advanced_resizing: true
});
を以下のように変更する。これで初期状態のTinyMCEが表示される。
//TinyMCE
tinymce.init({
selector:'#tiny_mce'
});
日本語化
https://www.tinymce.com/download/language-packages/
の「Japanese」から言語ファイルをダウンロードし、
展開して作成される ja.js を tiny_mce4/langs/ 内にアップロードする。
js/admin.js のコードを以下のように変更すると、日本語で表示されるようになる。
//TinyMCE
tinymce.init({
language: 'ja',
selector:'#tiny_mce'
});
カスタマイズ例
あくまでも一例。
//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',
]
});