tinyMCE and iBrowser

I just managed to get tinyMCE and iBrowser to work nicely together. They should, after all, iBrowser is a plugin for tinyMCE. tinyMCE is a WYSIWYG editor for textareas. It essentially turns a textarea in a web form into something more like MS Word. The picture below is VOX’s WYSIWYG editor, but it gives you an idea of what I’m talking about.

TinyMCE-shotBuilding Error

Now, it wasn’t all that easy to get it working. tinyMCE worked fine, but integrating iBrowser was a little harder. For the longest time, after setting it up, I was able to open the iBrowser window through tinyMCE, but I kept getting the error “error building image list!” I did everything I was supposed to do in the configuration file, but I still got that error. Well, just for fun I tried to make a change and see what happened. Here’s what I changed:

$cfg[‘ilibs’] = array ( // image library path with slashes; absolute to root directory – please make sure that the directories have write permissions array

(
‘value’ => ‘/home/stuff/thingy/site/upload/’

‘text’ => ‘Site Pictures’, ) );

TO ..

$cfg[‘ilibs’] = array ( // image library path with slashes; absolute to root directory – please make sure that the directories have write permissions array

(

‘value’ => ‘/upload/’,

‘text’ => ‘Site Pictures’, ) );

(I’m having trouble formatting the code above. The only change between the two is the path from the long one above to the shorter one below. ie: what comes after ‘value’ =>)

I removed the whole path that I thought was required and left only the actual folder I wanted to upload the images to. I think iBrowser figures out the rest of the path somewhere else in the script.

Theory of Relativity

That solved the problem of “error building image list!” I was now able to upload and download images (or I assume, any other type of file as well.) But, now when I clicked submit on my form, my next page was receiving a strange img src. Instead of pointing where I wanted it, it was sending to some strange non-existant folder somewhere three levels deep from where I was. Something was wrong. I did a little more googling and found that I had to make a change in the <script> I used to call tinyMCE in my <head>.

Here’s my current <script>

<script language=”javascript” type=”text/javascript”>
tinyMCE.init({
mode : “textareas”,
plugins : “ibrowser”,
theme : “advanced”,
theme_advanced_buttons3_add : “ibrowser”,
relative_urls : false,
remove_script_host : false,
document_base_url : “<?php echo $path_to_root ?>”
});
</script>

The bolded items are the ones I had to add.

relative_urls : false,
remove_script_host : false,
document_base_url : “<?php echo $path_to_root ?>”

For document_base_url, just add your own base path, something like http://www.mydomain.com/

That was it. It now works.

My only problem now is that my other form fields get a yellow highlight when they are in focus (in FF, since IE doesn’t support pseudo class :focus yet.) But the tinyMCE window does not highlight. Wonder if there’s any way to fix that, anyone????


This post has been crossposted on my other blog I’m testing out at Vox.

Advertisements
Published in: on July 18, 2006 at 12:34 am  Comments (1)  

The URI to TrackBack this entry is: https://jmayoff.wordpress.com/2006/07/18/tinymce-and-ibrowser/trackback/

RSS feed for comments on this post.

One CommentLeave a comment

  1. Were you able to get this working in your WordPress installation? If so, now did you manage it? I’ve been trying for days now with no luck.

    Dawn


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: