U4-9817 - TinyMCE throws exception selecting image in Chrome 58

Created by LAD team 27 Apr 2017, 18:10:13 Updated by Rody van Sambeek 19 Jun 2017, 13:36:23

What did you do? Insert an image into a TinyMCE rich text editor and try to select the inserted image using Chrome 58.

What did you expect to happen? The image should have been selected with anchors available for resize, and center etc should apply if used from the toolbar.

What actually happened? TinyMCE threw an exception upon clicking the image:

tinymce.min.js?umb__rnd=7.4.3.0:10 Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1. at N. (https://.../umbraco/lib/tinymce/tinymce.min.js?umb__rnd=7.4.3.0:10:28448) at t.i [as fire] (https://.../umbraco/lib/tinymce/tinymce.min.js?umb__rnd=7.4.3.0:9:15082) at N.fire (https://.../umbraco/lib/tinymce/tinymce.min.js?umb__rnd=7.4.3.0:11:3745) at f.i (https://.../umbraco/lib/tinymce/tinymce.min.js?umb__rnd=7.4.3.0:11:4810) at i (https://.../umbraco/lib/tinymce/tinymce.min.js?umb__rnd=7.4.3.0:2:5288) at HTMLHtmlElement.m (https://.../umbraco/lib/tinymce/tinymce.min.js?umb__rnd=7.4.3.0:2:5628)

This appears to have been fixed in TinyMCE v4.5.4: https://www.tinymce.com/docs/changelog/#version454-february232017

Comments

LAD team 02 May 2017, 18:37:02

As an added note, it looks like the new release of Umbraco (7.6) has the latest TinyMCE. Unfortunately, it's quite an undertaking for us to update the core Umbraco distribution in our environment. In the meantime, I've added the TinyMCE nuget package and have a build and publish step to copy the nuget version of /scripts/tinymce/tinymce.min.js over the /umbraco/lib/tinymce/tinymce.min.js


Arjan Woldring 24 May 2017, 12:18:37

Hi @LTSB-Applications-Development@legis.wisconsin.gov I do have the same issue. We are on 7.5.14 and not ready for 7.6.x. I would like to know if you encountered any problems replacing the tinymce.min.js that you are aware of?

Thanks for the info!


LAD team 24 May 2017, 14:07:46

There was one issue I had encountered: In Theme.Core/umbraco/lib/tinymce/plugins/umbracolink/plugin.min.js: //Create a json obj used to create the attributes for the tag function createElemAttributes() { var a = { href: href, title: data.name, target: data.target ? data.target : null, rel: data.rel ? data.rel : null }; if (hasUdi) { a["data-udi"] = data.udi; } else if (data.id) { a["data-id"] = data.id; }

  • return a;
    

}

Note the line with a '+', this was missing and was preventing the umbracolink plugin from working correctly.


Arjan Woldring 24 May 2017, 14:24:55

Thank you!! That will help a lot!


Arjan Woldring 24 May 2017, 15:27:59

Hi, the only thing what I did is copy the umbraco/lib/tinymce/tinymce.min.js from Umbraco 7.6.1 to my 7.5.14 installation and it looks like everything is working.

The above createElemAttributes function is not yet available in 7.5.14. But adding links seems to work in RTE. So guess this is not necessary or am I maybe overlooking something?


LAD team 24 May 2017, 16:27:40

I had some issues with copying just the minified script and also using the status bar, so I ended up taking the 7.6 plugins etc as well.


Arjan Woldring 26 May 2017, 07:52:58

Got ya. Indeed the statusbar is not showing when leaving with unsaved changes. Maybe I should include the 7.6 plugins as you've mentioned...


LAD team 30 May 2017, 14:38:57

FYI: It looks like the umbracoLink plugin was removed in 7.6, see the following: https://our.umbraco.org/documentation/Getting-Started/Setup/Upgrading/version-specific http://issues.umbraco.org/issue/U4-9724 http://issues.umbraco.org/issue/U4-9969


Arjan Woldring 01 Jun 2017, 20:16:02

Thanks. That is useful information. In the next days I'll try to work on a good solution.


Rody van Sambeek 06 Jun 2017, 12:28:04

This is also a problem on Umbraco v6. We have several sites on v6 which cannot be updated to v7 at this time. Is there a possibility to use a quickfix for v6 also? I tried searching for the code Lad Team mentioned, but it wasn't available in v6.


Arjan Woldring 06 Jun 2017, 12:35:22

I ended up only replacing the /umbraco/lib/tinymce/tinymce.min.js from Umbraco 7.6.1 and copied it over to my 7.5.14 installation. And it is working fine. Maybe you could do the same for version 6.


Rody van Sambeek 12 Jun 2017, 19:20:45

@Mordaunt Unfortunately there is no tinymce.min.js in version 6. I think the implementation is a bit different there. I tried creating a quick-fix in the javascript, but couldn't fix the issue. There must be more customers who still use Umbraco 6 in (legacy) projects with this issue?


Rody van Sambeek 19 Jun 2017, 13:36:23

Googling around the Tinymce issues and forums found me this quick fix for TinyMce v3 (Umbraco 6.x): https://github.com/tinymce/tinymce/issues/3611 Ans especially this bit: https://github.com/rinogo/tinymce/blob/fix-setBaseAndExtent/jscripts/tiny_mce/classes/util/Quirks.js#L304-L308

You can change that in umbraco_client/tinymce3/tiny_mce_src.js


Priority: Normal

Type: Bug

State: Submitted

Assignee:

Difficulty: Normal

Category: Editor

Backwards Compatible: True

Fix Submitted:

Affected versions: 6.2.5, 6.2.6, 7.5.13, 7.5.14

Due in version:

Sprint:

Story Points:

Cycle: