This is a dialog-based plugin to handle insertion and modification of image map areas in CKEditor.
Alfonso Martínez de Lizarrondo
Important: Since version 3.6.0 this plugin is compatible only with CKEditor 4, if you need an old version for CKEditor 3, send me an email
Extract the contents of the zip in you plugins directory, so it ends up like
this
ckeditor\ ... images\ lang\ plugins\ ... imagemaps\ icon.png plugin.js dialog\ docs\ images\ lang\ ... skins\ themes\
Now add the plugin in your config.js or custom js configuration
file:
config.extraPlugins='imagemaps';
If you are already using other additional plugins, then you must have a single extraPlugins statements with all the plugins separated by commas:
config.extraPlugins='confighelper,imagemaps';
In your toolbar configuration, add a new 'ImageMaps' item in the place where you want the button to show up.
When the user presses OK in the dialog, if the data is correct a custom "imagemaps.validate" event will be fired, allowing you to add custom validation according to your specific needs. If you cancel that event then the dialog won't close until the user changes the map to pass your validation.
Example of usage: force all links to start with "http://":
// Let's add this to every editor on the page. You can instead add it only to a specific editor.
CKEDITOR.on('instanceReady', function(e) {
// the real listener
e.editor.on( 'imagemaps.validate' , function(ev) {
// the "imgmap" object is passed as the data property of the event
var imgmap = ev.data;
for (var i = 0; i < imgmap.areas.length; i++)
{
if (imgmap.areas[i].ahref.substring(0, 7) != "http://")
{
alert("All links must start with 'http://'");
// Cancel the event to mark that the validation has failed
ev.cancel();
}
}
});
});
Clear your cache and reload your editor. Now when you select an image the new button will be enabled so you can map the active regions. If you select an image with an existing map the button will be highlighted.
To add a new translation open plugin.js and search for "translations", it's at line 6 and add your language (the example is based on adding Polish ('pl')
// translations
lang : ['en', 'el', 'es'],
to // translations
lang : ['en', 'el', 'es', 'pl'],
Then in the lang folder copy the en.js to pl.js, edit that file and in the first line set your language:
CKEDITOR.addPluginLang( 'imagemaps', 'pl',
and finally, translate all the text between quotes :-)
If you send it back to me I'll include it in the next versions.
Check my blog for any further info, you can take a look at other plugins that I've created for CKEditor. Most of them are free and they can fix little annoying issues
CKEditor is © CKSource.com
The core imgmap code is © Adam Maschek