TinyMCEにelFinderを搭載した環境で、ファイルを選択できるようにする方法
たまたま、TinyMCEを導入する機会があったのですが、
ファイルアップロードの処理を作る際に、意外と手間取りましたorz
「elFinder」というファイルマネージャを導入すれば良いものの、
問題は、elFinderデフォルトの設定では、ファイルをマネージするだけで、「画像を挿入する」的なボタンが搭載されておらず、せっかくアップロードしたファイルを、TinyMCE側に選択させる事が出来ませぬ。
というわけで、アップロードしたファイルを、ちゃんと選択できるようにしました。以下、今回追加したコードです。
2019年11月12日現在の情報なので、将来的にやり方が変わるかも知れません。
elFinder側の「opts = {};」を、下記に差し替えます。
ファイルアップロードの処理を作る際に、意外と手間取りました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();
}
}
});
},
});
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
};
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
インターネット黎明期から運営している生きる化石、Meteoric Streamへようこそ！
