Krishna Sunuwar » TinyMCE http://www.krishnasunuwar.com.np Fri, 03 Feb 2012 04:39:15 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 TinyMCE editor – image upload plugin (Ajax File Manager) http://www.krishnasunuwar.com.np/2010/03/tinymce-editor-image-upload-plugin-ajax-file-manager/ http://www.krishnasunuwar.com.np/2010/03/tinymce-editor-image-upload-plugin-ajax-file-manager/#comments Tue, 02 Mar 2010 11:18:38 +0000 Krish http://www.krishnasunuwar.com.np/?p=300 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!

]]> http://www.krishnasunuwar.com.np/2010/03/tinymce-editor-image-upload-plugin-ajax-file-manager/feed/ 10