たまたま、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


			
この記事をシェアする
			

			



Tweet 





 




			

		


	


	

		
		
関連記事
	

		
					
・外部メールサーバーからメール送信するPHPの関数（簡略版）

					
・秒速でPHPのフォームにreCAPTCHA v3を導入するサンプルコード

					
・htaccessのRewriteでGETパラメータを無理やり引き継ぐPHPコード

					
・RewriteRuleが効いているURLで、?以降の文字列を取得する方法

					
・ワードプレスでコメントを完全無効にする方法【コメントスパム対策】

					
・MacでPHP環境のローカルサーバーを立ち上げる方法

					
・画像ファイルをリサイズして、データで返す
リサイズした結果を、ファイルではなく変数に返す。
					
・サーバー内の全てのファイルから、文字列検索
HTTPS化作業に使える
					
・PHPで、指定したディレクトリ以下のファイル一覧を再帰的に取得

					
・Googleストリートビューで建物内部が表示されないようにする
Google Maps API v3