New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

selecting image on Chrome 58 bug (won't select image) #3611

Closed
bradleypulaski opened this Issue Apr 28, 2017 · 35 comments

Comments

Projects
None yet
@bradleypulaski

bradleypulaski commented Apr 28, 2017

Console

wp-tinymce.php:9 Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1.
at N. (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:9:19886)
at t.r [as fire] (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:8:9493)
at N.fire (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:9:26870)
at f.i (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:9:27935)
at i (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:3:5288)
at HTMLHtmlElement.m (/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4104-20140822:3:5628)

@teells

This comment has been minimized.

teells commented Apr 28, 2017

Which version of tinymce are you using? I am currently experiencing the same issues using tinymce v4.4.1 with Google Chrome v58.

@bradleypulaski

This comment has been minimized.

bradleypulaski commented Apr 29, 2017

@donShakespeare

This comment has been minimized.

donShakespeare commented Apr 29, 2017

I am using whatever comes standard with Wordpress 4.0.1

LOL, not very helpful!

Here may be the version of Wordpress TinyMCE- outdated as usual :(
Version 4.1.3 - July 29, 2014 (https://www.tinymce.com/docs/changelog/#version413-july292014)

See also, https://codex.wordpress.org/TinyMCE#Change_Log
image

Compare with official TinyMCE CDN
https://www.tinymce.com/docs/changelog/#version457-april252017
Version 4.5.7 - April 25, 2017

All this said, I have not encountered this issue yet (happy CDN user)

@bradleypulaski

This comment has been minimized.

bradleypulaski commented Apr 29, 2017

@jhorowitz-firedrum

This comment has been minimized.

jhorowitz-firedrum commented May 1, 2017

d6cbf39

Looks like this might be fixed in master?

@z3nix

This comment has been minimized.

z3nix commented May 2, 2017

So how do I fix this, do I just overwrite the files with the latest from this repository? I don't want to break my site.

@teells

This comment has been minimized.

teells commented May 2, 2017

The issue was fixed in v4.5.6 on March 30th https://www.tinymce.com/docs/changelog/#version456-march302017

Commit fixing the issue: 518a3bf

I'm not sure how to go about updating it in wordpress. But updating the tinymce package in my project fixed the issue. Verified working after updating to 4.5.7 on Google Chrome v58 and Firefox v53.

@donShakespeare

This comment has been minimized.

donShakespeare commented May 2, 2017

@z3nix tell Wordpress or your developer to update TinyMCE asap. I don't know why people are not using the CDN version in their integrations.

@JessePreiner

This comment has been minimized.

JessePreiner commented May 4, 2017

What is the process for switching to a CDN for TinyMCE rather than having WordPress call it directly?

Edit: Although our sites are 4.2.13, cloning the WordPress master branch and copying the wp-includes/js/tinymce folder over fixed it for us.

@NickStees

This comment has been minimized.

NickStees commented May 5, 2017

This stopped working in one of my Drupal sites and Googling lead me here. Thanks, @teells for links to the changelog!

@Taygair

This comment has been minimized.

Taygair commented May 5, 2017

Hello
I'm experiencing the exact same error on clicking on images in Chrome Version 58.0.3029.96 (64-bit) and tinyMCE 4.5.7. This all on Mac (Sierra). Firefox and Safari have no problem with it (no error message). I am showing tinyMCE editor directly in browser (no Drupal, no Wordpress).

Chrome output:
Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1.
at B. (http://localhost/myproject/tinymce/tinymce.min.js:10:7658)
at t.i [as fire] (http://localhost/myproject/tinymce/tinymce.min.js:8:14427)
at B.fire (http://localhost/myproject/tinymce/tinymce.min.js:8:16322)
at p.s (http://localhost/myproject/tinymce/tinymce.min.js:10:15645)
at e (http://localhost/myproject/tinymce/tinymce.min.js:2:12478)
at HTMLHtmlElement.m (http://localhost/myproject/tinymce/tinymce.min.js:2:12818)

In also happens on clicking on media image previews.

@spocke

This comment has been minimized.

Member

spocke commented May 5, 2017

What version of tinymce are you using. We fixed this issue in the latest releases of 4.5 and 4.6.

@spocke

This comment has been minimized.

Member

spocke commented May 8, 2017

Can't reproduce this on 4.5.7 or 4.6.0 so need more info how to reproduce it. Possible provide a fiddle.

@Taygair

This comment has been minimized.

Taygair commented May 8, 2017

Do you have a Mac with Chrome on it? I just donwloaded/tested with tinyMCE 4.6.0, same error on clicking an inserted image:
Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1.
at B. (http://localhost/myproject/tinymce/tinymce.min.js:10:7658)
at t.i [as fire] (http://localhost/myproject/tinymce/tinymce.min.js:8:14427)
at B.fire (http://localhost/myproject/tinymce/tinymce.min.js:8:16322)
at p.s (http://localhost/myproject/tinymce/tinymce.min.js:10:15645)
at e (http://localhost/myproject/tinymce/tinymce.min.js:2:12478)
at HTMLHtmlElement.m (http://localhost/myproject/tinymce/tinymce.min.js:2:12818)

@fyrkant

This comment has been minimized.

Contributor

fyrkant commented May 9, 2017

I can't reproduce this on Chrome on mac. On the page where you are having the issue, can you open up the console and write tinymce.minorVersion just to make sure you aren't using a cached old version of TinyMCE? It should return "6.0" like this:

screen shot 2017-05-09 at 11 46 38

@z3nix

This comment has been minimized.

z3nix commented May 9, 2017

@donShakespeare you're telling people on github to go talk to the IT guy, and this after telling other people their words aren't very helpful. The irony is a sharper tool than you.

@ManyouRisms your method worked for me, running latest version of Wordpress and copying over the tinyMCE folder from the master Wordpress branch.

@Taygair

This comment has been minimized.

Taygair commented May 9, 2017

Sorry for delay... Thats weird: I don't get any error on f.e. using your tinyMCE with Chrome but I got the error on my local machine (tinyMCE with Chrome). I'm not sure now if I did some missconfiguration of tinyMCE or so. I have to investigate it in detail.

@donShakespeare

This comment has been minimized.

donShakespeare commented May 10, 2017

@z3nix perhaps you mistook my message. My point is for all and every user (IT or non techy or expert) to go query/inform WP that they are running outdated wares. It might be simple as logging an issue on their forum/github page with persistent backup of other users.

I have fought hard for my own CMS to adopt CDN v4.6+ (from v3)

It is not irony if you consider carefully; the more users inform WP, the more they are likely to integrate TinyMCE better.

The one major reason people hate TinyMCE is that the version that they were forced to use was uber-outdated (and of course they did not know it; and then they switched to Redactor or some other shiny RTE)

It is not convenient for users to manually update their CMS's TinyMCE core, as these changes might disappear when the CMS updates itself.

Cheers

@Taygair

This comment has been minimized.

Taygair commented May 10, 2017

Concerning the problem I mentioned above: Solved! Sorry, my bad: I probably had an older version of tinymce cached in Chrome. After empty cache all worked fine and no more errors! Sorry!

@rinogo

This comment has been minimized.

rinogo commented May 10, 2017

Our codebase is highly customized, so we're stuck with Tiny MCE 3.x for now. Specifically, we're on version 3.5.9.

The bug in this version of Tiny MCE is on line 304 of Quirks.js.

The codebase for Tiny MCE has changed quite a bit since 3.5.9, so the fix provided in this thread can't be directly used.

This Chromium Issue as well as the error message itself ("There is no child at offset 1") suggest that the core problem with this code is that an out-of-bound index is used. So, I simply tried changing the 0 index to 1, and it seems to work just fine. (UPDATE: It worked fine in Chrome 58, but not in Safari 10.1. So, I've modified my patch to work for both browsers)

Here's the fix in context

...and for others on the 3.7 branch of Wordpress, here's the fix in context of the Wordpress minified file.

I'm not familiar with this API at all - the change seems to work fine in my testing, but it seems too simple. What am I missing? What regression would I possibly introduce with this change? Or is 0 truly the correct value to be using?

@Taeon

This comment has been minimized.

Taeon commented May 11, 2017

@rinogo -- you're a lifesaver. I too am stuck with an older version of TinyMCE, and your fix (appears to have) solved the problem. I owe you a beer.

@NickStees

This comment has been minimized.

NickStees commented May 11, 2017

@rinogo @Taeon Github absolutely needs a Beer emoji!

@ckihneman

This comment has been minimized.

ckihneman commented May 11, 2017

Confirmed this is fixed on latest version of wordpress (4.7.4).

@mKowalski256

This comment has been minimized.

mKowalski256 commented May 12, 2017

@rinogo thanks for the fix, but just to note that it doesn't completely solve the issue for me with TinyMCE 4.4.3. For example replacing the image with 'mceInsertContent' doesn't seem to work, also deleting an image is a bit erratic. Still, the fix improves behaviour a lot.

@rinogo

This comment has been minimized.

rinogo commented May 12, 2017

@mKowalski256 Thanks for the heads-up! If you devise a better fix, I'm sure we'd all be ecstatic! :) (And by the way, if you're on TinyMCE 4.x, you might have better luck with the "original" fix in this thread, nearer the top. Have you already tried that one?)

@Afraithe

This comment has been minimized.

Member

Afraithe commented May 12, 2017

Really need to upgrade if your stuck on 3.x, or you will continue to have these issues, just the last few months the Browsers vendors have been very active, screwing things up. And if your on ANY 4.x version, you should have no problems upgrading to 4.6.x. I am now closing this as this is fixed in later versions.

@Afraithe Afraithe closed this May 12, 2017

@mKowalski256

This comment has been minimized.

mKowalski256 commented May 12, 2017

@rinogo stay assured that I tried a few simple things, but nothing worked as good as your fix :) And yes, I'm looking on 4.5.7 and this issue indeed seems to be solved there.

@EasyProWebTools

This comment has been minimized.

EasyProWebTools commented May 26, 2017

For version 3 of TinyMCE the simplest fix is to change
selection.getSel().setBaseAndExtent(e, 0, e, 1);
to
selection.select(e);
This works on all browsers and makes Chrome behave the way it did before this crappy update.

@rinogo

This comment has been minimized.

rinogo commented Jun 5, 2017

@EasyProWebTools - I was intrigued by your fix, so I gave it a shot in our code! It looks like it functions nearly identically to the slightly more complex version I posted above. The only difference is that in your shorter version, in Chrome, the image is "highlighted" in blue when it is clicked on as such:

image
(She's laughing not because she loves veggies. She's laughing at how annoying this issue is for us... Some people like to watch the world burn... ;) )

Regardless, the slightly longer version I posted doesn't seem to show this blue "highlight" in Chrome.

Note that it seems that in Safari, the image appears to be highlighted in blue in both of our versions. (Not sure how to "fix" this in Safari) The image doesn't appear to be highlighted in blue in Firefox in either of our versions.

So, long story short - from my (admittedly limited) testing, it seems that the two solutions are nearly identical, with the ever-so-slight advantage going to the version I posted above. Just thought you (and others) might like to know!

If there's some other functionality/differences I'm missing, I'd love to be enlightened!

@donShakespeare

This comment has been minimized.

donShakespeare commented Jun 6, 2017

(She's laughing not because she loves veggies. She's laughing at how annoying this issue is for us... Some people like to watch the world burn... ;) )

hahahahahahaha

@Taygair

This comment has been minimized.

Taygair commented Jun 6, 2017

@rinogo I just tried that out in Firefox and can confirm this behaviour (see attachment). Its not nice but its not an issue that users can't proceed working.
safari
firefox

@ghapsis

This comment has been minimized.

ghapsis commented Jul 14, 2017

For the WP version 4.2.8 (wp 4.4.10) the fix provided by @EasyProWebTools also works with a little adjustment:
J.getSel().setBaseAndExtent(t,0,t,1)
J.select(t)

@alsoicode alsoicode referenced this issue Aug 20, 2017

Closed

Update TinyMCE to version 4.6.5 #4422

0 of 1 task complete

daverett pushed a commit to SHOREdevelopers/COVE that referenced this issue Sep 27, 2017

integratedforpublishers pushed a commit to integratedfordevelopers/integrated-bundles that referenced this issue Oct 17, 2017

integratedforpublishers pushed a commit to integratedfordevelopers/integrated-bundles that referenced this issue Oct 17, 2017

@AndrewLang

This comment has been minimized.

AndrewLang commented Jan 2, 2018

I have this issue too with TinyMce 4.7.4 hosted in electron app version 1.7.10, seems electron is using chrominum 58. Images in Tinymce editor cannot be selected and there is no exception log in the console.

@peresleguine

This comment has been minimized.

peresleguine commented Mar 5, 2018

I was able to solve this for TinyMCE 4.2.3 (Rails integration). Maybe this could work for other versions.

@mpatzekov

This comment has been minimized.

mpatzekov commented Mar 14, 2018

@EasyProWebTools and @ghapsis - the fix you provided actually solved my issue. I applied the fix on TinyMCE 4.1.3 (the installation is Wordress 4.1.1) and it worked. What I've changed is these two files:

  • /wp-includes/js/tinymce/tinymce.min.js
  • /wp-includes/js/tinymce/wp-tinymce.js.gz

The line that has been changes is this:

  • OLD - j.getSel().setBaseAndExtent(t,0,t,1)
  • REPLACED - j.select(t)

And it worked. Thanks to all!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment