Krishna Sunuwar » Javascript http://www.krishnasunuwar.com.np Fri, 03 Feb 2012 04:39:15 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 CKEditor and Image upload http://www.krishnasunuwar.com.np/2011/11/ckeditor-and-image-upload/ http://www.krishnasunuwar.com.np/2011/11/ckeditor-and-image-upload/#comments Wed, 02 Nov 2011 05:17:50 +0000 Krish http://www.krishnasunuwar.com.np/?p=676 CKEditor is excellent RTF (WYSIWYG) editor, but in latest version they remove image upload features. That was inbuilt in earlier version. Now they have CKFInder, a plugin which need to be purchased. There is nothing wrong that they want to earn money with CKFinder plugin. Still thanks to CKEditor team, they made easy to integrate third party plugins.

I have found another easy and free way to integrate file upload, it is called FileManager. So, here is how I integrated file upload in CKEditor.

  1. Download FileManger from here http://labs.corefive.com/Projects/FileManager/. Or from here https://github.com/simogeo/Filemanager
  2. Follow instruction in readme.md file. of instruction in above link to configure FileManger and connector.
  3. Now, all you to do is change config.js (full pate ckeditor/config.js) file of your CKEditor.  Below is sample configuration I kept:
  1. CKEDITOR.editorConfig = function( config )
  2. {
  3.  // Define changes to default configuration here. For example:
  4.  // config.language = 'fr';
  5.  // config.uiColor = '#AADC6E';
  6.  config.filebrowserBrowseUrl = 'http://myhost.com/filemanager/index.html';
  7.   config.filebrowserImageBrowseUrl = 'http://myhost.com/filemanager/index.html?type=Images&currentFolder=/Image/';
  8.   config.filebrowserFlashBrowseUrl = 'http://myhost.com/filemanager/index.html?type=Flash&currentFolder=/Flash/';
  9.   config.filebrowserUploadUrl = 'http://myhost.com/filemanager/connectors/php/filemanager.php?mode=add&type=Files&currentFolder=/File/';
  10.   config.filebrowserImageUploadUrl = 'http://myhost.com/filemanager/connectors/php/filemanager.php?mode=add&type=Images&currentFolder=/Image/';
  11.   config.filebrowserFlashUploadUrl = 'http://myhost.com/filemanager/connectors/php/filemanager.php?mode=add&type=Flash&currentFolder=/Flash/';
  12.  
  13. };
]]> http://www.krishnasunuwar.com.np/2011/11/ckeditor-and-image-upload/feed/ 0 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