Web Liberty&freoカスタマイズ集

【重要】2017/09/03に公開されたfreo1.20.0にTinyMCE4.6.6が同梱されていますので、まだの方はバージョンアップされることをお勧めします。

【2016/06/16 TinyMCEのHPのデザイン変更に伴い修正しました】

freoの投稿エディタであるTinyMCEから新しくVer4がリリースされたので、導入してみました。
TinyMCE4は従来のTinyMCE3.xよりファイル数も少なくなって容量も軽くなり、アイコンボタンも画像からWebフォントに変更され、メニューバーもついたことからタッチパネルでも一応使えるような仕様になりました。

【追記2014/08/31】

※FirefoxでTiny_MCE4を使うと投稿時に本文が消えてしまう場合、一旦アドオンを無効にしてセーフモードで再起動し、サイド通常モードで再起動すると直るようです。

TinyMCE4をサーバにアップして使用する場合

※変更/追加するファイル構成（赤字が追加するファイル/ディレクトリ）

freo
 ┣ js ━ admin.js
 ┣ templates ━ internals ━ admin ━ header.html
 ┗ tinymce ┳ ～（略）～ 
            ┗ langs ━ ja.js

1. TinyMCE4のダウンロードページ のページにある「Download TinyMCE Community」にある「DOWNLOAD」からダウンロードします（メールアドレスを登録せよというポップアップが出ますが無視してもOK）。
2. 次に同じページの左側メニューにある「Languages Packages」をクリックし、「Japanese」の欄にチェックをし、横の「DOWNLOAD」をクリックして tinymce_languages.zip をダウンロードします。
3. tinymce_4.x.x.zip を解凍して、tinymce/js/ 内の tinymce/ を取り出します。
4. tinymce_languages.zip を解凍してできた langs/ の中にある ja.js を3.で取り出した tinymce/langs/ の中に貼り付けます。
5. 取り出した tinymce/ をfreoのあるサーバーにアップします。
   ※今まで使用していた tiny_mce/ は必要がないので削除しても構いません。
6. templates/admin/header.html の

   	<script type="text/javascript" src="{$freo.core.http_url}tiny_mce/tiny_mce.js"></script>

   の部分を

   	<script type="text/javascript" src="{$freo.core.http_url}tinymce/tinymce.min.js"></script>

   に変更（緑字を赤字に）します。
7. js/admin.js の //TinyMCE 以降の部分を

   //TinyMCE4
   tinymce.init({
   	language: 'ja',
   	selector: "#tiny_mce",
   	entity_encoding : "raw",
   	extended_valid_elements: "iframe[*]",
   	content_css: freo_path + 'css/common.css',
   	convert_urls: false,
   	plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor",
   	menubar: "file edit insert format table tools",
   	menu: {
   		file: {title: 'File', items: 'newdocument'},
   		edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall searchreplace'}, 
   		insert: {title: 'Insert', items: 'link | image media | pagebreak charmap template'}, 
   		format: {title: 'Format', items: 'bold underline strikethrough superscript subscript | formats | removeformat'}, 
   		table: {title: 'Table', items: 'inserttable | itableprops deletetable cell row column'}, 
   		tools: {title: 'Tools', items: 'code fullscreen'} 
   	},
   	toolbar1: "bold strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect | code fullscreen",
   	toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak | searchreplace | undo redo |",
   	style_formats: [
   		{title: "見出し", items: [
   			{title: "見出し4", format: "h4"},
   			{title: "見出し5", format: "h5"},
   			{title: "見出し6", format: "h6"}
   		]},
   		{title: "ブロック", items: [
   			{title: "段落", format: "p"},
   			{title: "引用", format: "blockquote"},
   			{title: "整形済み", format: "pre"},
   			{title: "コード", format: "code"},
   		]},
   		{title: "配置", items: [
   			{title: "左揃え", icon: "alignleft", format: "alignleft"},
   			{title: "中央揃え", icon: "aligncenter", format: "aligncenter"},
   			{title: "右揃え", icon: "alignright", format: "alignright"},
   			{title: "均等揃え", icon: "alignjustify", format: "alignjustify"}
   		]},
   		{title: "ネタバレ", items: [
   			{title : "ネタバレ", block : "div", classes : "hidearea"},
   			{title : "ネタバレ段落", inline : "p" }
   		]},
   	],
   });

   に書き換えます。
   ※ネタバレボタンを使わないならオレンジ色の部分は削除して下さい。

   【2013.9.1追記】TinyMCE4ではelement_formatがデフォルトで"html"になっており、HTMLモードにすると、imgタグの最後が />にならないせいか、エントリーギャラリー表示プラグインで画像が表示されなくなってしまうため、「element_format = "xhtml",」を追加しました。【2013.11.18削除しました】

   【2013.9.30追記】新規で投稿する際、以前の記事の内容が表示されたり、iPadではキーボードが表示されないなどの不具合があるので、メニューバーにファイル ⇒ 新規ドキュメントを追加するため太字部分を追加しました。新規で投稿する場合は、ファイル ⇒ 新規ドキュメント（Ctrl＋N）を使用して下さい。

