ユーティリティ

2021年10月

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

ブログパーツ

Twitter

Twilogを見る

Feed

エントリー

freoのメディア登録・メディア管理のTinyMCE5プラグイン

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

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

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

  • こちらからダウンロードしてください。
  • ファイル構成
freo_medias
jstinymcepluginsfreomediaimgmedia.svg(アイコン用画像)
    ┃ ┣ langsen.js(英語表記ファイル)
    ┃           ┃       ┗ ja.js(日本語表記ファイル)
    ┃ ┣ plugin.js
    ┃ ┗ plugin.min.js
                          ┗ freomediafromimgmedia-plus.svg(アイコン用画像)
            ┣ langsen.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.pngimages/icons/media_add.png も必要なければ削除OKです。
  6. すると、エントリー登録等の「本文」横のボタンが無くなり、以下のようになります。
    105-1.png
    空白行の先頭にカーソルを合わせると、クイック挿入ツールバーに赤丸のfreoメディア管理のアイコンが追加されています。
  7. TinyMCEのメニューバーの「ツール」をクリックすると、メディア管理とメディア登録のメニューが追加されています。
    105-2.png
  8. あと、ツールバーにあるボタンを押すと、ツールバーにメディア管理とメディア登録のアイコンが追加されています。
    105-3.png

プラグインの使い方

  • 従来のものと同じ方法で使用できます。
  • freoメディア管理を開いたところ(画面一杯に開きます)
    105-4.png
  • freoメディア登録を開いたところ(画面一杯に開きます)
    105-5.png

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)