In my mind, I can hear the them to Picture Pages playing in the background – because I want to remind you that in my quest to be a better web developer (and share with the world) I started this “toolbox” so I could keep a cataloged stockpile of simple easy to use tricks to make my life easier – plus I wanted to share…

This is documented somewhere on TinyMCE’s site, but it’s may not be easy to find. It’s simple little trick that I use as a helper to a simple image manager to go along with TinyMCE (since you have to pay for an image manager).

In my day to day life, it seems like I need a backend to every site I build, no one wants simple pages anymore. So I end up with a lot of forms, which have a lot of textareas in them. I like using TinyMCE as the wysiwyg editor for those textareas. This also calls for adding images and TinyMCE charges for the built in feature above using a url for an image. This presented me with a problem, I have end users who aren’t savvy enough to upload images (FTP) and then get the url to add the image to the editor, but they want images.

My solution was very simple…

Create a simple image uploader, with clickable images that put them in the editor at the point of the cursor. Sounds easy right? It actually is…

I’m going to ignore the part of uploading the images, and listing the images for now – most people have this nailed down already and do it their own way – I want to focus on the clicking the image and adding to the textarea.

Prerequisites:

1. JQuery
2. TinyMCE

Make sure you have them loading in you html, you’ll need access to them.

Make sure your textarea is labeled correctly, this really matters if you have multiple instances of an editor, I’m just going to show 1 simple editor for the sake of being lazy…lol

tinyMCE.init({
 // General options
 mode : "textareas",
 theme : "simple",
 editor_selector : "example1"
});

So there’s my call to my textarea. The textarea would look something like this.

<textarea id="example1"></textarea>

This will load the editor into the textarea. Remember your ID there – it comes into play latter on. Now let’s look at the image and how we’re gonna make it clickable – the event that’s gonna do everything for us. There’s a number of ways to go about this, but I happen to like binding to JQuery’s click event.

<a href="".$image_variable."" title="click_to_add"><img src="path/to/image".$image_variable."" alt="".$image_variable.""/></a>

You might be asking yourself why I’m using a link, well I don’t have a good answer – you could accomplish this same task by adding an onclick to the image, or accessing the image through a JQuery selector, the sky’s the limit, but this is for using a link.

In the $(document).ready() function you access the link like this:

$("a[title='click_to_add']").click(function() {
 img = $(this).attr("href");
 ed = "exmaple1";
 html = "<img src='path/to/image/'+img;
 tinyMCE.execInstanceCommand(ed,"mceInsertContent",false,html);\
 return false;
});

Let me explain.

The first line binds the event, so when you click on the link it runs the function for the click. The img grabs the href value from the link which in our case is the image name. The ed is the editor ID, now if you have multiple editors you’re going to need to know which one to use (I know there’s a way to figure out what is the active editor, but I needed to make sure for the end user’s sake). Then the html is just the image tag with the url. The tinyMCE bit is a hook into TinyMCE’s API which inserts the text (img tag) at the point of the cursor – which if all things went right, should show an image now. The return false just keeps it from actually going to the link.

It’s pretty simple, and like I said it could be done different ways – and problem better. I fully expect at some point it’ll come to me and I rewrite this into something better, but until then – this is what you’re stuck with.

Enjoy it and have fun…