A Simple ColdFusion Image Manager for TinyMCE
Tuesday 22 November 2011 10:27 AM
I was listening to Ray Charles while coding on my blog application. I was trying to improve the blog using a beautifully developed tinyMCE Editor when I realized I needed a simple image manager to go with it. There is ColdFusion File Manager, a wonderful application with lots of functions, but I wanted something simpler––just images and some thumbnails, if that was possible. I wrote a simple bit of coding with the help of JQuery. Here it is.
Here is the code needed to add the Image Manager into tinyMCE
1: <textarea id="blog" name="myTextArea" style="height:150px; width:90%"></textarea> 2: <script type="text/javascript"> 3: tinyMCE.init({
4: // General options 5: mode :
"textareas",
6: theme :
"advanced",
7: elements :
"myTextArea",
8: file_browser_callback :
"imgManager" 9: }
);
10: 11: function
imgManager(f, u, t,w
) {
12: url =
"http://cflove.org/examples/ImageManager/ImageManager/index.cfm" 13: mainwindow = w;
14: imgManagerPopup =
window.open(url,
"",
"width=700,height=500,left=20,top=20,bgcolor=white,resizable,scrollbars,menubar=0");
15: }
16: </script> The first ten lines of the code above are for inserting tinyMCE editor into the
my textarea field. (
You can find more information about that at the tinyMCE site.)
The tinyMCE setup argument
file_browser_callback defines the external JavaScript function so that it calls when you click on the icon
. I set that argument to
imgManager You can find the
imgManager Javascript function at line 11, which simply opens the Image Manger Application in a popup window. At line 12, I provided the URL for my Image Manager Location, so you should change that to your own application URL.
I would be love to say that this is the only change you have to make to get this function to work in a production environment, but it’s not. I am happy to say that you can at least test the downloaded file without changing any of the settings, paths, or other annoying things.
When you use this function in a production environment, you may want to open the
index.
cfm file inside the
ImageManager folder. Then you will change the variable [imgFolder] to the physical path of the folder where you want your uploaded images stored. You will also change the variable [imgURL] to the URL of the same folder.
In addition, you may want to add some sort of user validation on top of the
act_delete.cfm file and the
image.cfm file, just to be sure no unauthorized users will have access to the uploaded images. Although if you are like me, and believe in the good nature of all Homo sapiens, you can leave it open like I did in example above.
Update (Nov 22, 2011) : ImageManager\index.cfm updated to fix JavaScript error.
Download (ImageManager.zip)
Posted by Saman W Jayasekara at Saturday 26 June 2010 11:08 PM
Singh
Friday 19 December 2014 02:11 PM
I am using coldfusion 9, an using a basic tinymce editor. Can you please let me know how to add this plugin stepbystep. I have not used any plugins before. thanks
Jim
Sunday 16 September 2012 03:54 PM
Awesome, Thanks. I'm having some trouble getting this to work in IE 9. Once I click on the Insert/Edit Image icon, the popup box appears with the Image url field and the browse button. When I click the button nothing happens. Works fine in FF and Chrome
Sunday 16 September 2012 05:22 PM
I just tested the demo above with IE9 - it works for me. Seems like IE have blocked pop-ups and doesn't prompt you to enable it any more.
Marty
Thursday 16 August 2012 08:43 AM
I have installed the ImagaManager successfully but I am running into an issue. I can Open my page with the TinyMCE editor on it. I then click the "Insert/Edit Image" button which opens a new Window (or tab) with the image.htm page. I can then click on the Browse button and go to the tab.cfm page where I can add or select an image. After select an image, I click the Insert button and nothing happens. I went through the code and saw that it is trying to write back to the window.opener which you would think is the image.htm page. However, when I comment out the code to write back and only leave the window.opener.close code, it is trying to close the original page where I have the TinyMCE installed. I have also enable the IE Developer tools and, after reanabling the code to write back, it says it cannot find the "src" field. I'm assuming because it is looking at the TinyMCE page isntead of the image.htm page. I've tried this with both tabs enabled and disabled in IE. Any suggestions.
Thank You
Thursday 16 August 2012 08:49 AM
Can you please let know the TinyMCE ver you are using?
Marty
Thursday 16 August 2012 01:41 PM
I just figured it out. I was using the entire url for the ImageManager url instead of a relative path. Made the change and all is great. Love the product.
Marty
Thursday 16 August 2012 10:09 AM
3.5.6.
Thanks
Thursday 14 June 2012 03:00 AM
Hi Saman, great job! Many thanks. Super easy to implement. I've recommended you in the LinkedIn Coldfusion group.
Wednesday 18 April 2012 11:09 AM
Wow thanks, this is very handy. I was in a situation where I was using CKEditor and CKFinder which was great, but a copy and paste from Excel was causing a minor but important issue. I was working my way through trying to get CKFinder to connect up and it was a pain, so I was considering if it was worth writing my own and did a quick search. Turned this up, got it running in 5 minutes. Big time saver and much appreciated!
Colin
Thursday 23 February 2012 05:35 PM
Hi Saman, Thank you for this script :)
"When you use this function in a production environment, you may want to open the index.cfm file inside the ImageManager folder. Then you will change the variable [imgFolder] to the physical path of the folder where you want your uploaded images stored. You will also change the variable [imgURL] to the URL of the same folder."
What do I put in the code (and where in index.cfm) when my folder is www.mysite.com/images/uploads ?
Cheers
Colin
Friday 24 February 2012 11:14 AM
When you download the zip file, open up the [ImageManager\index.cfm] file and edit the line 13. That's the physical path to where you host your images at. (e.x :c:\webserver\mywebsite\images\uploads). after that all you have to do is, link to ImageManager\index.cfm from your tinymce (look at the above code box in his post , line 12). Please feel free to drop me an note if you have any questions
Johny
Thursday 08 December 2011 01:43 PM
Hi, I've a problem whith menager. When I open menager i see source code of index.cfm file. How can I fix it?
Saturday 10 December 2011 09:17 PM
Do you have ColdFusion server running in your machine?
Jean-Pierre
Monday 21 November 2011 12:34 PM
In you demo above when I end up with the window with the "My images" and "Add images" links on top nothing happens when I click "Add images". I have Windows 7 and I've tried it with Firefox and MS Internet Explorer.
Tuesday 22 November 2011 10:25 AM
Seems like TinyMCE ver used in the demo stopped working. Updated it. Found a other error in the main files while investigating this. Thanks!
Sam
Friday 09 September 2011 08:45 AM
Just check line 25 in the index.cfm, variable [#pathtohere#] generated correctly. You can manually add the url there. Are you on Railo?
Tomasz
Friday 09 September 2011 05:23 AM
I am getting empty window when I click "Browse" icon. Is it index.cfm configuration fault?
Kyle Eggleston
Saturday 16 April 2011 10:11 PM
Awesome! Been working on a site and I def need this... very nice!
Tuesday 20 July 2010 10:25 AM
Sweet!! Was just looking for something like this!
Show/Hide Line Numbers . Full Screen . Plain
