TinyMCE 2.x and 3.x

I got it to work with drupal 5.12 and tinymce 3.x

More notes at http://drupal.org/node/195498#comment-1120143

For drupal users, if you did not know this already... the tinymce module is deprecated by the wysiwyg module.

I was able to get the imgmap plugin to work for that module it seems...

After putting the proper unzip in the proper tinymce folder, had to edit sites/all/modules/wysiwyg/editors/tinymce.inc instead of the old plugin_reg.php

<code> // added after table plugin array description for img support // pep, http://code.google.com/p/imgmap/wiki/TinyMCE_setup 'imgmap' => array( 'path' => $editorpath'? .'/plugins/imgmap', 'buttons' => array('imgmap' => t('Image Map')), 'extended_valid_elements' => array('img[usemap|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseove r|onmouseout|name],map[id|name],area[shape|alt|coords|href|target]'), 'url' => 'http://code.google.com/p/imgmap/', 'internal' => TRUE, 'load' => TRUE, ), // end mod for imgmap </code>

I am using the wysiwyg module as well, with TinyMCE 3.2.2 and the imgmap showed up on my button...and appeared to work, but I could not get it to place the <code><img usemap="#somemapid" src="/files/somepicture.gif" border="0" width="400" height="300" /></code> in the html.

I had to add the "usemap" parameter to my advimage img array. Like so: <code>'extended_valid_elements' => array('img[usemap|src|alt|title|align|width|height|hspace|vspace|border|style|class|onmouseover|onmouseout|id|name]'), </code>

I also added onmouseover|onmouseout|title parameters to the area attribute as well.

This worked like gangbusters.

Awesome piece of work!! Are many people using in in tinyMCE?

The only difference between plugin_tinymce96.zip and plugin_tinymce3.96.zip is the install.txt file. I tried using on tinymce ver 3.5.2 and needed the following changes:

1) popup.html::delayedLoad(): always using tinyMCEPopup.onInit.add(init()); 2) editor_plugin.js: passing img_obj via additional parameters (not working in function.js::init() function was getting a form element instead of selected img (didn't try to figure why) 3) functions.js:init():: get img_obj from tinyMCEPopup.getWindowArg('img_obj') 4) imgmap.js: Firefox objects this.areasid?.label & this.areasid?.parentNode undefined so not set to null when they don't exist 5) instructions fieldset added and some css tweaks

Thanks for these detailed code examples.

All I had to do was put the imgmap folder from the zip file into the /sites/all/libraries/tinymce/jscripts/tiny_mce/plugins directory. Then I applied the code snippets above. I had to find where to insert them, so here's a clearer explanation:

In the interest of combining the already awesome code snippets you've provided, here's my combined hack that works like a charm for drupal/sites/all/modules/wysiwyg/editors/tinymce.inc:

1. Find the array that starts with $plugins = array( 2. Apply this hack starting with replacing 'advimage' => array(

<code> 'advimage' => array( 'path' => $editorpath'? . '/plugins/advimage', 'extensions' => array('advimage' => t('Advanced image')), // hack for imgmap added usemap to this list 'extended_valid_elements' => array('img[usemap|src|alt|title|align|width|height|hspace|vspace|border|style|class|onmouseover|onmouseout|id|name]'), 'url' => 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/advimage', 'internal' => TRUE, 'load' => TRUE, ), // hack for imgmap // added after table plugin array description for img support // pep, http://code.google.com/p/imgmap/wiki/TinyMCE_setup 'imgmap' => array( 'path' => $editorpath'? .'/plugins/imgmap', 'buttons' => array('imgmap' => t('Image Map')), 'extended_valid_elements' => array('img[usemap|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseove r|onmouseout|name],map[id|name],area[onmouseover|onmouseout|title|shape|alt|coords|href|target]'), 'url' => 'http://code.google.com/p/imgmap/', 'internal' => TRUE, 'load' => TRUE, ), // end mod for imgmap </code>