Title: [Plugin: Ultimate TinyMCE] Image map not working
Last modified: August 20, 2016

---

# [Plugin: Ultimate TinyMCE] Image map not working

 *  Resolved [fredgorski](https://wordpress.org/support/users/fredgorski/)
 * (@fredgorski)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/)
 * Running latest wp and plugin. I tried maping images just to see how it works,
   but right on the beginning, when adding image, then clicking image map editor,
   it simply doesn´t work… opens the editor, but I can´t add anything, nor does 
   the images appear there.
 * [http://wordpress.org/extend/plugins/ultimate-tinymce/](http://wordpress.org/extend/plugins/ultimate-tinymce/)

Viewing 15 replies - 1 through 15 (of 15 total)

 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2739841)
 * What browser are you using? Have you tried using firefox?
 * The editor can be very picky on certain functionality. I’ve found that the firefox
   browser seems to be the most “liked” by tinymce.
 * Could you please try using firefox and let me know if you still have trouble?
 *  Thread Starter [fredgorski](https://wordpress.org/support/users/fredgorski/)
 * (@fredgorski)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2739845)
 * Hi Josh,
    It´s true, it works on firefox, thanks. I was using chrome, which I
   have been using lately because Firefox latest releases break too much, maybe 
   because my computer is a bit old, but chrome runs a lot easier than fox. I´ll
   try to remember that when using the resource.
 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [14 years, 1 month ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2739862)
 * Right.
 * I did have some trouble with Mozilla for a while. I upgraded my computer, and
   haven’t had any trouble with it since (even latest releases). Ironically, Chrome
   has been giving me some issues.
 * I suppose there are so many variables… it’s just kind of hit and miss. I wish
   I had a more “solid” solution, but I’m afraid that’s as good as it gets for now.
 *  [JsonB123](https://wordpress.org/support/users/jsonb123/)
 * (@jsonb123)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740104)
 * I wanted to post here because I’m having the same issue…which could potentially
   be a problem for a client I’m building a site for, depending on what browser 
   they choose to use of course. Anyway, here’s the rundown of what I’ve found. 
   I’m on OS X by the way:
 * – **Chrome** (latest — 22.0.1229.94) the image doesn’t show in the popup interface
   –**
   Safari** (latest — 6.0.1) same as Chrome ** These are both Webkit browsers…could
   that have something to do with the issue? **
 * – **Firefox** (latest — 16.0.2) works perfectly, as you’ve noted already
 * – **Opera** (latest — 12.02) works perfectly.
 * I still need to test this on the Internet Explorer versions but it seems like
   it’s specifically webkit that is the issue here…strange.
 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740105)
 * Okay… do you receive any messages or notices from the webkit browsers?
 *  [JsonB123](https://wordpress.org/support/users/jsonb123/)
 * (@jsonb123)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740106)
 * I do get this JavaScript error when the edit page loads:
    GET [http://mysite.dev/wp-content/plugins/ultimate-tinymce/css/change_mce_.css?ver=1](http://mysite.dev/wp-content/plugins/ultimate-tinymce/css/change_mce_.css?ver=1)
   404 (Not Found) in post.php:619
 * And when I try to click the plus button in the imagemap popup (there is no image
   showing in the popup so I’m sure that’s why these errors are happening)
    Uncaught
   TypeError: Cannot call method ‘addNewArea’ of undefined in popup.html:108
 * Trying to click the minus button
    Uncaught TypeError: Cannot read property ‘currentid’
   of undefined in popup.html:108
 * Hope that helps sort out the issue…I’ll just try to get the admins for this site
   to use Firefox if necessary. It seems like there is just less functionality in
   general with even the standard WordPress tinymce in browsers. E.g: when highlighting
   an image in Firefox, Opera vs Chrome, Safari you get a dotted line around the
   image to resize it… you don’t get this in Chrome/Safari at all. This may just
   be a browser issue with all tinymce/webkit browsers and not your plugin specifically.
 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740107)
 * I know… it’s been the biggest thorn in my side throughout this development… and
   here’s why… (get ready for a rant)…
 * The tinymce software is developed by “Spocke” over at [MoxieCode](http://www.tinymce.com/).
   It’s an amazing editor… and by far my number one choice of content editors. It
   works great as a standalone in pretty much any content management platform. Plus,
   he has made it easy to add custom content and plguins to the source… and here
   inlies the problem.
 * Now, this is what has made Ultimate Tinymce so successful.. is this ability to
   modify the core and manipulate the editor. So, we have ALLLL these plugins which
   you can add to the tinymce to make it function differently.
 * Now, all these various plugins are written by all kinds of various coders. There
   are some “standards” to follow… but you can be a pretty crappy coder and still“
   pull off” an addon.
 * So, we have all these addons (written by all these different people)… all working
   together in a single install. I’m sure you can do the math 😉
 * MY job: go through all these plugins and first; get them to work as best I can
   with WP, and second; try to get them to perform similarly across various browsers.
 * (*sigh*)… okay.
 * Now, to your response 😉
 * The first notice is my fault. I apparently need to adjust the code for how that
   particular stylesheet is loaded.
 * The other notices will certainly be of use.
 * I’ll look into this later tonight.. and see what I can do.
 * Thank you for your very informative response!!
 *  [JsonB123](https://wordpress.org/support/users/jsonb123/)
 * (@jsonb123)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740108)
 * I completely understand! With all of the moving parts and other 3rd party tools
   it’s gotta be a headache getting everything working together perfectly…along 
   with the obnoxious variations between browsers and even platforms/browsers.
 * I’m glad my response could maybe help at least a little bit! I was doing a little
   digging on tinymce and webkit and noticed that it’s definitely an issue in general
   with tinymce and not your plugin specifically. Some stuff I’ve come across also
   points to how webkit loads javascript differently with the onload event and some
   other things I just glanced over…basically it just works differently on webkit(
   differently = worse in this case).
 * Maybe if there was a way to put the image mapping interface into the “edit” button
   popup that appears when you click the image in the editor ( it shows next to 
   the “delete” button). This has the “advanced” tab to resize it and give classes,
   etc to the image… but maybe an extra tab could be added for image mapping? Just
   a thought since this is how you resize for webkit since the dotted line never
   appears in the browser for live resizing…
 * That’s probably an entirely different route than the tinymce editor plugin though.
 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740109)
 * > (differently = worse in this case)
 * lmao… yup.
 * Yeah, I think if we did that it would still have the problem though. It has to
   do with how the content is arranged in the DOM; parsed; and spit back out into
   the editor. “Where” this button originates is inconsequential.
 * The typical workaround is to add a method in the js file used on the plugin. 
   But you must first; find the DOM problem, second; write an “if else” statement
   to check the browser, and third; pray 😉
 * I did notice this script in the popup.html file where the notices are being generated
   from:
 *     ```
       <script type="text/javascript">
       function delayedLoad() {
       	//alert(tinymce.isWebKit);
       	if (tinymce.isIE || tinymce.isWebKit) {
       		tinyMCEPopup.onInit.add(init);
       	}
       	else {
       		tinyMCEPopup.onInit.add(init());
       	}
       }
       </script>
       ```
   
 * Soooooo…. I think that’s a good place for me to start 😉
 *  [JsonB123](https://wordpress.org/support/users/jsonb123/)
 * (@jsonb123)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740110)
 * Alright, now I’m really confused because removing the if/else statement in that
   code chunk you posted above fixes the problem. E.g.:
 *     ```
       function delayedLoad() {
       	//alert(tinymce.isWebKit);
       	//if (tinymce.isIE || tinymce.isWebKit) {
       	//	tinyMCEPopup.onInit.add(init);
       	//}
       	//else {
       		tinyMCEPopup.onInit.add(init());
       	//}
       }
       ```
   
 * So, what the heck was the point of singling IE or Webkit out? I haven’t tested
   on IE yet but now the WebKit browsers work absolutely FINE. On top of that, notice
   that the init function called in the test for webkit/IE doesn’t have the ending()
   in it. Just put those in and it works fine as well, since it’s really just calling
   the same function regardless of the test.
 * So, what was the original purpose of this? Is it just code that was forgotten
   to be removed? Not sure, but it shouldn’t be in there if you want Webkit to work
   with this image map button : )
 * So, in conclusion… I’m replacing that function with:
 *     ```
       function delayedLoad() {
       tinyMCEPopup.onInit.add(init());
       }
       ```
   
 *  [JsonB123](https://wordpress.org/support/users/jsonb123/)
 * (@jsonb123)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740111)
 * In the essence of maintaining the good practice of not editing core files or 
   plugins for that matter, I’m trying to find a good way to override this specific
   JavaScript function in my theme’s files… though I’m not sure what to do to actually
   override it or if that is even possible? Any suggestions here?
 * Thanks again!
 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740112)
 * Okay… I don’t mind making this adjustment in the plguins core files. But, I would
   like to test it first in all other major browsers and see if it may open “pandora’s
   box”.
 * [@jsonb123](https://wordpress.org/support/users/jsonb123/),
 * Man, I cannot thank you enough for helping!! I knew this was the problem area…
   but honestly haven’t had time to get back into troubleshooting it since I posted
   my last comment above.
 * So, if you don’t mind testing your changes on other browsers.. and report back
   here… I’ll be happy to add the changes to the core files.
 *  [JsonB123](https://wordpress.org/support/users/jsonb123/)
 * (@jsonb123)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740113)
 * Certainly; I will do it probably early tomorrow morning or later tonight. I’ll
   post back here when I’ve tested the Windows browsers (IE 7-9 and FF, Safari, 
   Chrome and Opera).
 * Cheers!
 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740114)
 * You da man!!
 * Here, send me an email using my contact form:
    [http://joshlobe.com/contact-me/](http://joshlobe.com/contact-me/)
 * (When you’re ready)
 *  Plugin Author [Josh](https://wordpress.org/support/users/josh401/)
 * (@josh401)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740115)
 * Okay… **JsonB123** worked it out for us. It should be working in all major browsers
   EXCEPT Internet Explorer (shocker there).
 * It will be updated in the next version (3.6)

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘[Plugin: Ultimate TinyMCE] Image map not working’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/ultimate-tinymce.svg)
 * [Ultimate TinyMCE](https://wordpress.org/plugins/ultimate-tinymce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ultimate-tinymce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ultimate-tinymce/)
 * [Active Topics](https://wordpress.org/support/plugin/ultimate-tinymce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ultimate-tinymce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ultimate-tinymce/reviews/)

 * 15 replies
 * 3 participants
 * Last reply from: [Josh](https://wordpress.org/support/users/josh401/)
 * Last activity: [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-ultimate-tinymce-image-map-not-working/#post-2740115)
 * Status: resolved