title: tinymce 4: how to create your own file manager?
body: <p>I am trying to make my own file browser so that I can select the image from my file manage and send it tinymce's image link's field, but I can't find any further information anywhere else on how I can achieve this.</p>
  
  <p>This is the code to open up an new popup on top the insert/ edit image,</p>
  
  <pre><code>file_browser_callback: function(field_name, url, type, win) {
  
      //tinymce.activeEditor.windowManager.close();
      //console.log(field_name);
  
      tinymce.activeEditor.windowManager.open({
          title: 'Browse Image',
          file: "yourbrowser.php?field=" + field_name + "&amp;url=" + url,
          width: 450,
          height: 305,
          resizable : "no",
          inline : "yes",
          close_previous : "no",
          buttons: [{
              text: 'Insert',
              classes: 'widget btn primary first abs-layout-item',
              disabled: true,
              onclick: 'close'
          }, {
              text: 'Close',
              onclick: 'close',
              window : win,
              input : field_name
          }]
      });
  
      return false;
  },
  </code></pre>
  
  <p>This is where I stuck - how can I select an image from my file manager and send it to the image link in insert/ edit image popup?</p>
  
  <p>Below is my entire code so far,</p>
  
  <pre><code>$(document).ready(function(){
  
          $('.button').click(function(){
  
              // @reference: http://www.tinymce.com/wiki.php/api4:method.tinymce.remove#
              if(tinyMCE.editors.length &gt; 0) {
  
                  // Remove all editors bound to textareas
                  //tinymce.remove('textarea');
  
                  // Remove all editors
                  tinymce.remove();
              }
  
              $('.content').load('full.html', function() {
  
                  if(tinyMCE.editors.length == 0) {
  
                      tinymce.init({
                          //selector: "textarea",
                          mode : "textareas",
                          editor_selector : "mce-customised",
                          editor_deselector : "not-editor",
                          theme: "modern",
                          plugins: [
                              "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                              "searchreplace wordcount visualblocks visualchars code fullscreen",
                              "insertdatetime media nonbreaking save table contextmenu directionality",
                              "emoticons template paste textcolor"
                          ],
                          toolbar1: "insertfile undo redo | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
                          toolbar2: "print preview media | forecolor backcolor emoticons",
                          image_advtab: true,
  
                          file_browser_callback: function(field_name, url, type, win) {
  
                              //tinymce.activeEditor.windowManager.close();
                              //console.log(field_name);
  
                              tinymce.activeEditor.windowManager.open({
                                  title: 'Browse Image',
                                  file: "yourbrowser.php?field=" + field_name + "&amp;url=" + url,
                                  width: 450,
                                  height: 305,
                                  resizable : "no",
                                  inline : "yes",
                                  close_previous : "no",
                                  buttons: [{
                                      text: 'Insert',
                                      classes: 'widget btn primary first abs-layout-item',
                                      disabled: true,
                                      onclick: 'close'
                                  }, {
                                      text: 'Close',
                                      onclick: 'close',
                                      window : win,
                                      input : field_name
                                  }]
                              });
  
                              return false;
                          },
  
  
                          // Specifying an Absolute Image Path
                          document_base_url : "http://localhost/test/2013/js/tinymce/tinymce_4.0.2/",
                          relative_urls : false,
                          remove_script_host : false,
  
  
                          image_list: "image_list.php",
                          link_list: "link_list.php"
                      });
  
                      $('.button-submit').submit_form();
                  }
  
              });
  
              return false;
          });
  
      });
  </code></pre>
  
  <p>The <a href="http://lauthiamkok.net/bin/tinymce4/index.php" rel="noreferrer">test site</a>.</p>
  
  <p>Or, do you know any good file mananger plugin that works with tinymce?</p>