Tinymce with TinyBrowser for Elgg 1.0

October 5, 2008 in Uncategorized | 39 comments

Various people have worked to extend the wysiwyg editor Tinymce for Elgg. First Lee Teague made Tinymce_adv adding many features to the default Tinymce text editor. Then Joey One Time fixed some bugs with embedding media displaying in IE. The only thing left on my wishlist was a file browser/uploader allowing users to upload files to embed in their content through the text editor. I have been experimenting with Bryn Jones’s Flash based TinyBrowser, and I finally got it to work.

Once installed, when you click on an the icon in Tinymce to add an image or media to a post, a new icon appears:

Click on that icon, and you are presented with a gallery.

Selecting the upload tab allows you to browse your computer for a file to upload. It allows you to upload multiple files at the same time.

One the files have been uploaded, click the browse tab and select the image you wish to insert:

Click “Insert” and it is inserted into your text.

It installs the usual way. Upload it to the mod folder and activate within the admin interface. Note, this will overwrite any other mod/tinymce that you have installed.

TinyBrowser is a very slick file browser/uploader. My only misgiving is that I haven’t been able to figure out how to make it interact with the core file management in Elgg. Perhaps someone can take this further by configuring it to do so. Meanwhile, while not ideal, it works great!

Again, I have not tested this in Windows with IE. It build upon the works of others. Please leave feedback. I’ll try to help as I am able.

Download here.

Zemanta

39 comments

Matt Edminster on October 5, 2008 at 11:09 pm

If this does in fact overwrite other tinymce files, is there any way to get the three plugins you’ve mentioned to work together?
Stan on October 6, 2008 at 4:55 am

Sounds great – does this interface with elgg’s file plugin – i.e. when you add a file via TinyMCE does it get added as a file entity and appear within the user’s file list?
Steve on October 6, 2008 at 5:03 am

@Stan As I said in the post:

“My only misgiving is that I haven’t been able to figure out how to make it interact with the core file management in Elgg. Perhaps someone can take this further by configuring it to do so.”

@Matt I’m not sure what you mean. Run all three at once? Different access to different editors by different users? No. I’d like to see that though. It is certainly beyond the scope of my know how. If overwriting is a problem, I suspect it could be done so that it doesn’t do so.
Graeme on October 6, 2008 at 7:07 am

Hi Steve,
It works fine in IE7 – tested a number of times – good work.
Steve on October 6, 2008 at 8:17 am

Thanks Graham. Glad it works. WYSIWYG Plugins can be finicky.

I really like TinyBrowser. I might try integrating it into other web apps I use.
SueM on October 8, 2008 at 2:18 am

This is great, just what we need. I have downloaded and installed the plugin. However when I click on the icon to add an image, I get the following error.

Unable to create the ‘/useruploads/images/’ directory – please check your permissions.

Please could you let me know in which directory the software tries to create the directory so I can change the file permissions accordingly.

Many thanks
Steve on October 8, 2008 at 5:01 am

I just edited the file tinymce/tinymce/jscripts/tiny_mce/plugins/tinybrowser/fns_tinybrowser.php with a potential fix for this.

Please download again and let me know how it goes.
Emily Chang on October 9, 2008 at 11:54 pm

Nice work, Steve. I was about to try this myself so I’m happy to see you did it!

I just downloaded the zip and tried it. I’m getting the same error as SueM:

Unable to create the ‘/useruploads/images/’ directory – please check your permissions.

Do you know which directory needs permissions?
Wallth on October 10, 2008 at 7:48 am

Hiho, i downloaded the Plugin 5min ago. Deleted the old Tinymce and uploaded yours. But nothing happend. Tinymce works fine, but i cant see the tinybrowser. Any hints?

Thanks )
Steve on October 10, 2008 at 11:37 am

@wallth delete your cache and reload.

@ Emily The problem probably resides in:

tinymce/tinymce/jscripts/tiny_mce/plugins/tinybrowser/fns_tinybrowser.php

