TinyMCEでローカルフォルダを開くのに苦労した話

TinyMCEでローカルフォルダを開く

TinyMCE知ってますか？

プラットフォームに依存しない、ウェブベースのエディタでCDNでさくっとtextareaを拡張してくれます。
厳密に言うとフリーミニアム形式なのですが、かなりのところまでフリーで使えます。
かなり使い勝手が良いのですが、ローカルフォルダを開くのに苦労したので備忘録として残したいと思います。

ドキュメントを読む

まずはドキュメントをあたります。
TinyMCEのドキュメントは豊富です。
Example & Docs > Full Featuredにあるかと思い読みましたが、該当の実装はありませんでした。

Configure TinyMCE > File & Image Upload
これが良さそうです。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  file_browser_callback: function(field_name, url, type, win) {
    win.document.getElementById(field_name).value = 'my browser value';
  }
});

おお、画像inputの横にフォルダが表示された！

あ、Exampleそのままなら、そらそうだわw 開きたいのはローカルフォルダ。やりたいのはこの先です。
しかしながら、該当の箇所を見つけられない & ローカルフォルダを開くのをコールバックでする？？というのが理解できず、読み進めることに。

pluginを探す

TinyMCEは必要なものは拡張する薄いモジュールです。pluginにあるかもしれません。

image plugin, image tool plugin, media plugin,
ローカルフォルダのことはないですね。。。

途中で、file managerのextra pluginに行き着き。んー、こんなことしないといけないのか？と考えましたが、壮大になりすぎたので却下。

StackOverflow

最終的にStackOverflowで同様の投稿がありました。

    tinymce.init({
        toolbar : "imageupload",
        setup: function(editor) {
            var inp = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
            $(editor.getElement()).parent().append(inp);

            inp.on("change",function(){
                var input = inp.get(0);
                var file = input.files[0];
                var fr = new FileReader();
                fr.onload = function() {
                    var img = new Image();
                    img.src = fr.result;
                    editor.insertContent('<img src="'+img.src+'"/>');
                    inp.val('');
                }
                fr.readAsDataURL(file);
            });

            editor.addButton( 'imageupload', {
                text:"IMAGE",
                icon: false,
                onclick: function(e) {
                    inp.trigger('click');
                }
            });
        }
    });

これは、tinymceのsetupでinputをhiddenでeditorに追加して、イベントを追加しています。

参考：http://stackoverflow.com/questions/3872009/upload-image-from-local-into-tinymce

まとめ

ここまで書く必要はなかったのですが、公式のdocumentを読んでなかった(見つけれてない可能性もあり)のが時間がかかりました。
JavaScriptでeditorにinputを追加するというのは、原理原則から考えると、至極単純な話ですが、TinyMCE側でなんとかしてくれるといった頭が強く考えつきませんでした。
基本の再確認と、頭でっかちになってたなーっていう事例なのでプロセスも記述しました。