Больше не могу редактировать виджеты в редакторе WYSIWYG

8

В последнее время редактирование виджетов в редакторе WYSIWYG больше не работает.

Консоль браузера показывает следующую ошибку при нажатии на виджет:

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)

И появляется всплывающее окно для создания нового виджета вместо того, чтобы редактировать существующий виджет.

Я обнаружил поведение на разных версиях Magento CE 1.x и EE 1.x в Chrome, независимо от ОС. Может ли это быть связано с недавним патчем безопасности SUPEE-9767?

— Фабиан Шменглер
источник

10

По-видимому, это связано не с патчем, а с последним обновлением Chrome ( Chrome 58 ), которое появилось в то же время. TinyMCE использует устаревшие функции, которые были удалены в этой версии.

Также затронуты Magento 2.0 и 2.1 (см. Https://github.com/magento/magento2/issues/9518. ).

Кажется, это проблема с изображениями в целом, вот связанная проблема в проекте TinyMCE: https://github.com/tinymce/tinymce/issues/3611 TinyMCE 4.6 решает проблему.

Теперь у вас есть следующие варианты:

замените TinyMCE в комплекте с версией 4.6 или новее
дождитесь, пока Magento выпустит патч, обновляющий TinyMCE, и затем используйте другие браузеры (в настоящее время проблема только в Chrome) и надеемся, что они не удалят устаревшие функции в ближайшее время.

— Фабиан Шменглер
источник

Спасибо за подробное исследование, мне было лень об этом ^^

— Рафаэль в Digital

3

Быстрое исправление, которое я применил, переопределило JS-файл tiny_mce собственной исправленной версией.

        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') {

Для ленивого взлома. Выделите изображение курсором (как будто вы выбираете текст). После того, как выделено, это кликабельно.

— TylersSN
источник

2

Спасибо, TylerSN

В моем случае код, который нужно было удалить, выглядел так:

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

Обратите внимание: это был оригинальный релиз tiny_mce (v3.5.4, 2011-09-06), а не услуга Magento . Однако я столкнулся с этим вопросом при поиске Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1. at Editor.<anonymous>и хотел добавить решение для справки других людей. Надеюсь, что немного "не по теме" может быть оправдано в этом случае.

— Мартин Рюгг
источник