TinyMCE

TinyMCE(v4)はリッチテキスト形式でコンテンツを編集できる便利なプラグイン。
デフォルトでオンになっていますが、htmlソースできちんと編集したい人には邪魔になったりも。。。ロール権限によって、開発者ならソースコードで、更新担当者ならTinyMCEでと振り分けたり、あるいはテンプレートによって細かく設定を使い分けたりできると、飛躍的に便利になります。

設定ポイントは2ヶ所!

1.管理画面の設定

2.プラグインの設定

この2ヶ所をうまく使いこなして設定していきます。

メニューツールをカスタマイズしたい

デフォルトで入っているツール、文字や背景色の色変更などが入っていません。ここをカスタマイズすると使い勝手がよくなります。

TinyMCEのサイトに詳しいパラメータの設定があります。

デフォルトのツールバー

デフォルトの設定画面

「カスタムボタン」に加えると便利なもの(#1は1段目、#2は2段目です。|はメニューのセパレーター。)

forecolor:文字色の変更ツール

backcolor:背景色の変更ツール

template:テンプレを置くツール(※Evolutionのテンプレートではありません。TinyMCEで置ける設定のカタマリみたいなものです。)

↓#3(3段目)に設定してみたサンプル(ツールが増えました!)

段落をカスタマイズ

デフォルトでヘッダー1〜ヘッダー3が入っていますが、これを増やしたい!

section

TinyMCE内の編集エリアのデザインを制御したい

専用のcssを作成、実際のサイト

実際のサイトとTinyMCE両方にcssファイルをつなぎます。

例えばh2のデザインを両方で揃える場合。

サイトのほうのコンテンツが#maincontents h2とした場合、、TinyMCE#tinymce h2となるので、

maincontents h2,
#tinymce h2{
〜ここに設定〜
}

と書きます。

なお、編集エリアのifreme内のデフォルトのIDは#tinymceです。これを変更したい場合は

Custom Parameters → body_id : "my_id"

と入力します。
上記の例ではiframe内のメインのbodyは#my_idになります。(何もしないとbodyのデフォルトは#tinymceです)

Custom ParametersはTinyMCEのinitに相当します。複数記載したい場合はカンマで区切ります。
その他のTinyMCEのinitの設定はこちらで確認できます。 詳しくはこちら

特定のページのみ、TinyMCEを使いたくない

下記のようなプラグインを作り、システムイベントのOnDocFormPrerenderにチェックを入れます。

global $content;
if($content['template']==4||$content['template']==7||$content['template']==8)
{
  $content['richtext'] = 0;
}