// *************************CREATE FOLDER**********************************
function createfolder($dir,$perm) {
if(mkdir($dir, $perm, true))
{
chmod($dir, $perm);

I added true to if(mkdir($dir,$perm)

Perhaps try taking it out.

I’ll get in touch with TinyBrowser’s developer.
Vergelijk Mobiele Telefoon on October 12, 2008 at 2:05 pm

Thanks for sharing this useful plugin! I have installed, which was quite easy and it really works ok!
Traverse on October 22, 2008 at 2:56 pm

Hello,
I was just passing… I’m using TinyBrowser with TinyMCE with Expression Engine. I got the same message as Sue and Emily above, I edited config_tinybrowser.php around line 48 to be the correct paths to the upload directories I had already created. Make sure the permissions are set correctly and all seems fine now.

Thanks
SueM on October 23, 2008 at 5:29 am

I resolved the problem with the message “Unable to create the ‘/useruploads/images/’ directory – please check your permissions.” by manually creating the directory on the server logged on as root and giving full rights to the directories recursively. Not ideal but it works.
Steve on October 23, 2008 at 6:03 am

As far as Elgg goes, there is a very cool new feature in the core trunk that may make this unnecessary–stay tuned!

I’m trying to exercise restraint, but not sure if I can resist revealing it much longer!
Pavel M on October 25, 2008 at 2:28 am

Everything fine.
But TinyBrowser uses only one directory for pictures for different users.
Steve on October 25, 2008 at 5:07 am

Yes, it works like the Joomla and many other software’s file handling.

A better solution is about to be released:

http://openedweb.com/blog/2008/10/23/new-elgg-text-area-media-tool/
Pavel M on October 25, 2008 at 6:08 am

Is it possible to test it?
Steve on October 25, 2008 at 7:34 am

You could grab the files from the their subversion repository. Here are some instructions:

http://openedweb.com/blog/2008/10/17/elgg-and-subversion-svn/

There have been a few file updates since I discovered it, but I doubt it is fully functional yet.

Let me know if you need further assistance.
Pavel M on October 25, 2008 at 11:24 am

I don’t know where to find it. Trunk directory without blog mod.
Steve on October 25, 2008 at 12:12 pm

Not sure I understand, but you’ll need to download the whole package and overwrite your existing installation. Then you need to run update.php by calling it up in your browser.
Pavel M on October 25, 2008 at 2:18 pm

I made it but no any result I see only old version of the edit form of the blog.
Steve on October 25, 2008 at 2:25 pm

Did you clear the cache and all that? I guess you could try another fresh install. that’s what made it appear out of nowhere for me.

Best we bring this conversation over to the post:

http://openedweb.com/blog/2008/10/23/new-elgg-text-area-media-tool/

as this is not relevant to this post anymore.
Free4illustrator on November 13, 2008 at 7:28 am

I hope you will help me.
actually i am just getting a broken rectangle type image and not the real one after uploading.
pete on November 13, 2008 at 10:13 am

Any update on the fix with TinyBrowser ?
pete on November 13, 2008 at 11:54 am

There’s an update on tinybrowser can you update the plugin?
http://groups.google.com/group/tinybrowser/browse_thread/thread/2c4eaa958468d22b#
Steve on November 13, 2008 at 3:38 pm

@pete I was waiting for it to get out of beta, and I wasn’t sure anyone would be interested as it functions in a way inconsistent with Elgg’s ways of doing things.

I’m really up to my neck at the moment, but I will try to get something up in a week or so. No promises. I have a major presentation with a companion website that has to be done in about a week.

@4free Have you tried the fixes above? Have you checked to see if the files are in the directory in which they should be uploaded?
Quentin on November 26, 2008 at 4:47 pm

Hi thanks for all your info
I wonder if you manage ton inscert a youtube video with TinyMCE?
I added the youtube plugin but it doesnt work. I have this after I posted the video:
writeFlash({“wmode”:”transparent”,”src”:”http://www.youtube.com/v/ts51WKYhINI&rel=1″,”width”:”350″,”height”:”300″});
Ciaphas on January 10, 2009 at 5:19 am

is there any way that we can stop TinyMCE from stripping out in-line styles? I have been all over the Internet and I can not seem to find a way to do it. I think it might have something to do with Tidy-html; I can not find a reference to it in the mod/TinyMCE folder. If you could point me in the correct direction I would greatly appreciate it.
1. Matt Edminster on April 20, 2009 at 5:41 am
  
  Nigel, you need to include the styles you want allowed to a line in the tinymce/views/default/input/longtext.php file. The line is called “extended_valid_elements”. Use the notation “tag[attribute|attribute|attribute]” e.g., “a[name|href|target|title]“
  1. Matt Edminster on April 20, 2009 at 5:42 am
    
    Sorry .. that was meant for Ciaphas.
Nigel Carr on April 10, 2009 at 4:23 am

Hi – Just downloaded your tinybrowser in Elgg 1.5 activated it and all works OK untill I try to download a file.

The message The ‘/useruploads/images/’ directory has been successfully created appears – but when I try to download another popup with the massage ‘Status 406 error when uploading’ appears

Any help to solve this is appreciated

I am using Vista and elgg v1.5

Thanks for your help
1. Steve on April 10, 2009 at 5:10 am
  
  This was developed for Elgg 1.0. Elgg 1.5 is substantially different as several changes were made to tinymce and the handling of file uploads. Elgg 1.5 with the embed mod enabled does much of what this plugin did and handles the files better.
Nigel Carr on April 11, 2009 at 3:23 am

Dear Steve – thanks for your help – I will eneable the embed mod and try to find a way of reducing the image size default, whch was the main reason for using your plugin..

Thanks again
scott on June 22, 2009 at 6:21 pm

Hello,

This looks like a good plugin. However, I cannot get the “upload” tab to work. When I click the Upload tab I get nothing, just a blank area. Therefor I cannot upload any images, the reason I installed this plugin. Any ideas?

Thannks in advance.
Anu Jagadeesh on November 6, 2009 at 2:32 am

DO we have a latest version of the plugin working in elgg 1.6.1
J Greene on August 29, 2010 at 10:38 pm

You know, this is an old post, but given that I found it today when I ran into the “Unable to create the ‘/images/’ directory – please check your permissions.” issue mentioned by several people in the post, I thought I would give the fix.

On some servers, the path to that images directory may not be the same path that the script is running from, which turned out to be the cause of our particular problem, and the answer is to find it out and update the config file.

First things first. Browse to where you installed the program and find the “cache” directory. Open it up and create the folder “images” and set the permissions to 777

Open up the new images folder and create a folder called “_thumbs” and also set the permissions to 777.

Now open up a plain text editor like notepad and put in this text:

<?php
echo $_SERVER['DOCUMENT_ROOT']."”;
echo $_SERVER['SCRIPT_FILENAME'];

Save it with a simple name like “get_path.php” and upload it to the “images” folder.

Open up the file in your browser. For the example’s sake, we’ll say that it’s in the “news” folder, so the URL would be like this:

http://www.somesite.com/news/cache/images/get_path.php

The FIRST line you see is the absolute path to the document root.
The SECOND line is the exact location of the file you are currently running.

In our case, those two lines weren’t the same, and that was what caused the problem.

I saw something like this:

/home/somesite/public_html
/home/anothersite/news/cache/images/get_path.php

In a plain text editor like notepad, open the file “config_tinybrowser.php”. It’s located in /template/jscript/tiny_mce/plugins/tinybrowser/

on line 45 or so you will see

$tinybrowser['docroot'] = rtrim($_SERVER['DOCUMENT_ROOT'],’/');

comment out this line by putting two slashes in front:

//$tinybrowser['docroot'] = rtrim($_SERVER['DOCUMENT_ROOT'],’/');

and then, just below it put the corrected line. For our example, it will be

$tinybrowser['docroot'] = ‘/home/anothersite’;

Remember, you have to update that to the information for your server, just the part up to the actual folder the application is in, without a trailing slash.

Save the file and upload it.

Log into the application from your browser and go to settings

In the section “Script URL”, put the path to your application, skipping the section you put in the config file and stopping at the “cache” folder. In our example, that would be the folder “/news/” You’ll have to adjust it for your server.

Save, and try uploading again.
1. Steve on August 30, 2010 at 1:52 pm
  
  Thanks. I haven’t worked with Elgg and Tinymce/TinyBrowser in awhile, but this post still gets quite a few hits. Thanks for helping others out!
doris on June 29, 2011 at 6:58 am

Hi there,

does anybody have a solution when the error:
r is undefined
(line 1)tiny_mce.js is received when clicking on the files icon

IE9 is more precise:

SCRIPT5007: Unable to get value of the property ‘apply’: object is null or undefined
tiny_mce.js, line 1 character 143324

where it says:

return r.apply(q||p,Array.prototype.slice.call(arguments,1))

Any feedback would be very much appreciated we are now delayed in project delivery, what we thought is a piece of cake, turned out to be a major obstacle.
Richard Webb on October 2, 2011 at 10:41 am

Thanks for this –
I wanted to try the TinyBrowser to see if it suits my need but the author doesn’t have a trial version available and your download contains it
Just copy out the tinybrowser subfolder from the plugins directory and follow the included readme.txt for help how to get it working , very easy.
I’m trialling it for a small website I’m working on and so far it works very well and obviously will purchase the proper version if and when I put it into production.