Manage and Enable Image Upload in TinyMCE with PHP

The development of the website has allowed users to interact via the form, the user can send comments, messages or articles. Websites that allow users to interact with form interface called Dynamic Website. In building Dynamic Websites need a text editor or web-based word processing program (HTML WYSIWYG). TinyMCE is a platform WYSIWYG HTML editor control that is quite popular. TinyMCE released as open source under LGPL by application Moxiecode Systems AB. Source : www.tinymce.com.
At this post I will share simple tips to manage and enable image upload in TinyMCE combine with php.

1. First Step you must download TinyMCE plugin then extract the files tinymce_3.5.7.zip (TinyMCE version that I use).

2. Create a folder "myproject" in the root directory on the local server (C:\xampp\htdocs\ is the root directory on my local server).

3. Copy TinyMCE plugin that has been extracted to the directory "myproject"

4. Create folder "images" in the directory "myproject". images folder will be used to accommodate your uploaded images.

5. Create file index.php then save file as "C:\xampp\htdocs\myproject\". You can download the file index.php by clicking the download link. Download index.php. In the index.php file we find the DisplayImage function between tags <script type="text/javascript"></ script>, this function is used to bring up the dialogue window, where the window displays the image data that has been uploaded and the navigation buttons to upload a picture file. Here's an excerpt DisplayImage function:

function DisplayImage (field_name, url, type, win) {
         var cmsURL = 'http://localhost/myproject/imagelist.php';
         if (cmsURL.indexOf("?") < 0) {
         cmsURL = cmsURL + "?type=" + type;
         }else {
         cmsURL = cmsURL + "&type=" + type;
         }
         tinyMCE.activeEditor.windowManager.open({
         file : cmsURL,
         title : 'Image Browser',
         width : 600, 
         height : 400,
         resizable : "yes",
         inline : "yes", 
         close_previous : "no"
         }, {
         window : win,
         input : field_name
         });
         return false;
}

There are some important parts you need to know to configure the pop-up window:

var cmsURL = 'http://localhost/myproject/imagelist.php';

The script above is useful to configure the location of the page that is loaded when the pop-up window appears.

width : 600, 
height : 400,
resizable : "yes"

width: 600  // means to determine the value for the width of the pop-up window
height : 400  // means to determine the value for the height of the pop-up window
resizeable : "yes" // specified value means that the pop-up window can be resized.

To initialize the TinyMCE text editor we can use the script tinyMCE.init. Here is a script tinyMCE.init :

 tinyMCE.init({
 file_browser_callback : 'DisplayImage',
 mode : "exact",
 elements : "konten",
 theme : "advanced",
 relative_urls : false,
 remove_script_host : false
});

6. Make imagelist.php file and save the file in the directory "C:\xampp\htdocs\ myproject\". You can download the file imagelist.php by clicking the download imagelist.php.

Download myproject.zip 

7. Run in your browser by type url "http://localhost/myproject/". If you have configured correctly then you can upload images through TinyMCE.