Category:Extensions -> WYSIWYG
I installed TinyMCE recently and freakin love it, great job to the folks who did the extension for it!
However, it appears that in order to handle file mamagement, folks were installing iBrowser and there was no good way to integrate EE’s file upload and file management into TinyMCE. I did some poking around and found out that there was a way to send an image list to TinyMCE via the external_image_list_url option. This is basically just a javascript array that the TinyMCE image manager will read and if it exists will add in a dropdown box for the /files/images specified in this array.
For this you need the following TinyMCE settings, I’m using relative URL’s for TinyMCE, so I set that up first, go to the EE Extensions manager for TinyMCE and update the settings with these two options:
relative_urls : true,
document_base_url : "/",
For this explanation I’m going to assume that you will be using relative URL’s, if anyone does not then I can provide config info on how to proceed without using relative URL’s.
The next option that needs to get set in the TinyMCE configs is the “external_image_list_url” setting, for this I set it as such:
external_image_list_url : "/site/scripts/imagelist.js/"
Here is where the coolness starts for this little trick, the above just points to an EE template group called “scripts” and template “imagelist.js”, you can name either anything you want. The desire here is to use EE’s file upload management system and as such you can have multiple upload locations and those locations can be restricted by the member group of the person doing the posting. So the assumption for the following code is that if you can’t upload to it then you ain’t supposed to be seeing what’s in any directories that you don’t have access to upload to, with that in mind here’s the code.
To make this work, you will have to have a nested query and thus you’ll actually have two templates due to the nature of in which EE handles nested queries.
imagelist.js source
<?php
print "var tinyMCEImageList = new Array(";
?>
{exp:query sql="SELECT a.upload_id, p.server_path
FROM exp_upload_no_access a
LEFT JOIN exp_upload_prefs p ON p.id = a.upload_id
WHERE a.member_group != '{group_id}'"}
{if server_path}
<?php
$imagepath = substr("{server_path}",2,100);
$PATH = $_SERVER['DOCUMENT_ROOT'];
$d=$PATH.$imagepath; #define which dir you want to read
$dir = opendir($d); #open directory
while ($f = readdir($dir))
{
if (eregi("\.jpg",$f) OR eregi("\.gif",$f))
{
print "[\"$imagepath$f\", \"$imagepath$f\"],";
}
}
closedir($d);
?>
{/if}
{if no_results}
{/if}
{/exp:query}
<?php
print "[\"\",\"\"]);";
?>
nested-query source
{exp:query sql="SELECT server_path FROM exp_upload_prefs"}
<?php
$imagepath = substr("{server_path}",2,100);
$PATH = $_SERVER['DOCUMENT_ROOT'];
$d=$PATH.$imagepath; #define which dir you want to read
$dir = opendir($d); #open directory
while ($f = readdir($dir))
{
if (eregi("\.jpg",$f) OR eregi("\.gif",$f))
{
print "[\"$imagepath$f\", \"$imagepath$f\"],";
}
}
closedir($d);
?>
{/exp:query}
I’m going to try to net the above out, in the EE table “exp_upload_no_access” is a list of the groups that don’t have access to particular upload directories, so the code pulls anything from that table that is not equal to current users “group_id” and this query joins to the “exp_upload_prefs table based on those results and outputs the “server_path” field in that table. The second part checks to see if there were no results, this means that either an admin is posting or the current user is allowed to access all upload paths, and if so then we just need to get all the “server_paths” from table “exp_upload_prefs”, thus the entire reason for the nested query.
This code just gets image files that end in “.jpg” and “.gif” so you’ll need to adjust if you want all files or other image files, this is done in the code
if (eregi("\.jpg",$f) OR eregi("\.gif",$f))
For the above code the output is:
var tinyMCEImageList = new Array( [”/images/uploads/smalltreefrog.gif”, “/images/uploads/smalltreefrog.gif”],[”/images/uploads/crane2.jpg”, “/images/uploads/crane2.jpg”], [”/images/uploads/webhosting/smalltreefrog.gif”, “/images/uploads/webhosting/smalltreefrog.gif”],[”/images/uploads/webhosting/newcrane2.jpg”, “/images/uploads/webhosting/newcrane2.jpg”],[”/images/uploads/webhosting/newsmalltreefrog.gif”, “/images/uploads/webhosting/newsmalltreefrog.gif”],[”/images/uploads/webhosting/crane2.jpg”, “/images/uploads/webhosting/crane2.jpg”], [”“,”“]);
This was rendered by me an admin, thus the output is all file upload directories and all images under them for the “/images/uploads” directory and the “/images/uploads/webhosting” directory.
That’s it, it works great, it accesses all of the files from EE’s file upload management system and will even give you a nice preview in the preview pane of TinyMCE’s image dialog and from there you can do anything you like to the image, resize it, align it, add borders, do mouseover image swaps, ets, all based on the files/images in the EE file upload management system, heck, with this code you could even have the images from your gallery accessable right in your weblog publishing area.