Magento: Adding Image Uploads to TinyMCE
If you are using Magento and want to add a WYSIWYG Editor I recomend the Fontis Plugin (Fontis WYSIWYG Editor). This editor allows you to use TinyMCE or FCKeditor. The FCKeditor had upload built in. If you want to use TinyMCE Keep reading.
First download ibrowser, this tutorial was written using 1.3.8. (Download Ibrowser)
Install the files to your tinyMCE plugins directory. Mine was: /js/fontis/tiny_mce/plugins/ibrowser.
Open the config.inc.php (tiny_mce\plugins\iBrowser\config\config.ini.php) and set your image path. I set it to: /media/uploads/. Be sure that the file path exists. I like to use dynamic folders so I uncomment: “$cfg['ilibs_inc']” and enter the base path for my folders in “$cfg['ilibs_dir']“.
Next copy the tinyMCE.editor_plugin.js file to the ibrowser plugin directory. This file is located here (ibrowser/ingerface/tinyMCE.editor_plugin.js). Rename the editor_plugin.js file ( in \tiny_mce\plugins\iBrowser) to editor_plugin_src.js. Now rename the tinyMCE.editor_plugin.js (in \tiny_mce\plugins\iBrowser\interface) to editor_plugin.js and move to \tiny_mce\plugins\iBrowser.
*Note: Depending on the version of tinyMCE you may need to use one of the other files labled with tinyMCE in the tiny_mce\plugins\ibrowser\interface directory.
Lastly you need to add code to the javascript function that created the editor. My file was located in /app/design/adminhtml/default/default/template/fontis/wysiwyg/wysiwyg.phtml.
Find This javascript code: (yours could look slightly different)
tinyMCE.init({
mode : "exact",
elements : editable_areas,
theme : "advanced",
strict_loading_mode : true,
width: "640",
height: "400",
content_css: "<?php echo $this->getSkinUrl() ?>tinymce_content.css",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
relative_urls : false,
});
Insert the below code just under (theme_advanced_statusbar_location : “bottom”,).
plugins : "ibrowser", theme_advanced_buttons3_add : "ibrowser",

16 Responses to “ Magento: Adding Image Uploads to TinyMCE ”
March 9th, 2009 at 10:03 am
Why does no tutorial tell us exactly where the file tinyMCE.editor_plugin.js is. Is this some sort of secret? God it’s annoying.
March 9th, 2009 at 12:27 pm
The file tinyMCE.editor_plugin.js is located in the ibrowser folder. ibrowser/ingerface/tinyMCE.editor_plugin.js
Hope this helps.
March 12th, 2009 at 5:38 pm
Ok this is really confusing.
Install the files to your tinyMCE plugins directory. Mine was: /js/fontis/tiny_mce/plugins/imanager.
Wouldn’t I install to the plugins folder? Or are you saying to over write the imanager files with the ibrowser files?
/js/fontis/tiny_mce/plugins/imanager.
then later you say to go to
(ibrowser/ingerface/tinyMCE.editor_plugin.js).
You have both imanager and Ibrowser in your downloads
Do I install both plugins into the folder?
March 16th, 2009 at 7:36 am
Sorry for the confusion Jason, ibrowser is a trimmed version of imanager. I was originally writing this for imanager, but switched to using ibrowser. If the this tutorial says Imanager please assume I meant Ibrowser.
March 29th, 2009 at 7:55 am
Nice article! I have installed the plugin and it shows up in the tinymce editor and i can insert pictures but when i try to upload pictures I get an error.
I have checked my media folders and they have 777 permission. Any idea how i solve it?
March 29th, 2009 at 8:01 am
forget i change also the galleru path and now it works.
Great article!
April 22nd, 2009 at 3:19 am
Sorry but
Where is a config.inc.php ?
April 22nd, 2009 at 6:26 am
It is in \tiny_mce\plugins\iBrowser\config\
April 28th, 2009 at 7:02 am
It seems the link to the mod archive is useless now. Does anyone have a mirror?
April 28th, 2009 at 9:37 am
I will see about putting a zip file of the code here. Check back in a day.
May 4th, 2009 at 6:47 am
Any update on getting a zip of the ibrowser plugin on your blog? the original source site of Jaeger consulting is useless now – no download link.
May 4th, 2009 at 9:56 am
They moved it here:
http://net4visions.com/25.html
May 4th, 2009 at 12:16 pm
Hey Denis, Thanks for posting that link. Please Note that this tutorial uses ibrowser and not imanager.
June 8th, 2009 at 3:51 am
Hi,
I downloaded and added the ibrowser in plugin directory.
Copied and renamed the file as said above.
I am using Magento ver. 1.3.1
When i add ibrowser plugin in tinyMCE.init({}) function getting a error in firebug
syntax error
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@1588(null)index.ph…loader.js (line 1590)
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@8672()index.ph…loader.js (line 8673)
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@8680()index.ph…loader.js (line 8682)
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@1151(Object)index.ph…loader.js (line 1154)
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@601(Object)index.ph…loader.js (line 602)
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@1137(function())index.ph…loader.js (line 1138)
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@598(function(), undefined)index.ph…loader.js (line 601)
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@1150(“onComplete”, Object options=Object transport=XMLHttpRequest, Object request=Object transport=XMLHttpRequest, null)index.ph…loader.js (line 1151)
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@9274(4)index.ph…loader.js (line 9307)
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@1246()index.ph…loader.js (line 1249)
? in index.php?c=auto&f=,prototype/prototype.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,prototype/validation.js,varien/js.js,mage/translate.js,mage/adminhtml/hash.js,mage/adminhtml/events.js,mage/adminhtml/loader.js,mage/adminhtml/grid.js,mage/adminhtml/tabs.js,mage/adminhtml/form.js,mage/adminhtml/accordion.js,mage/adminhtml/tools.js,mage/adminhtml/uploader.js@213()index.ph…loader.js (line 214)
[Break on this error] <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML…3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
Please can anyone tell me, what is the problem.
Thanks in advance
June 8th, 2009 at 6:52 am
Can you post your init for tinymce so i can can compare it it mine? Is this the only change you made before the errors showed up? Is it a fatal error that is thrown or is it just some warning messages?
I seems like maybe you missed a comma or closing bracket.
August 15th, 2009 at 5:58 pm
Thanks for the mention! We’ll have to consider the inclusion of ibrowser with our next release. Please check the Fontis WYSIWYG extension page on our site for more info and updates, since this is kept more up-to-date than the Connect listing.