freoカスタマイズ集

エントリーやページ登録する際にメディア画像を貼り付けられるように「メディア管理」と「メディア登録」のボタンが本文の横にありますが、小さいのとTinyMCEで全画面表示で使用していると、使用するのにいちいち全画面表示を解除しないといけないのが面倒だったりします。

なので、TinyMCE5のプラグインを作ってみました。

プラグインのダウンロード

• こちらからダウンロードしてください。
• ファイル構成

freo_medias
 ┗ js ━ tinymce ━ plugins ┳ freomedia ┳ img ━ media.svg（アイコン用画像）
                             ┃           ┣ langs ┳ en.js（英語表記ファイル）
                             ┃           ┃       ┗ ja.js（日本語表記ファイル）
                             ┃           ┣ plugin.js 
                             ┃           ┗ plugin.min.js 
                             ┗ freomediafrom ┳ img ━ media-plus.svg（アイコン用画像）
                                              ┣ langs ┳ en.js（英語表記ファイル）
                                              ┃       ┗ ja.js（日本語表記ファイル）
                                              ┣ plugin.js 
                                              ┗ plugin.min.js 

プラグインの導入方法

1. TinyMCE5を導入していることが前提です。
2. ダウンロードしたファイルを解凍して、js/ フォルダをfreoの js/ ディレクトリにアップしてください。
3. js/admin.js の「//TinyMCE」以降の部分を、
   

   //TinyMCE
   tinymce.init({
   ～（略）～
   	plugins: [
   		'advlist lists link image charmap preview anchor hr nonbreaking searchreplace visualblocks code fullscreen insertdatetime media table textcolor pagebreak quickbars help'
   	],
   	external_plugins:{
   		'freomedia': freo_path + 'js/tinymce/plugins/freomedia/plugin.min.js',
   		'freomediaform': freo_path + 'js/tinymce/plugins/freomediaform/plugin.min.js',
   	},
   	toolbar: 'bold underline strikethrough | styleselect | bullist numlist outdent indent | code fullscreen | forecolor backcolor removeformat | link unlink image media charmap pagebreak | freomedia freomediaform | searchreplace | undo redo help',
   	toolbar_mode: 'sliding',
   	menu: {
   		tools: { title: 'Tools', items: 'code | freomedia freomediaform' }
   	},
   	mobile: {
   		menubar: true,
   		plugins: [ 'image link media table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists checklist help quickbars advtable' ],
   		toolbar: [ 'bullist numlist styleselect' ]
   	},
   	quickbars_insert_toolbar: 'freomedia image media quicktable | hr charmap nonbreaking pagebreak',
   	quickbars_selection_toolbar: 'bold underline strikethrough styleselect | quicklink removeformat',
   ～（略）～
   

   に変更（赤字部分を追加）します。 
4. js/ifreme.js の「//メディア挿入」の部分にある

   	//メディア挿入
   	$('a.insert').click(function() {
   		if (parent.tinymce.isIE) {
   			parent.tinyMCE.activeEditor.focus();
   			parent.tinyMCE.activeEditor.selection.moveToBookmark(parent.tinymce.EditorManager.activeEditor.windowManager.bookmark);
   		}
   		parent.tinyMCE.activeEditor.execCommand('mceInsertContent', false, $(this).attr('title'));
   		parent.$.fn.colorbox.close();
   	});
   

   の部分を、
   

   	//メディア挿入
   	$('a.insert').click(function() {
   		if (parent.tinymce.isIE) {
   			parent.tinyMCE.activeEditor.focus();
   			parent.tinyMCE.activeEditor.selection.moveToBookmark(parent.tinymce.EditorManager.activeEditor.windowManager.bookmark);
   		}
   		parent.tinyMCE.activeEditor.execCommand('mceInsertContent', false, $(this).attr('title'));
   		parent.tinyMCE.activeEditor.windowManager.close();
   		parent.$.fn.colorbox.close();
   	});
   

   に変更（赤字部分を追加）します。
5. 必要なければ、templates/internals/admin/entry_form.html の23行目、templates/internals/admin/page_form.html の26行目、templates/internals/admin/information_form.html の31行目、あたりにある

     <dt>本文 <a href="{$freo.core.http_file}/admin/media?type=iframe" class="colorbox" title="メディア"><img src="{$freo.core.http_url}images/icons/media.png" alt="メディア管理" title="メディア管理" width="16" height="16" /></a> <a href="{$freo.core.http_file}/admin/media_form?type=iframe" class="colorbox" title="メディア"><img src="{$freo.core.http_url}images/icons/media_add.png" alt="メディア登録" title="メディア登録" width="16" height="16" /></a></dt>
   

   の部分を、
   

     <dt>本文</dt>
   

   に変更（緑字を削除）してもOKです。
   images/icons/media.png と images/icons/media_add.png も必要なければ削除OKです。
6. すると、エントリー登録等の「本文」横のボタンが無くなり、以下のようになります。
   
   空白行の先頭にカーソルを合わせると、クイック挿入ツールバーに赤丸のfreoメディア管理のアイコンが追加されています。
7. TinyMCEのメニューバーの「ツール」をクリックすると、メディア管理とメディア登録のメニューが追加されています。
   
8. あと、ツールバーにあるボタンを押すと、ツールバーにメディア管理とメディア登録のアイコンが追加されています。
   

プラグインの使い方

• 従来のものと同じ方法で使用できます。
• freoメディア管理を開いたところ（画面一杯に開きます）
  
• freoメディア登録を開いたところ（画面一杯に開きます）