File browser demo

CKEditor file and image browser

Roxy Fileman could be easily integrated into CKEditor. It is ready for use with CKEditor version 3.x and 4.x. This demo uses CKEditor version 4.3.2.
View source

<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>

For more details about how to configure Rixy Fileman to work with CKEditor, see CKEditor integration.

TinyMCE file and image browser

Roxy Fileman could also be used with TinyMCE. It is ready for use with TinyMCE version 3.x and 4.x. This demo uses TinyMCE version 4.0.12.
View source

<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>

For more details about how to configure Rixy Fileman to work with TinyMCE, see TinyMCE integration.

Custom Roxy fileman integration - select and change image

Here is a very simple example of file manager custom usage. Click the image below to select another one.
View source

This is the changed content of fileman/js/custom.js

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();
}

This is the code in your HTML page.

<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>

Custom integration - using Roxy File Manager to fill a text input field

Here is another example of custom usage. Click on the input field below to select a file.
View source

This is the changed content of fileman/js/custom.js

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();
}

This is the code in your HTML page.

<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>

User comments

Please see the FAQ page before ask a question.
I don't review comments very often, and I will NOT answer the questions asked here, please use the contact form.
L. Arsov

Author: Nuru body to body massage center in Delh

27-02-2020 13:38:39 (GMT)