Image Maps Plugin for CKEditor

Introduction

This is a dialog-based plugin to handle insertion and modification of image map areas in CKEditor.

Author:

Alfonso Martínez de Lizarrondo

Version history:

  1. 2.0: 1-March-2011. First version ported from the FCKeditor version.
  2. 2.1: 18-September-2011. Adjustments of resizing the dialog.
  3. 2.2: 15-October-2011. IE8 bug that didn't allow to show the contents of the dialog since [7185].
  4. 3.0.0 5-November-2011. Rewritten to fit correctly with the CKEditor dialogs without using the iframe as that's not properly supported by CKEditor (see versions 2.1 and 2.2)
    The browser functionality requires a CKEditor version > 3.6.2, because there was a bug that I fixed for this plugin.
  5. 3.1.0 15-November-2011. Automatically detect CKEditor version to avoid problems with "browse server" button
    Reorganize structure and simplify some parts
  6. 3.2.0 31-May-2012. Use a single sprite for the icons
  7. 3.2.1 3-June-2012. Fix problem with the detection of CKEditor version
  8. 3.3.0 9-July-2012. Fix problems with IE (first click while drawing and double click in the editor)
  9. 3.3.1 10-July-2012. Fix problems with Chrome. Switched to use the uncompressed imgmap.js as some changes were required there.
  10. 3.3.2 11-July-2012. Avoid drag&drop of the image.
  11. 3.3.3 8-September-2012. If the main page was scrolled, drawing of polygons failed in all browsers != IE.
  12. 3.4.0 12-September-2012. Added compatibility with CKEditor 4 beta.
    IE8 didn't initialize the excanvas library correctly and so circles and polygons were not visible.
  13. 3.4.1 21-September-2012. Fixed compatibility problems with the old CKEditor 3.4.1, it's ugly but now the dialog works.
    Tooltips for area actions were missing.
  14. 3.4.2 Simplification of the dialog options.
    Create name attribute for the map if IE is in quirks mode.
  15. 3.4.3 13-October-2012 Added an event "imagemaps.validate" to perform custom validation before creating the map.
  16. 3.4.4 Swedish translation.
  17. 3.5.0 23-February-2013 Integration with CKEditor 4.1 data filtering.
    Draw the shapes over the image in the editor (this is a native feature for IE)
  18. 3.5.1 3rd-March-2013 I was breaking the selectionChange event in v4 :-(
    Handle maps where the name attribute has been removed
    IE compatibility bug with the new shape drawing
  19. 3.5.2 12-March-2013 Compatibility with devTools plugin.
  20. 3.5.3 13-March-2013 Allow the "imagemaps.validate" event to modify the data.
  21. 3.5.4 16-March-2013 Remove orphan maps if the image is deleted from the editor.
  22. 3.5.5 19-April-2013 Show the image correctly if it was resized with attributes instead of inline styles.
    Adjust correctly the 4.1 ACF (the "url" attribute doesn't exist, I'm stupid).
    Detect correctly v4 to avoid huge dialogs and provide better layout
    Adjusted the language files so the plugin can be compiled correctly with a local install of CKBuilder
    Set 'insert' as the toolbargroup for the button (besides image button) instead of the default 'others'
  23. 3.5.6 1st-April-2013 Handle better the hover and cursor effects while editing a map in Chrome if the page has been scrolled
    Resizing of the preview was disabled in CKEditor 4
  24. 3.5.10 24-August-2013 Improved compatibility with CKBuilder (merge icon into the main toolbar strip)
    Restrict operations to the editor content (for inline and divarea modes, skip maps and images outside the editor)
    Improved drawing of the areas with the image in Chrome
  25. 3.5.11 9-December-2013
    Adjusted compatibility with IE11
    Adjusted for compatibility with the image2 widget in CKEditor 4.3 (still not perfect, but it seems to mostly work)
    Remove overlaid areas when removing a map on an image
    Set dialog to use Strict mode
    Corrected context menu state (it was always "on")
    If the window wasn't tall enough to display the whole dialog, most of the times the areas were drawn incorrectly
    Removed commented out code and unused methods (preview mode, Bezier curves) in the imgmap library (~24Kb)
  26. 3.5.12 18-December-2013
    Adjusted the imgmap library to handle existing maps with decimal precision in the coordinates
  27. 3.5.13 20-January-2014
    Corrected compatibility with CKEditor 3.6 that was broken due to the changed for the "image2" widget.
    Corrected regression: if the main page is scrolled, the areas were created misplaced.
  28. 3.5.14 22-January-2014
    Highlight the currently selected area while editing
  29. 3.5.15 1st-February-2014
    Modify the detection of the new "Enhanced image"/image2 widget to take into account its internal rename.
  30. 3.5.16 21-August-2014
    Add CSS rule to avoid conflicts with max-width or max-height for images
    Fix scrolling issues in older IEs
  31. 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
  32. 3.5.18 4-November-2014
    Added French translation
  33. 3.5.19 3-April-2015
    Corrected compatibility with IE11 to work with existing areas
    Corrected drawing of polygons on IE9
    Removed 5px offset while drawing polygons
    Removed unused code in imgmap library
    Improved highlighting when moving the mouse over the areas
  34. 3.5.20 25-May-2015
    Preserve id and class attributes on the <area> elements
    Updated German translation by Stefan Berger
  35. 3.6.0 26-July-2015
    Removed compatibility with CKEditor 3.
    Avoid marking the editor as "dirty" due to the internal changes to the image to draw the areas
    Use of Blobs instead of Base64 data URIs to draw the areas, avoiding this way to bloat the innerHTML (-->Undo stack)
    General code clean up

Disclaimers

CKEditor is © CKSource.com

The core imgmap code is © Adam Maschek