TinyMCE editor – image upload plugin (Ajax File Manager)

In Javascript on March 2nd, 2010

TinyMCE is very nice editor. But it lacks image upload functionality which drives crazy to lot of programmer as enabling image upload facility is tough. I have chance to play around with it and found actually integrating image upload facility is very easy. Among lot of plugin, I find Ajax File Manger is nice.

You can download tinyMCE with Ajax File Manager plugin from http://www.phpletter.com/DOWNLOAD, See under “Tinymce Ajax File and Image Manager”. Direct link http://www.phpletter.com/download_project_version.php?version_id=28.

A copy of demo TinyMCE with Ajax File Manager can be seen here http://demo.phpletter.com/tinymce_test.php. View Source and copy code.

Code snippet to enable Ajax File Manager in TinyMCE:

  1. tinyMCE.init({
  2.  mode : "exact",
  3.  elements : "ajaxfilemanager",
  4.  theme : "advanced",
  5.  plugins : "table,advhr,advimage,advlink,flash,paste,fullscreen,noneditable,contextmenu",
  6.  theme_advanced_buttons1_add_before : "newdocument,separator",
  7.  theme_advanced_buttons1_add : "fontselect,fontsizeselect",
  8.  theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
  9.  theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,",
  10.  theme_advanced_buttons3_add_before : "tablecontrols,separator",
  11.  theme_advanced_buttons3_add : "flash,advhr,separator,fullscreen",
  12.  theme_advanced_toolbar_location : "top",
  13.  theme_advanced_toolbar_align : "left",
  14.  extended_valid_elements : "hr[class|width|size|noshade]",
  15.  file_browser_callback : "ajaxfilemanager",
  16.  paste_use_dialog : false,
  17.  theme_advanced_resizing : true,
  18.  theme_advanced_resize_horizontal : true,
  19.  apply_source_formatting : true,
  20.  force_br_newlines : true,
  21.  force_p_newlines : false,
  22.  relative_urls : true
  23. });
  24.  
  25. function ajaxfilemanager(field_name, url, type, win) {
  26.  var ajaxfilemanagerurl = "http://<host>/<path_to_ajaxfilemanage>/ajaxfilemanager/ajaxfilemanager.php?editor=tinymce";
  27.  switch (type) {
  28.   case "image":
  29.    break;
  30.   case "media":
  31.    break;
  32.   case "flash":
  33.    break;
  34.   case "file":
  35.    break;
  36.   default:
  37.    return false;
  38.  }
  39.  var fileBrowserWindow = new Array();
  40.  fileBrowserWindow["file"] = ajaxfilemanagerurl;
  41.  fileBrowserWindow["title"] = "Ajax File Manager";
  42.  fileBrowserWindow["width"] = "782";
  43.  fileBrowserWindow["height"] = "440";
  44.  fileBrowserWindow["close_previous"] = "no";
  45.  tinyMCE.openWindow(fileBrowserWindow, {
  46.    window : win,
  47.    input : field_name,
  48.    resizable : "yes",
  49.    inline : "yes",
  50.    editor_id : tinyMCE.getWindowArg("editor_id")
  51.  });
  52.  
  53.  return false;
  54. }

Analysis of code:
Line number 15:

  1. file_browser_callback : "ajaxfilemanager"

The value ‘ajaxfilemanager’ defines the name of the Javascript function which will be called every time a user clicks the browse button in one of the dialogue windows. You can see function definition start from line number 25 to 54. This function opens a new window calling a URL tailored (See line number 26).

Important Points
Don’t forget to set upload directory path in tiny_mce/plugins/ajaxfilemanager/inc/config.base.php. It should be relative path.

  1. define('CONFIG_SYS_DEFAULT_PATH', '../../../../../uploads/');
  2. define('CONFIG_SYS_ROOT_PATH', '../../../../../uploads/');

Above folder should have 777 permission. Also set 777 permission to session folder folder, tiny_mce/plugins/ajaxfilemanager/session.

Alternatively you can try following uploader

http://dustweb.ru/log/projects/tinymce_images/

Cofigure:

  1. Give class name to your editor e.g. class=”tiny”
  2. Add following
    In list of plugins, add images
    add editor_selector : “tiny”,
    In list of button, add images
  3. Change DIR_IMAGES and DIR_FILES path on tiny_mce/plugins/images/connector/php/config.php to suit your location. Upload folder should have 777 permission.

Actual configuration looks like (See images on line number 8 and 12):

  1. tinyMCE.init({
  2.  // General options
  3.  mode : "textareas",
  4.  theme : "advanced",
  5.  
  6.  //plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",
  7.  editor_selector : "tiny",
  8.  plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,images,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
  9.  
  10.  // Theme options
  11.  theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
  12.  theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,images, cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
  13.  theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
  14.  theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
  15.  theme_advanced_toolbar_location : "top",
  16.  theme_advanced_toolbar_align : "left",
  17.  theme_advanced_statusbar_location : "bottom",
  18.  theme_advanced_resizing : true,
  19.  
  20.  // Example content CSS (should be your site CSS)
  21.  content_css : "css/content.css",
  22.  
  23.  // Drop lists for link/image/media/template dialogs
  24.  template_external_list_url : "lists/template_list.js",
  25.  external_link_list_url : "lists/link_list.js",
  26.  external_image_list_url : "lists/image_list.js",
  27.  media_external_list_url : "lists/media_list.js",
  28.  
  29.  // Replace values for the template plugin
  30.  template_replace_values : {
  31.   username : "Some User",
  32.   staffid : "991234"
  33.  }
  34. });

Good luck!

, ,
View Comments