Cannot edit widgets in WYSIWYG editor anymore

Question

Recently, editing widgets in the WYSIWYG editor does not work anymore.

The browser console shows the following error when I click on a widget:

Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1.
    at Editor.<anonymous> (http://example.com/js/tiny_mce/tiny_mce.js:1:15327)
    at Dispatcher.dispatch (http://example.com/js/tiny_mce/tiny_mce.js:1:6000)
    at DOMUtils.c (http://example.com/js/tiny_mce/tiny_mce.js:1:184650)
    at j (http://example.com/js/tiny_mce/tiny_mce.js:1:58627)
    at HTMLDocument.y (http://example.com/js/tiny_mce/tiny_mce.js:1:58785)
(anonymous) @ tiny_mce.js:1
dispatch @ tiny_mce.js:1
c @ tiny_mce.js:1
j @ tiny_mce.js:1
y @ tiny_mce.js:1
tiny_mce.js:1 Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1.
    at Editor.<anonymous> (http://example.com/js/tiny_mce/tiny_mce.js:1:15327)
    at Dispatcher.dispatch (http://example.com/js/tiny_mce/tiny_mce.js:1:6000)
    at DOMUtils.c (http://example.com/js/tiny_mce/tiny_mce.js:1:184650)
    at j (http://example.com/js/tiny_mce/tiny_mce.js:1:58627)
    at HTMLDocument.y (http://example.com/js/tiny_mce/tiny_mce.js:1:58785)

And the popup to create a new widget appears, instead of the one to edit the existing widget.

I found the behavior on different versions of Magento CE 1.x and EE 1.x, in Chrome, regardless of the OS. Can it be related to the recent security patch SUPEE-9767?

Answer 1

Apparently it is not related to the patch, but to the latest Chrome update (Chrome 58) which got rolled out around the same time. TinyMCE uses deprecated features that were removed in that version.

Magento 2.0 and 2.1 are affected as well (see: https://github.com/magento/magento2/issues/9518)

It seems to be a problem with images in general, here's a related issue in the TinyMCE project: https://github.com/tinymce/tinymce/issues/3611 TinyMCE 4.6 fixes the issue.

Now you have the following options:

• replace the bundled TinyMCE version with 4.6 or newer
• wait until Magento releases a patch that updates TinyMCE and until then use other browsers (currently only Chrome seems to be an issue) and hope that they don't remove the deprecated features that soon.

Answer 2

A quick fix I applied was overriding the tiny_mce JS file with my own patched version.

        editor.onClick.add(function(editor, e) {
            e = e.target;

-           // Workaround for bug, http://bugs.webkit.org/show_bug.cgi?id=12250
-           // WebKit can't even do simple things like selecting an image
-           // Needs tobe the setBaseAndExtend or it will fail to select floated images
            if (/^(IMG|HR)$/.test(e.nodeName)) {
-               selection.getSel().setBaseAndExtent(e, 0, e, 1);
+               /** Removed webkit bug fix - it breaks in Chrome 58 */
+                selection.select(e);
            }

            if (e.nodeName == 'A' && dom.hasClass(e, 'mceItemAnchor') {

For a lazy hack. Highlight the image with your cursor (as if you are selecting text). Once highlighted, it is clickable.

Answer 3

Thanks, TylerSN

In my case, the code that had to be removed looked like this:

if (tinymce.isWebKit && e.nodeName == 'IMG')
    t.selection.getSel().setBaseAndExtent(e, 0, e, 1);

Please note: It was an original tiny_mce release (v3.5.4, 2011-09-06), not a Magento favour. However, I came across this question while searching for Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1. at Editor.<anonymous> and wanted to add the solution for other people's reference. Hope the slightly "off-topic" can be excused in this circumstance.