その他

elFinderをポップアップして親ウィンドウにパスを返す方法

TAKE

elFinderをポップアップして親ウィンドウにパスを返す方法は、論理的に考えると特に難しくはないのですが、色々と試すうちに割と時間がかかってしまったので、備忘録的に、ここに残しておきます。

【解決法】

elFinderとModaalを使って、elFinderをポップアップして元ページのテキストボックスに値をセットする形です。

index.html

<a href="#" id="finder">
  <img src="/img/icon.svg">
</a>

<link rel="stylesheet" type="text/css" href="/Modaal/dist/css/modaal.min.css">
<script type="text/javascript" src="/Modaal/dist/js/modaal.min.js></script>
<script>
jQuery(function($){ // WP利用可
    finder = $('#finder').modaal({
        type:'iframe',
        content_source: '/elFinder-2.1.61/elfinder.html',
        height:400,
        hide_close:true,
        modal:true,
    });
});
</script>

/elFinder-2.1.61/elfinder.html

getFileCallback : function(file, fm) {

	$('#box', parent.document).val(file.url); // #boxに値を返す
	window.parent.finder.modaal('close'); // finderのModaalを閉じる
},

【備考】

要は、「finder = $(‘#finder’).modaal();」でポップアップと同時に変数に入れてしまい、ポップアップウィンドウ側からその変数（オブジェクト）にアクセスする形です。