image map in ckeditor

Hi,

It was written few times here: https://bitbucket.org/SimplyCast/imagemap-for-ckeditor/
I don't test it, but no one report does it not works...

Greetings

I've tried the image map plugin but have not been able to get it to work yet. I see the button, but clicking on it does nothing. Has anyone got it to work?

Sharon

Hi Sharon, I have the same issue ; firebug says "$ is undefined" on :
$.modal("<div style='width: 640px; height:400px; border: 1px solid black; background: white;' id='imageMapModalDiv'>\
I assume we have to load the modal plugin for jquery.

Do you know where we should put the plugin. I see now in the Installation info for the plugin,(https://bitbucket.org/SimplyCast/imagemap-for-ckeditor/)
that we should:
"Include the jQuery SimpleModal plugin on your page from here"

I wasn't sure if I should put it in the Library folder, the plugin folder for ckeditor, or possibly in the jquery_plugin folder. I've tried all of these without any luck, maybe it needs to be in a folder?

Sharon

Hi all,

I made some progress on this issue...
1. '$ is undefined' is because $ doesn't work in D7. Use' jQuery' instead. See http://stackoverflow.com/questions/4681309/using-jquery-in-drupal-7

2. SimpleModal has to be loaded by the imagemap plugin, or by Drupal somehow. I added
CKEDITOR.scriptLoader.load(CKEDITOR.getUrl('../plugins/imagemap/jquery.simplemodal.1.4.2.min.js'));
to plugin.js to load it when imagemap plugin is loaded.

I attached the modified imagemap plugin, which includes simplemodal (put the entire folder in modules/ckeditor/plugins, and activate it in the CKEditor settings in D7).

This setup shows the imagemap editor, but after you select a circle, box or polygon, all controls disappear, and I have no idea how to save the modified imagemap. :((
Any suggestions?

Ok, just figured out where the control buttons went... When you select a circle, box or polygon, they move below the imagemap div, so just expand your browser window (a lot) to get them back into view.

Jurveen
I've already changed all the $ to jQuery and tried adding the simplemodal script as you suggest, clicked the button to enable the imagemap plugin and still when I click the imagemap button after selecting an image, nothing happens.

Thanks
Sharon

Hi Sharon,
Did you put the entire folder from post #6 in /sites/all/modules/ckeditor/plugins ?
Do you see any javascript errors in your browser?

Yes, It's all there. Where would I look for the javascript errors? I don't see anything. I selected the image I want to map, clicked the imagemap button and nothing happens.
Thanks for any insight.

Sharon

Which browser do you use?
In Firefox 10, the error console can be found here: menu Tools > Web Developer > Error console.

For IE, I have no idea if there is a built-in error console. However, if you're using IE 7/8, you also need the Excanvas plugin. See Enabling IE7/8 Support on the imagemap homepage.

Jurien

ok, mine seems to be looking here:
/public_html/sites/all/libraries/plugins/imagemap

So after I've got it in the right place I select an image and click the image map editor and something shows up, but I'm not entirely sure how to use it. I selected circle but how do I change the text from "New" to something useful? Also half the time when I click the imagemap box, I get a new window with a gray background - no image with the circle, box, polygon buttons.

Thanks
Sharon

Hi Sharon,
Ok, so you got the plugin to work. More or less...
I looked at the code again, and the gray area seems to appear when you try to edit an existing imagemap.
Error console: imagemap.js, line 191.
maps = editor.document.jQuery.getElementsByTagName("map");
My guess is that this should be replaced by maps = jQuery("maps");
The error disappears, but the imagemap areas I had previously added don't show up.

So, I guess these are the limits of imagemap plugin at the moment. I posted an issue on the author's page at bitbucket.

Jurveen - I tried your change but still gray unless I remove the map and can't figure out how to actually label the map. Also It doesn't seem to work at all on my mac running firefox - bizarre.

Sharon

I have this working for new and existing image maps. I did a lot of hackery on the code. I also made a WSIWYG module for Drupal 7... unofficial.

If anyone is interested, message me for it. Here's a shot of it:

Plugin/Editor Overlay: ImageMap CkEditor Plugin

Edit: Fixed the screenshot link.

yes, please.

Thanks
Sharon

If anyone want to edit an existing imagemap change line 191 in imagemap.js

from maps = editor.document.jQuery.getElementsByTagName("map");
to maps = image.getDocument().getElementsByTag("map").$;

This works for me.

To simply allow image map tags in CKeditor:

1. Go to the "Full" profile (admin/config/content/ckeditor/edit/Full), taking that you'll use this profile to edit content with the CKeditor,
2. Open the tab Advanced content filter,
3. Add the following to the Extra allowed content field: img[*];map[*];area[*]

You should be good to go.

Hi,

The easiest way for me was using fckeditor in wysiwyg. A step-by-step guide can be found below.

Modules needed:

• WYSIWYG
• jQuery Map Hilight (you guessed it right, it highlights hotspots)
• IMCE
• IMCE Wysiwyg API bridge

Libraries needed (use attached files):

• Kemayo Maphilight
• FCKeditor

1. Enable the modules WYSIWYG (probably you already have) and jQuery Map Hilight
2. In order to browse for files on your server later, install IMCE and IMCE Wysiwyg API bridge
3. Go to Configuration > Content authoring > Text formats and create a text format
4. Go to Configuration > Content authoring > Wysiwyg profiles
5. Assign FCKeditor to your freshly created text format and click save
6. Now an Edit option should have appeared in the Operations column, click that
7. Go to Buttons and Plugins, put a checkmark in Image + IMCE
8. Now when creating a new node, select your text format to which you assigned FCKeditor
9. Click on the image icon
10. paste in the URL of your desired image or select one on your server via the browse button
11. After that hit enter and close the dialog, your image should appear in the texteditor
12. Select your image and right-click, you should see now the option Image Map Editor

What I did in addition is I also created I term reference field. Whenever I hover my mouse on a term reference, the matching hotspot area lights up on the image, kind of Facebook tagging. Buts that's another story.

Have fun!