Upload image in Tinymce with Uploadify

Tinymce editor is WYSIWYG editor widely used by bloggers and programmers for text editing. This editor have a lot of built in options for text editing but don't have any option to upload image it only allow you to give direct URL of image and other options for image adjusting. To upload image you have to use any third party plugin there are many option you can choose from which Uploadify is one we are discussing today.

Download Tinymce editor from Tinymce site

You can download any latest package simple or Jquery and add required JavaScript and style sheet to webpage and configure the button in such manner that will leave some space for adding Uploadify button.


Now download Uploadify from Uploadify site

Add the required JavaScript and CSS links in the same webpage in which you added Tinymce editor. Now add HTML for both Tinymce and Uploadify.

Adjust the style of Uploadify that will adjust the button in Tinymce

Now write the following script for Uploadify which will upload image and add it in Tinymce

$('#file_upload').uploadify({
	'uploader'  : 'uploadify/uploadify.swf',
	'script'    : 'uploadify/uploadify.php',
	'fileDesc'  : 'Image Files',
	'cancelImg' : 'uploadify/cancel.png',
	'fileExt'   : '*.jpg;*.JPG;*.jpeg;*.gif;*.png;*.PNG',
	'buttonText'  : 'Upload Image',
	'onComplete': function (event, ID, fileObj, response, data) {
			tinyMCE.activeEditor.execCommand("mceInsertContent", true, response);
		}
	});

And in your uploadify.php script add the path and script of image after uploading image

";

Here Image path will be the path where you uploaded the image and $Filedata is the name of image file you just uploaded. You can add styles by adding a class or can omit this.
Now you can upload image in the editor where ever you want