Image Mapping plugin for CKEditor

Long time ago I cooperated with Adam Maschek to finish and polish the plugin of his imgmap library for FCKeditor.

Time passed by and people only bothered to request help with private mails instead of saying "Thanks" and even a little donation if the plugin was helpful.

So things go on that way and then I ported it to work for CKEditor when I needed it, but I decided to not publish it again as open source, supporting those request again was something that I didn't want to do.

Sometimes people contacted me asking for the plugin and those that behaved properly and also were willing to pay a little got the plugin. In order to make this step easier for anyone else, I'm publishing now a demo page to test the plugin, and a paypal button.

As you can see in the demo, the dialog is similar to the FCKeditor plugin, but I didn't want to fully match the previous one, so I've added only the features that made sense to me.

Price and availability

You can buy a license of the plugin at its new page.


Su Dongzhe said...

Thanks a lot for the release!
I just test it and here are some issues I found:

1. In chrome, the drawing of the shape is not correct(image is created not on the mouse pointing position), and the shape cannot be moved.

2. When creating an circle, exceptions pop out:
Exception: Index or size is negative or greater than the allowed amount

3. Create a polygon area on an image and click save, then open image map window on another image. The polygon button is already clicked, at this time if you click the circle button, both the circle and polygon buttons are clicked.

We are at the final moment before an season upgrade to our system on Saturday. I know this may be an inappropriate request but we'd be really grateful if you can fix these issues in this two days and we can finish the purchase of the plugin in this week.

Anyway, thanks again for your release on this plugin.

Alfonso Martínez de Lizarrondo said...

Thanks for the report.
The first two issues are located in the imgmap library, I've patched them and when I find the login data I'll create a report to fix them there.
And the third one is a little bug with the new sprite for the buttons.

All three issues are fixed in the demo now. Let's hope that there's nothing else hidden there :-)

Su Dongzhe said...

Thanks for the quick update!
In my local machine, every thing works perfect. Then I dilivered the demo page to our tester, issue 1 happens time to time in firefox on his machine.

As you said it's an issue in imgmap library and will fixed later, if we purchase the OEM version now, would we be able to get the future update from you? Thanks!

Alfonso Martínez de Lizarrondo said...

I uploaded the version with *my* patch so that should be working, I'll try to reproduce now in Firefox.
I filed 3 issues yesterday, providing patches for the 2 that I fixed: http://code.google.com/p/imgmap/issues/list (60, 61 and 62)

Anyway, when I release new versions those are sent to everyone, this is a one time payment and you'll get any future update.

Masudur said...

no map(rectangle, circle...) is positioning properly in firefox,chrome when page content is very long and editor goes bottom. but it works fine for IE.

pls give me updated code. i have purchased code from u.

Alfonso Martínez de Lizarrondo said...

You're lucky, last week someone else also reported that same problem and I'm currently testing the patched version.

When I'm sure that it works fine I'll send it to everyone; if you want it sooner, please send me a mail because I don't know who you are and so I can't send you anything.

In general, it's better to write me a mail if you have any issue instead of expecting me to find out your email in some magical way.

just-passin-thru said...

Does this work with CKEditor 4?

Alfonso Martínez de Lizarrondo said...

Yes it works with v4, I'm fighting with the github stuff to create a proper demo but it should be available soon.

Lila said...

Hi, I am a user of your FCK plugin for a university journal who just bought your ckeditor version. I just wanted to thank you for making the first one available openource and to have decided to upgrade it despite nobody thanked you properly. I decided to buy it just because it has been so useful. You can see an example of what we did thank to you mapping here : http://www.engramma.it/eOS2/atlante/index.php?id_tavola=1005 (click 'Dettagli' or 'Details' tab)

Alfonso Martínez de Lizarrondo said...

Hi Lila

Thank you so much for your kind words and support.
I've sent you the plugin this morning, please reply to the mail so that I know that you have received it

VasileN said...

Why the plugin not work correctly with CKEditor on dokuwiki? When i save the page, the links from image dissapear. The same situation is with fckglite editor.
thanks for your work on this plugin.

Alfonso Martínez de Lizarrondo said...

If your CMS isn't storing HTML or it's filtering the data in any other way it might remove the attributes that it doesn't know about.

I don't know anything about dokuwiki, so I can't help you about it.

Eric said...

I seem to have a problem administering existing image maps.

Everything looks okay within the editor, but as soon as I attempt to change the maps, everything seems to break.

Since I can't add attachments here, I have uploaded examples of my problem. You can view them at:




Be sure to look at how long the scroll bar is within the interface. The image areas become layered and are ridiculously tall.

Hopefully you can get to the bottom of this. I have a site with a lot of existing image maps, so if this plugin can not properly display them, I'll have to find something else.

Alfonso Martínez de Lizarrondo said...

Hi Eric

I've done some tests based on your screenshots and the problems seems to come from the decimal point in the map coordinates.

The imgmap library wasn't designed/tested for that situation, so I've made a quick change and now it seems to work.

I'll send you a mail to a new version of the plugin so you can test if this is enough to fix all the problems, otherwise, just send me the HTML that fails and I'll debug it again.

akraus said...

I am finding that there are problems if the URL is not entered when the image map is saved. For example, I can't go back and edit the image map if it doesn't have a url. What can I add to check that the URL has been entered before adding the image map to the document?

Alfonso Martínez de Lizarrondo said...

