Support » Plugin: Ultimate TinyMCE » [Plugin: Ultimate TinyMCE] Image map not working

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author Josh

    (@josh401)

    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

    (@fredgorski)

    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

    (@josh401)

    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.

    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

    (@josh401)

    Okay… do you receive any messages or notices from the webkit browsers?

    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 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

    (@josh401)

    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. 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!!

    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

    (@josh401)

    (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 😉

    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());
    }

    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

    (@josh401)

    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,

    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.

    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

    (@josh401)

    You da man!!

    Here, send me an email using my contact form:
    http://joshlobe.com/contact-me/

    (When you’re ready)

    Plugin Author Josh

    (@josh401)

    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.