Tags
tinybrowser is great plugins for tinymce and we can easily upload images/files and file browser. It’s work with tinyMCE v3.2. I’ve describe the detail configuration here.
- Download tinymce and extract.
- Download tinybrowser, its distributed under the GNU General Public License.
- Extract and copy to \tiny_mce\plugins\
- Open config_tinybrowser.php file and set the upload directory
$tinybrowser['path']['image'] = '/upload/images/'; // Image files location - also creates a '_thumbs' subdirectory within this path to hold the image thumbnails $tinybrowser['path']['media'] = '</span><span style="color: #800000;">/upload/images/</span><span style="color: #800000;">'; // Media files location $tinybrowser['path']['file'] = '</span><span style="color: #800000;">/upload/images/</span><span style="color: #800000;">'; // Other files location
You can change the upload path dynamically, we’ll discuss it end of this session.
- Ensure that the upload directories are writable (0777 permission)
- You have to call “tb_tinymce.js.php” before calling “tiny_mce.js”
<script language="javascript" type="text/javascript" src="<?php echo url::js_dir()?>tiny_mce/plugins/tinybrowser/tb_tinymce.js.php>"></script> <script type="text/javascript" src="<?php echo url::js_dir()?>tiny_mce/tiny_mce.js"></script>
- In you initialization of tiny_mce you have to add file_browser_callback : “tinyBrowser”,
- The following is the full code, the bold is for tinybrowser plugins
<script language="javascript" type="text/javascript" src="js/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php>"></script>
<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script></span>
<span style="color: #993300;"><textarea id="adesc" name="adesc"></textarea></span>
<span style="color: #993300;"><script>
tinyMCE.init({
// General options
mode : "textareas",
mode : "exact",
elements : "adesc",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,advhr,advimage,advlink",
<strong> file_browser_callback : "tinyBrowser",</strong></span>
<span style="color: #993300;">theme_advanced_buttons1 : "forecolor,backcolor,|,bold, italic,underline,strikethrough,| ,justifyleft,justifycenter,justifyright,justifyfull, styleselect,formatselect,fontselect, fontsizeselect",
theme_advanced_buttons2 : "pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent, blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup, help,code,|,insertdate, inserttime, preview",
<strong> theme_advanced_buttons3 : "",</strong></span>
<span style="color: #993300;">theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
<strong>convert_urls : false</strong>,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",</span>
<span style="color: #993300;">// 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",</span>
<span style="color: #993300;">// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
- Click on the image button, a popup window open and you can see an icon appear beside image url click on and a another new window open which is our image browser, we can browse images and upload image from there.
- Now If you run it can work 🙂
Path Change While Add imge to editor:
When we upload an image and put it to editor its path has been changed. If we save the output to database, and we need to show in different location then we have faced some problem, Just add convert_urls : false to tinyMCE.init(). So the path will not be changed.
Session Control:
We can use session in tinybrowser. See …/tiny_mce/plugins/tinybrowser/config_tinybrowser.php
//session_start(); //$tinybrowser['sessioncheck'] = 'authenticated_user'; //name of session variable to check
Just comment out the above line and the additional line.
$_SESSION[$tinybrowser['sessioncheck']] = "YES";
New you can uses session here.
Dynamic Upload Directroy:
We may need dynamic upload directory, like each user has their own upload folder. It can possible by using session variable.
Step 1:
Just add a get parametter while we diclearning the tb_tinymce.js.php the say in php, $upload_path = “/user1/dir/upload/”
<script language="javascript" type="text/javascript" src="js/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php?upload_path=<?=urlencode($upload_path);?>"></scrip>
Step: 2
Open file “/js/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php” and add the following two line at the top to page.
session_start(); $_SESSION['upath'] = $_GET['upload_path'];
Step: 3
Open “js/tiny_mce/plugins/tinybrowser/config_tinybrowser.php” and change the assignment op upload directory like the following [Note you must comment out the session strat on this page as i’ve describe it above]
$tinybrowser['path']['image'] = $_SESSION['upath'].'images/'; // Image files location - also creates a '_thumbs' subdirectory within this path to hold the image thumbnails $tinybrowser['path']['media'] = $_SESSION['upath'].'media/'; // Media files location $tinybrowser['path']['file'] =$_SESSION['upath'].'files/'; // Other files location
I’ve successfully run it and use for different directory for different modules. Just assign value to $upload_path, it depend on you how you change the path but make sure all upload directory always writable (permission 0777)
sarwar's weblogs 