TinyMCE4をサーバにアップせずCDNで使用する場合

※変更/追加するファイル構成（赤字が追加するファイル/ディレクトリ）
【2013.9.30追記】tinymce関連のファイルの保存場所を js/ から js/tinymce/ に変更しました。
言語ファイルとプラグインファイルをそれぞれ別ディレクトリに分けるように変更しました。

freo
 ┣ js ┳ admin.js
 ┃    ┗ tinymce ┳ langs ━ ja.js
(┃               ┗ plugins ━ （プラグインID） ━ ～（略）～)
 ┗ templates ━ internals ━ admin ━ header.html

1. TinyMCEのHPにある「Languages for TinyMCE 4」のページより「Japanese」の欄にチェックをし、一番下の「DOWNLOAD」をクリックして tinymce_languages.zip をダウンロードし、解凍してできた langs フォルダの中にある ja.js をfreoの js/ の中に tinymce/langs/ を作り、その中にアップします。
2. templates/admin/header.html の

   	<script type="text/javascript" src="{$freo.core.http_url}tiny_mce/tiny_mce.js"></script>

   の部分を

   	<script type="text/javascript" src="https://cdn.tinymce.com/4/tinymce.min.js"></script>

   に変更（緑字を赤字に）します。
   ※【追記2016/06/16】常に最新版を使用できるようCDNを変更にしました。
3. js/admin.js の //TinyMCE 以降の部分を

   //TinyMCE4
   tinymce.init({
   	language: 'ja',
   	language_url : freo_path +	'js/tinymce/langs/ja.js',
   	selector: "#tiny_mce",
   	entity_encoding : "raw",
   	extended_valid_elements: "iframe[*]",
   	content_css: freo_path + 'css/common.css',
   	convert_urls: false,
   	plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor",
   	menubar: "file edit insert format table tools",
   	menu: {
   		file: {title: 'File', items: 'newdocument'},
   		edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall searchreplace'}, 
   		insert: {title: 'Insert', items: 'link | image media | pagebreak charmap template'}, 
   		format: {title: 'Format', items: 'bold underline strikethrough superscript subscript | formats | removeformat'}, 
   		table: {title: 'Table', items: 'inserttable | itableprops deletetable cell row column'}, 
   		tools: {title: 'Tools', items: 'code fullscreen'} 
   	},
   	toolbar1: "bold strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect | code fullscreen",
   	toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak | searchreplace | undo redo |",
   	style_formats: [
   		{title: "見出し", items: [
   			{title: "見出し4", format: "h4"},
   			{title: "見出し5", format: "h5"},
   			{title: "見出し6", format: "h6"}
   		]},
   		{title: "ブロック", items: [
   			{title: "段落", format: "p"},
   			{title: "引用", format: "blockquote"},
   			{title: "整形済み", format: "pre"},
   			{title: "コード", format: "code"},
   		]},
   		{title: "配置", items: [
   			{title: "左揃え", icon: "alignleft", format: "alignleft"},
   			{title: "中央揃え", icon: "aligncenter", format: "aligncenter"},
   			{title: "右揃え", icon: "alignright", format: "alignright"},
   			{title: "均等揃え", icon: "alignjustify", format: "alignjustify"}
   		]},
   		{title: "ネタバレ", items: [
   			{title : "ネタバレ", block : "div", classes : "hidearea"},
   			{title : "ネタバレ段落", inline : "p" }
   		]},
   	],
   });

   に書き換えます。
   ※ネタバレボタンを使わないならオレンジ色の部分は削除して下さい。
   【2013.9.1追記】TinyMCE4ではelement_formatがデフォルトで"html"になっており、HTMLモードにすると、imgタグの最後が />にならないせいか、エントリーギャラリー表示プラグインで画像が表示されなくなってしまうため、「element_format = "xhtml",」を追加しました。【2013.11.18削除しました】
   【2013.9.30追記】新規で投稿する際、以前の記事の内容が表示されたり、iPadではキーボードが表示されないなどの不具合があるので、メニューバーにファイル ⇒ 新規ドキュメントを追加するため太字部分を追加しました。新規で投稿する場合は、ファイル ⇒ 新規ドキュメント（Ctrl＋N）を使用して下さい。
   【2016.7.17追記】追加プラグインで日本語が読めない原因が js/admin.js に language : 'ja', が抜けていることを判明したので追加しました。

   ※今まで使用していた tiny_mce/ は必要がないので削除しても構いません。
   なお、標準以外のプラグインを使う場合は、freoの js/tinymce/plugins/ の中にプラグインをアップして js/admin.js の plugins: の部分の下に

   	external_plugins:{
   		"（プラグインID）": freo_path + "js/tinymce/plugins/（プラグインID）/plugin.min.js",
   	},

   を追加すると使えるようになるようです。