Memo

メモ > 技術 > 開発: TinyMCE
入手
freoへの導入
日本語化
カスタマイズ例
戻る
入手

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',
    ]
});
Memo

Advertisement
