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

この記事をシェアする

・外部メールサーバーからメール送信するPHPの関数（簡略版）
・秒速でPHPのフォームにreCAPTCHA v3を導入するサンプルコード
・htaccessのRewriteでGETパラメータを無理やり引き継ぐPHPコード
・RewriteRuleが効いているURLで、?以降の文字列を取得する方法
・ワードプレスでコメントを完全無効にする方法【コメントスパム対策】
・MacでPHP環境のローカルサーバーを立ち上げる方法
・画像ファイルをリサイズして、データで返す
リサイズした結果を、ファイルではなく変数に返す。
・サーバー内の全てのファイルから、文字列検索
HTTPS化作業に使える
・PHPで、指定したディレクトリ以下のファイル一覧を再帰的に取得
・Googleストリートビューで建物内部が表示されないようにする
Google Maps API v3

資料室のトップに戻る

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

この記事をシェアする

関連記事

Spotifyで聴く

Meteoric Streamについて

管理人