freoカスタマイズ集

TinyMCE4のカスタマイズついては、Configuration や Plugins の解説も参照して下さい。
ここでは主だったものをいくつか紹介します。

Enterキーを押したらpタグではなくbrタグを挿入して改行したい

js/admin.js の//TinyMCE4の設定部分に、

  forced_root_block: false,

を追加します。
※この場合pタグを挿入して改行したい場合は、Shiftキーを押しながらEnterキーを押します。

リンクの挿入で、target="_top"とかrel="lightbox"を入れたい場合

js/admin.js の//TinyMCE4の設定部分に、

  target_list: [
    {title: '新規ウィンドウ', value: '_blank'},
    {title: 'トップのフレームで開く', value: '_top'},
  ],
  rel_list: [
    {title: 'Lightbox', value: 'lightbox'},
  ],

を追加するとリンク挿入のモーダルに追加されます。
※デフォルトではすでに新規ウィンドウ（target="_blank"）の設定がなされていますが、必要なら改めて追加する必要があります。

フォントサイズ選択ボックスを追加する

js/admin.js の//TinyMCE4の設定部分のうち赤字部分を追加します。

//TinyMCE4
tinymce.init({
～（略）～
  toolbar1: "bold strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect fontsizeselect | code fullscreen | ",
～（略）～
  fontsize_formats: "10px 12px 14px 16px 24px",

※選択するフォントサイズについては

  fontsize_formats: "xx-large x-large large small x-small xx-small",

など、ピンク字の部分をお好みで編集してください。

フォント選択ボックスを追加する

js/admin.js の//TinyMCE4の設定部分のうち赤字部分を追加します。

//TinyMCE4
tinymce.init({
～（略）～
  toolbar1: "bold strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect fontselect | code fullscreen | ",
～（略）～
  font_formats: "明朝=ＭＳ Ｐ明朝,MS PMincho,ヒラギノ明朝 Pro W3,Hiragino Mincho Pro,serif;ゴシック=ＭＳ Ｐゴシック,MS PGothic,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,sans-serif",

※上記は明朝とゴシック用の日本語フォントを追加する場合の例

テンプレートを設定したい場合

js/admin.js の//TinyMCE4の設定部分のうち赤字部分を追加します。

//TinyMCE4
tinymce.init({
～（略）～
  plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor template",
～（略）～
  menu: {
～（略）～
    insert: {title: 'Insert', items: 'link | image media | pagebreak charmap template'},
～（略）～
  toolbar1: "bold strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect | code fullscreen template | ",
～（略）～
  templates : [
    {title: "テンプレート1", url: freo_path + 'files/medias/template1.html', description: "テンプレート1の説明"}, //複数ある時はカンマで区切ります
    {title: "テンプレート2", url: freo_path + 'files/medias/template2.html', description: "テンプレート2の説明"}
  ],

※テンプレートに使うファイルの場所はfreoのメディア管理用ディレクトリ内を指定しています。

絵文字を使う

以前、TinyMCE3.xでの絵文字プラグインの導入方法 を紹介しましたが、TinyMCE4では絵文字プラグインの名称が「emotions」から「emoticons」と微妙に変更となりました。
1) tinymce/plugins/emoticons/ をコピーして emoticons をemotionsにリネームし（emotionsの絵文字を使わないのならリネームしなくてもOK）、tinymce/plugins/emotions/img に今まで使用していた絵文字アイコンをコピーします。
2) tinymce/plugins/emotions/plugin.min.js をエディタで開き、以下のように変更します。
※以下は上記リンクのプラグイン導入例の2)の場合（WDPで絵文字を使用していた場合）を前提にしています。

tinymce.PluginManager.add("emoticons",

の部分を、

tinymce.PluginManager.add("emotions",

に（1.のリネームをしていない場合は不要）、

var i=t+"/img/smiley-"+n+".gif"

の部分を、

var i=t+"/img/emoji/pp_"+n+".gif"

に（絵文字のアイコンのあるディレクトリとファイル名の共通する部分の設定）、

var i=[["cool","cry","embarassed","foot-in-mouth"],["frown","innocent","kiss","laughing"],["money-mouth","sealed","smile","surprised"],["tongue-out","undecided","wink","yell"]];

の部分を、

var i=[["00","01","02","03"],["04","05","06","07"],["08","09","10","11"],["12"]];

に（絵文字のアイコンのファイル名の設定）します。
3) エクスポートプラグインでエントリーのデータベース（freo_entries）を出力しエディタで開いて、

src="https://～freoの設置URL～/tiny_mce/plugins/emotions/img/pepper/pp_**.gif"

の部分を、

src="https://～freoの設置URL～/tinymce/plugins/emotions/img/pepper/pp_**.gif"

に置換してインポートプラグインでデータベースを入力します。
※1.のリネームをしていない場合は、置換先を

src="https://～freoの設置URL～/tinymce/plugins/emoticons/img/pepper/pp_**.gif"

にします。

ソースコードのダイアログの大きさの変更

※ver4.0.3から方法が変更になりました
TinyMCE4でHTMLソースコードを見るときに開くダイアログの大きさが下のようになってしまい、「OK」や「キャンセル」のボタンが見えず使用しづらくなる場合があります。

ソースコードのダイアログの大きさを変更するには、js/admin.js の//TinyMCE4の設定部分に、

  code_dialog_width: 500,
  code_dialog_height: 440,

を追加するとうまく収まります（デフォルトはwidth:600、height:500なので各自で調整して下さい）。

※ちなみにこのダイアログはタイトル部分をドラックして上に持ち上げることでボタンが見えるようにもなります。