As shown in the documentation you can use the "imagemaps.validate" event to validate the data when the Ok button is clicked.

Anyway, the behavior that you describe seems quite wrong. I will try to reproduce it in order to avoid such problem, it might be helpful if you could mail me any other detail about your configuration, browser, version of CKEditor, etc...

akraus said...

I was just able to reproduce the problem using your demo. Try this:
1. Create an image map but don't enter a URL and titles, leave these fields blank
2. Click on the OK button
3. With the cursor positioned in the image map area right click the mouse button

I get an error page displayed (I am using Chrome and CKEditor 4.3) that says:
Aw Snap, Something went wrong while displaying this webpage.

I hope this is enought information for you to reproduce this

akraus said...

I apologize, this was my error. It turns out that I forgot to add the code that is run to validate the imagemap:
e.editor.on( 'imagemaps.validate' , function(ev) {

Now that this has been added the tool works fine.

Alfonso Martínez de Lizarrondo said...

That crash happens even when this plugin isn't installed.
I've created a bug report in Chrome because they are the ones that should take care of browser crashes: https://code.google.com/p/chromium/issues/detail?id=331664

Next, I will try to find if it's possible to avoid it in CKEditor (even if the next version of CKEditor doesn't crash, Chromium should fix the underlaying problem).

Hung Gia Dien said...

Hi, currently if we use a big image the mapping area show scroll-bars accordingly. But after we scrolled, the drawing coordinate went astray immediately and return to normal if we scroll back to original position.
Please look into this.

Alfonso Martínez de Lizarrondo said...

Hi Hung

Which browser and version of CKEditor are you using?

How big is the image?

I think that I fixed that kind of bugs previously, but there might be something that I didn't notice.

If you can mail me some screenshots it would be great.

Dave Battersby said...

Hi, Ive used this plgin for a year now and had a quick question. occasionaly in IE8 the image swill not display, checking the source they are being added as base64 images. This doesn't happen all the time, is this expected behaviour or configurable?

Alfonso Martínez de Lizarrondo said...

Hi Dave

The base64 images are used in other browsers to render the map areas inside the editor, but that code shouldn't be executed in IE8, and when you read the data from the editor they should always use the real URL, so I would need a testcase to understand how to reproduce the problem.

I don't fully understand if you're having the problem in just one editing session, or if you're editing and then the problem is in the final page when viewed in IE8.

If you could mail me any additional detail it would be great to understand where's the root of the problem.

Asim Khan said...

I am in Pakistan wants to buy 10 Euro version of the CKEditor addon of Image Mapping .
But i can not purchase due to PayPal services doesn't cover our country.
Is there any other method of paying.
Do you accept Amazon Gift Certificate for the same value. Since we have amazon account.

Alfonso Martínez de Lizarrondo said...

Hi Asim

As Amazon is a global site I think that it's OK, sometimes other people have suggested weird platforms that I've never heard of, but Amazon is different.

Please send me an email so we can find out how to do it: amla70 at gmail dot com

Ji, Kuanliang said...

We're using Image Mapping plug-in on our site. Recently we've started to look into using Widgets but found out all the editable fields created by the Widgets plug-in are disabled by the Image Mapping plug-in. Is there a solution to the issue? Thanks.

Alfonso Martínez de Lizarrondo said...

Are you sure that the problem is this plugin?
I've tested right now in a page with the image2 widget and I can edit the maps and I'm able to also edit the caption of the image.

Ji, Kuanliang said...

Thanks for your response. We want to use Widget plug-in to create editable fields which have custom styles applied. When both Widget and Image Mapping plug-in enabled, the editable fields created by the Widget plug-in are disabled (i.e. we can't enter any text in the fields). When Image Mapping plug-in disabled, we don't have any issues with editing those fields.

Alfonso Martínez de Lizarrondo said...

So you are expecting me to create a new Widget plugin (as I said I tested with the Image2 widget) and keep trying to make it work in a way that fail as yours?

I guess that many other people are using Widgets and so far this is the first report of a problem, so if you want me to spend any time on this you have to provide me a way to reproduce the problem, not expect me to review every line of code in order to hunt a ghost.

Ji, Kuanliang said...

No, I don't expect you to create the new Widget as the Widget we created works without the Image Mapping plug-in. All we expect is a little support from you as we purchased your product.

No, this is not the first report of the issue (see post from Sep 2nd, 2014)

Alfonso Martínez de Lizarrondo said...

Let's see if now you can understand this:
If you want me to create a plugin in order to test your problem you'll have to wait until I have enough time to do that. If you want a quicker solution, you should send me detailed instructions to reproduce the bug, including all the custom code (as minimal as possible) so I don't have to rewrite it.

With regards to that comment, you can find this in the history log:
3.5.17 2-September-2014
Added protection in case the img has been directly inserted into the DOM and it's missing the data-cke-src attribute
Integration with the "image2" widget: Disable the check for clicks on the area because it makes impossible to edit the caption

You can see that I fixed that problem the same day that it was reported. Given that there are no further comments about that I guess that this is a new regression or maybe there's something different in your plugin, but as I said my current testing has worked so I really need you to help me to find out the problem.

Alfonso Martínez de Lizarrondo said...

For anyone reading this afterwards, the problem turned out to be that they were using a very old version of the plugin. For some reason they missed the update that fixed the problem as stated in my previous comment.