たまたま、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
この記事をシェアする
関連記事