Windowsソフト、iPhoneアプリ、ゲーム音楽素材の「Meteoric Stream」 -> 資料室 -> PHP&MySQL -> TinyMCEにelFinderを搭載した環境で、ファイルを選択できるようにする方法
縺雁ー城▲縺遞シ縺弱↑繧峨昴う繝ウ繝医し繧、繝GetMoney!

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

この記事をシェアする

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

関連記事

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