• About Sarwar
  • Portfolio
  • আমার বাংলা

sarwar's weblogs

~ story of web applications…..

sarwar's weblogs

Category Archives: tinymce

how to get/configure file/image browser for tinymce editor

08 Wednesday Jul 2009

Posted by Sarwar in JavaScript, PHP, tinymce

≈ 34 Comments

Tags

image browser, session, tinymce, upload, WYSIWYG Editor


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)

Advertisement

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

Author

  • Sarwar

Categories

  • .htaccess
  • Apache
  • API
  • CSS
  • Debug
  • Framework
    • CakePHP
  • HTML
  • JavaScript
    • Ajax
    • ckeditor
    • jquery
    • jQuery UI
    • tinymce
  • Joomla
    • Virtumart
  • Linux
  • MySQL
  • PHP
  • SVN
  • Twitter
  • WHM/cPanel
View Sarwar Hossain's profile on LinkedIn
Follow bdsarwar on Twitter

Tweets

  • RT @ESPNUK: If Erling Haaland wanted to match Cristiano Ronaldo's 700 league goals, he'd have to score 40 goals a season until the year 203…    1 month ago
  • RT @Cristiano: Great team effort and a good victory. We stand together. Let’s go, United! 💪🏽 https://t.co/GnjAR3oM3s    3 months ago
  • RT @Cristiano: Hard work always pays off 🙏🏽💪🏽 https://t.co/kMqIpB2nfV    5 months ago
  • RT @realDonaldTrump: Just finished a very good conversation with President Xi of China. Discussed in great detail the CoronaVirus that is r…    2 years ago
  • “Running a small business without a plan is a lot like driving without directions.” — @GoldmanSachs via @appexchange    6 years ago
  • RT @TechCrunch: 5K people turn up to catch Pokémon in Chicago tcrn.ch/2aaLRys https://t.co/VVQSd7nmN4    6 years ago

Flickr Photos

From Helipad ViewAbove the CloudHillNear to SkySunset Moment#sunset #beach #ocean #coxsbazar#jamroll #food #deliciousfood #homemade  #homemadefood#seaside #ocean #oceanview #travelphotography #coxsbazar #bayofbengal #travel #longestbeach#beach #lifeguard #seaside #holiday #tour #longestbeach #travel #travelphotography #coxsbazar #bayofbengal#resort #mountains
More Photos

Archives

  • February 2012 (1)
  • January 2012 (2)
  • August 2011 (1)
  • July 2011 (1)
  • June 2011 (2)
  • May 2011 (2)
  • April 2011 (1)
  • March 2011 (3)
  • December 2010 (3)
  • November 2010 (1)
  • October 2010 (4)
  • September 2010 (1)
  • June 2010 (1)
  • May 2010 (2)
  • April 2010 (1)
  • March 2010 (1)
  • January 2010 (2)
  • July 2009 (1)
  • January 2009 (1)
  • August 2008 (1)

Recent Comments

  • Kush on how to cakephp in a sub-directory, access it from root using .htaccess
  • Mr Griever on Access session data in a model -cakephp
  • apnarahimyarkhan on cakephp- CONCAT in query, Virtual Fields and make a drop down
  • Toko Kunci Pintu Murah on set & reset form text value onfocus, onblur, onclick using javascript
  • nevitaputri1.doodlekit on cakephp- CONCAT in query, Virtual Fields and make a drop down
  • RSS - Posts
  • RSS - Comments

Meta

  • Register
  • Log in
  • Entries feed
  • Comments feed
  • WordPress.com

Create a free website or blog at WordPress.com.

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
  • Follow Following
    • sarwar's weblogs
    • Join 328 other followers
    • Already have a WordPress.com account? Log in now.
    • sarwar's weblogs
    • Customize
    • Follow Following
    • Sign up
    • Log in
    • Report this content
    • View site in Reader
    • Manage subscriptions
    • Collapse this bar
%d bloggers like this: