I've spent hours googling and trying various ways of troubleshooting this, but I'm not getting anywhere.

I need to override tinymce's extended valid elements to add "map[name],area[shape|coords|href|title]" for image maps. It works perfectly in FF2 but not in IE7 (i only have access to 7, not sure about other versions).

The page works fine as long as tinymce is disabled. As soon as it's enabled using IE7 as the browser it mangles my image map (all the "CSS and Output" options are OFF).

My image map goes from this:

<img width="420" src="/files/shared/service-desk/image_map1.gif" height="1224" usemap="#map1" border=0 /> 
<MAP NAME="map1">
<AREA SHAPE=RECT COORDS="143,24,240,62" HREF="#step1" />
<AREA SHAPE=RECT COORDS="143,84,239,156" HREF="#step2" />
<AREA SHAPE=RECT COORDS="145,181,238,252" HREF="#step3" />
<AREA SHAPE=RECT COORDS="143,276,238,348" HREF="#step4" />
<AREA SHAPE=RECT COORDS="143,372,239,445" HREF="#step5" />
<AREA SHAPE=POLY COORDS="238,504,190,468,144,504,192,540" HREF="#step6" />
<AREA SHAPE=RECT COORDS="12,468,108,540" HREF="#step7" />
<AREA SHAPE=POLY COORDS="238,600,191,563,145,599,191,636" HREF="#step8" />
<AREA SHAPE=RECT COORDS="311,564,406,635" HREF="#step9" />
<AREA SHAPE=POLY COORDS="239,696,191,659,145,695,191,733" HREF="#step10" />
<AREA SHAPE=RECT COORDS="143,755,239,827" HREF="#step11" />
<AREA SHAPE=RECT COORDS="144,852,237,924" HREF="#step12" />
<AREA SHAPE=POLY COORDS="238,983,192,949,142,983,194,1019" HREF="#step13" />
<AREA SHAPE=RECT COORDS="10,947,106,1020" HREF="#step14" />
<AREA SHAPE=RECT COORDS="143,1044,239,1114" HREF="#step15" />
<AREA SHAPE=RECT COORDS="133,1139,250,1213" HREF="#step16" />
</MAP>

to this:

><img border="0" useMap="#map1" width="420" src="/files/shared/service-desk/image_map1.gif" height="1224" /> <map name="map1">
<area href="#step1" />
<area href="#step2" />
<area href="#step3" />
<area href="#step4" />
<area href="#step5" />
<area href="#step6" />
<area href="#step7" />
<area href="#step8" />
<area href="#step9" />
<area href="#step10" />
<area href="#step11" />
<area href="#step12" />
<area href="#step13" />
<area href="#step14" />
<area href="#step15" />
<area href="#step16" />
</map>

Simply by toggling Enable/Disable Rich text editing.

For comparison, when doing the exact same experiment in FF I get this:

<img src="/files/shared/service-desk/image_map1.gif" usemap="#map1" border="0" height="1224" width="420" /> 
<map name="map1">
<area href="#step1" shape="RECT" coords="143,24,240,62" />
<area href="#step2" shape="RECT" coords="143,84,239,156" />
<area href="#step3" shape="RECT" coords="145,181,238,252" />
<area href="#step4" shape="RECT" coords="143,276,238,348" />
<area href="#step5" shape="RECT" coords="143,372,239,445" />
<area href="#step6" shape="POLY" coords="238,504,190,468,144,504,192,540" />
<area href="#step7" shape="RECT" coords="12,468,108,540" />
<area href="#step8" shape="POLY" coords="238,600,191,563,145,599,191,636" />
<area href="#step9" shape="RECT" coords="311,564,406,635" />
<area href="#step10" shape="POLY" coords="239,696,191,659,145,695,191,733" />
<area href="#step11" shape="RECT" coords="143,755,239,827" />
<area href="#step12" shape="RECT" coords="144,852,237,924" />
<area href="#step13" shape="POLY" coords="238,983,192,949,142,983,194,1019" />
<area href="#step14" shape="RECT" coords="10,947,106,1020" />
<area href="#step15" shape="RECT" coords="143,1044,239,1114" />
<area href="#step16" shape="RECT" coords="133,1139,250,1213" />
</map>

Obviously the code it still being rewritten, but properly in this case. I did find some reference to this on one thread over at moxie, but they say adding the extended elements should fix the problem with IE (it's only specifying all elements with "*[*]" that won't work with IE.

I'm losing my mind--- any ideas? (and no, i can't just tell users to use firefox, lol. This is an intranet environment and the only reason I have FF is for firebug).

Any suggestions?

Comments

WorldFallz’s picture

Ok, now this is really bizarre-- when I examine the source of a page loaded with tinymce from IE it does show the extended element i added in tinyMCE_init:

extended_valid_elements : "area[accesskey|alt|class|coords|dir<ltr?rtl|href|id|lang|nohref<nohref|onblur|onclick|ondblclick|
onfocus|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|
onmouseup|shape<circle?default?poly?rect|style|tabindex|title|target]"
mupsi’s picture

Status: Active » Closed (outdated)