Whenever I enter an image with a map, it will save the image and its map properly only if you save it immediately after the edit. If you re-edit the page, Tiny Tiny MCE strips out the usemap="#Map" and replaces it with a forward slash (/). It also places line-returns after every tag causing excessive space after the image.

So if you enter:

<div align="center"><img style="border: 0px;" src="/cottageparkrentals/sites/default/files/pictures/photo_collage.jpg" border="0" alt="Cottage Park Rental Homes" width="700" height="164" usemap="#Map"><map name="Map"><area title="134 Coleman Ave" shape="poly" coords="14,158,2,17,193,4,204,146" href="../134Coleman" alt="134 Coleman Avenue"></area><area title="52 King St" shape="poly" coords="391,144,400,29,207,8,201,73,204,126" href="../52King" alt="52 King Street"></area><area title="37 King St" shape="poly" coords="402,35,397,94,406,147,577,124,561,15" href="../37King" alt="37 King Street"></area><area title="61 King St" shape="poly" coords="578,110,572,73,574,21,693,30,688,119" href="../61King" alt="61 King Street"></area></map></div>

It will only format correctly if you save immediately after the edit. If you come back in to re-edit the page, this is what the code will have become:

<div><img style="border: 0px;" src="/cottageparkrentals/sites/default/files/pictures/photo_collage.jpg" border="0" alt="Cottage Park Rental Homes" width="700" height="164" /> 
<map name="Map">
<area title="134 Coleman Ave" shape="poly" coords="14,158,2,17,193,4,204,146" href="../134Coleman" alt="134 Coleman Avenue"></area>
<area title="52 King St" shape="poly" coords="391,144,400,29,207,8,201,73,204,126" href="../52King" alt="52 King Street"></area>
<area title="37 King St" shape="poly" coords="402,35,397,94,406,147,577,124,561,15" href="../37King" alt="37 King Street"></area>
<area title="61 King St" shape="poly" coords="578,110,572,73,574,21,693,30,688,119" href="../61King" alt="61 King Street"></area>
</map>
</div>

Note that both the <div align="center"> and the usemap entries have been changed, and all the line-breaks have been added. So, everytime the code needs to be edited, you have to repair the 'damaged' sections as well. Same results using the HTML editor function.

Am I missing something here? I just updated both Tiny Tiny MCE and the Tiny MCE code today. The older versions, TTMCE 6.x-1.8 and TMCE 3.2.0.2 had the same behavior. I'm now at 3.2.1.1 for Tiny MCE and 6x-1.12 for TT MCE.

Comments

design10’s picture

design10 CreditAttribution: design10 commented

This can be fixed by adding usemap attribute to the advimage array in

modules/wysiwyg/editors/tinymce.inc

like so

'advimage' => array( 'path' => $editor['path'] . '/plugins/advimage',
'extensions' => array('advimage' => t('Advanced image')), 
'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, ),
david.mann’s picture

david.mann CreditAttribution: david.mann commented

didn't worked for me, i changed the file activated the advimage plug-in ... and it still removed the usemap attribute

it seems pretty useless a security mechanism to me .. you can edit the posted value anyways ... hope this will be removed (drupal has input filters which is a way better for security) for better user experience ... i mean at this time you could not add a you tube video without problems ,or use image maps ...