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:
tinyMCE.init({
mode : "exact",
elements : "ajaxfilemanager",
theme : "advanced",
plugins : "table,advhr,advimage,advlink,flash,paste,fullscreen,noneditable,contextmenu",
theme_advanced_buttons1_add_before : "newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "flash,advhr,separator,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
extended_valid_elements : "hr[class|width|size|noshade]",
file_browser_callback : "ajaxfilemanager",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : true,
apply_source_formatting : true,
force_br_newlines : true,
force_p_newlines : false,
relative_urls : true
});
function ajaxfilemanager(field_name, url, type, win) {
var ajaxfilemanagerurl = "http:///
/ajaxfilemanager/ajaxfilemanager.php?editor=tinymce";
switch (type) {
case "image":
break;
case "media":
break;
case "flash":
break;
case "file":
break;
default:
return false;
}
var fileBrowserWindow = new Array();
fileBrowserWindow["file"] = ajaxfilemanagerurl;
fileBrowserWindow["title"] = "Ajax File Manager";
fileBrowserWindow["width"] = "782";
fileBrowserWindow["height"] = "440";
fileBrowserWindow["close_previous"] = "no";
tinyMCE.openWindow(fileBrowserWindow, {
window : win,
input : field_name,
resizable : "yes",
inline : "yes",
editor_id : tinyMCE.getWindowArg("editor_id")
});
return false;
}
Analysis of code:
Line number 15:
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).
-
-
<strong>Important Points</strong>
-
Don't forget to set upload directory path in tiny_mce/plugins/ajaxfilemanager/inc/config.base.php. It should be relative path.
-
<pre lang="php">define('CONFIG_SYS_DEFAULT_PATH', '../../../../../uploads/');
-
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:
- Give class name to your editor e.g. class="tiny"
- Add following
In list of plugins, add images
add editor_selector : "tiny",
In list of button, add images
- 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):
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
//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",
editor_selector : "tiny",
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",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
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",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
Good luck!
Update: Note please checkout the date posted this article.
