File browser demo

<script src="ckeditor/ckeditor.js"></script>
<textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
<script>
var roxyFileman = '/fileman/index.html?integration=ckeditor';
$(function(){
  CKEDITOR.replace( 'editor1',{filebrowserBrowseUrl:roxyFileman, 
                               filebrowserImageBrowseUrl:roxyFileman+'&type=image',
                               removeDialogTabs: 'link:upload;image:upload'});
});
</script>

<script src="tinymce/tinymce.min.js"></script>
<textarea id="tinymce" name="tinymce" rows="10" cols="80">
</textarea>
<script>
// This must be set to the absolute path from the site root.
var roxyFileman = '/fileman/index.html?integration=tinymce4';
  $(function() {
    tinyMCE.init({selector: '#tinymce', plugins: 'link image', 
                 toolbar: "link | image", file_browser_callback: RoxyFileBrowser});
});

function RoxyFileBrowser(field_name, url, type, win) {
  var cmsURL = roxyFileman;  // script URL - use an absolute path!
  if (cmsURL.indexOf("?") < 0) {
    cmsURL = cmsURL + "?type=" + type;
  }
  else {
    cmsURL = cmsURL + "&type=" + type;
  }
  cmsURL += '&input=' + field_name + '&value=' + win.document.getElementById(field_name).value;
  tinyMCE.activeEditor.windowManager.open({
    file: cmsURL,
    title: 'Roxy File Browser',
    width: 850, // Your dimensions may differ - toy around with them!
    height: 650,
    resizable: "yes",
    plugins: "media",
    inline: "yes", // This parameter only has an effect if you use the inlinepopups plugin!
    close_previous: "no"
	}, {
    window: win,
    input: field_name
	  });
  return false;
}
</script>

function FileSelected(file){
  /**
   * file is an object containing following properties:
   * 
   * fullPath - path to the file - absolute from your site root
   * path - directory in which the file is located - absolute from your site root
   * size - size of the file in bytes
   * time - timestamo of last modification
   * name - file name
   * ext - file extension
   * width - if the file is image, this will be the width of the original image, 0 otherwise
   * height - if the file is image, this will be the height of the original image, 0 otherwise
   * 
   */
  $(window.parent.document).find('#customRoxyImage').attr('src', file.fullPath);
  window.parent.closeCustomRoxy();
}

<script>
function openCustomRoxy(){
  $('#roxyCustomPanel').dialog({modal:true, width:875,height:600});
}
function closeCustomRoxy(){
  $('#roxyCustomPanel').dialog('close');
}
</script>
<a href="javascript:openCustomRoxy()"><img src="/fileman/Uploads/national-geographic-1.jpg" id="customRoxyImage" style="max-width:650px;"></a>
<div id="roxyCustomPanel" style="display: none;">
  <iframe src="/fileman/index.html?integration=custom" style="width:100%;height:100%" frameborder="0"></iframe>
</div>

function FileSelected(file){
  /**
   * file is an object containing following properties:
   * 
   * fullPath - path to the file - absolute from your site root
   * path - directory in which the file is located - absolute from your site root
   * size - size of the file in bytes
   * time - timestamo of last modification
   * name - file name
   * ext - file extension
   * width - if the file is image, this will be the width of the original image, 0 otherwise
   * height - if the file is image, this will be the height of the original image, 0 otherwise
   * 
   */
  // Get the ID of the input to fill
  var fieldId = RoxyUtils.GetUrlParam('txtFieldId');
  $(window.parent.document).find('#' + fieldId).attr('value', file.fullPath);
  window.parent.closeCustomRoxy2();
}

<script>
function openCustomRoxy2(){
  $('#roxyCustomPanel2').dialog({modal:true, width:875,height:600});
}
function closeCustomRoxy2(){
  $('#roxyCustomPanel2').dialog('close');
}
</script>

<input type="text" id="txtSelectedFile" style="border:1px solid #ccc;cursor:pointer;padding:4px;width:80%;" value="Click here to select a file" onclick="openCustomRoxy2()">
<div id="roxyCustomPanel2" style="display: none;">
  <iframe src="/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile" style="width:100%;height:100%" frameborder="0">
  </iframe>
</div>