Không thể chỉnh sửa các widget trong trình soạn thảo WYSIWYG nữa

Gần đây, các tiện ích chỉnh sửa trong trình soạn thảo WYSIWYG không hoạt động nữa.

Bảng điều khiển trình duyệt hiển thị lỗi sau khi tôi nhấp vào tiện ích:

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)

Và cửa sổ bật lên để tạo một tiện ích mới xuất hiện, thay vì một tiện ích để chỉnh sửa tiện ích hiện có.

Tôi đã tìm thấy hành vi trên các phiên bản khác nhau của Magento CE 1.x và EE 1.x, trong Chrome, bất kể HĐH. Nó có thể liên quan đến bản vá bảo mật gần đây SUPEE-9767 không?

Rõ ràng nó không liên quan đến bản vá, nhưng với bản cập nhật Chrome mới nhất ( Chrome 58 ) đã được tung ra cùng thời gian. TinyMCE sử dụng các tính năng không dùng nữa đã bị xóa trong phiên bản đó.

Magento 2.0 và 2.1 cũng bị ảnh hưởng (xem: https://github.com/magento/magento2/issues/9518 )

Đây có vẻ là một vấn đề với hình ảnh nói chung, đây là một vấn đề liên quan trong dự án TinyMCE: https://github.com/tinymce/tinymce/issues/3611 TinyMCE 4.6 khắc phục sự cố.

Bây giờ bạn có các tùy chọn sau:

• thay thế phiên bản TinyMCE đi kèm bằng 4.6 hoặc mới hơn
• đợi cho đến khi Magento phát hành bản vá cập nhật TinyMCE và sau đó sử dụng các trình duyệt khác (hiện tại chỉ có Chrome là một vấn đề) và hy vọng rằng họ sẽ không xóa các tính năng không dùng nữa.

Một sửa chữa nhanh mà tôi đã áp dụng là ghi đè tệp tin tiny_mce với phiên bản vá của riêng tôi.

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

Đối với một hack lười biếng. Làm nổi bật hình ảnh bằng con trỏ của bạn (như thể bạn đang chọn văn bản). Sau khi được tô sáng, nó có thể nhấp được.

Cảm ơn, TylerSN

Trong trường hợp của tôi, mã phải được loại bỏ trông như thế này:

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

Xin lưu ý: Đó là một bản phát hành tiny_mce ban đầu (v3.5.4, 2011-09-06), không phải là một ưu đãi Magento . Tuy nhiên, tôi đã gặp câu hỏi này trong khi tìm kiếm Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1. at Editor.<anonymous>và muốn thêm giải pháp cho người khác tham khảo. Hy vọng một chút "lạc đề" có thể được miễn trong trường hợp này.