Windowsソフト、iPhoneアプリ、ゲーム音楽素材の「Meteoric Stream」 -> 資料室 -> PHP&MySQL -> TinyMCEにelFinderを搭載した環境で、ファイルを選択できるようにする方法

TinyMCEにelFinderを搭載した環境で、ファイルを選択できるようにする方法

たまたま、TinyMCEを導入する機会があったのですが、
ファイルアップロードの処理を作る際に、意外と手間取りましたorz

「elFinder」というファイルマネージャを導入すれば良いものの、
問題は、elFinderデフォルトの設定では、ファイルをマネージするだけで、「画像を挿入する」的なボタンが搭載されておらず、せっかくアップロードしたファイルを、TinyMCE側に選択させる事が出来ませぬ。

というわけで、アップロードしたファイルを、ちゃんと選択できるようにしました。以下、今回追加したコードです。

2019年11月12日現在の情報なので、将来的にやり方が変わるかも知れません。

tinymce.init({
selector: ".htmltext",
language: "ja",
plugins: "image",
toolbar: "image",
     file_picker_callback: function(callback, value, meta) {
     tinymce.activeEditor.windowManager.openUrl({
     url: '/path/to/elFinder/elfinder.html',
     title: 'ファイルのアップロード・選択',
     resizable: 'yes',
     onMessage: function (api, data) {
     if (data.mceAction === 'customAction') {
     callback(data.url);
     api.close();
     }

     }
     });
     },
});


elFinder側の「opts = {};」を、下記に差し替えます。

opts = {
    getFileCallback : function(file, fm) {
        var windowManager = parent.tinymce.activeEditor.windowManager;
        if (windowManager != '') {
            window.parent.postMessage({
                mceAction: 'customAction',
                url: file.url
            }, '*');
        }
    },
    url : 'php/connector.minimal.php',
    lang: lang
};
    
この記事の最終更新日:2019/11/12
最初に記事を書いた日:2019/11/12

この記事をシェアする

このエントリーをはてなブックマークに追加

関連記事

Spotifyでフォローする

Meteoric Streamについて

運営者情報

開発を依頼したい

Windowsソフト、iPhoneアプリ、ゲーム音楽素材の「Meteoric Stream」 -> 資料室 -> PHP&MySQL -> TinyMCEにelFinderを搭載した環境で、ファイルを選択できるようにする方法