• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

> Entry >freo>freoTips>テンプレート系TIPS> freoでTinyMCE4をカスタマイズしてみる

【freo】【freoTips】【テンプレート系TIPS】freoでTinyMCE4をカスタマイズしてみる

CMS[freo]の管理画面で利用しているHTMLエディタ「TinyMCE 4」(freoの1.20.0以降に採用)のカスタマイズ方法を紹介します。
解説の他、記事最下部にカスタマイズ例を載せています。

TinyMCE4

ここに色々機能を追加してみます。
編集箇所は、[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',

のようにしてください。

ツールバーの追加

初期状態ではツールバーは一行ですが、ツールバーを複数行(9行まで)に増やすことができます。

ツールバーを追加するには、[freo/js/admin.js]の126行目

toolbar: '~中略~',

を、

    toolbar1: '~中略~',
    toolbar2: '~中略~',
    toolbar3: '~中略~',

のように変更してください。

freo(ver.1.20.0以降)でのTinyMCE4カスタマイズ例

たとえば、下記の画像のようにfreoでのTinyMCEをカスタマイズするソースをご紹介します。

Tiny MCE 4

[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 |',

ページ移動

関連記事

ユーティリティ

Twitter

ページ上部へ