Tidak dapat lagi mengedit widget di editor WYSIWYG

Baru-baru ini, mengedit widget di editor WYSIWYG tidak berfungsi lagi.

Konsol browser menunjukkan kesalahan berikut ketika saya mengklik 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)

Dan sembulan untuk membuat widget baru muncul, alih-alih yang mengedit widget yang ada.

Saya menemukan perilaku di berbagai versi Magento CE 1.x dan EE 1.x, di Chrome, terlepas dari OS. Bisakah itu terkait dengan patch keamanan SUPEE-9767 baru-baru ini?

Tampaknya itu tidak terkait dengan tambalan, tetapi dengan pembaruan Chrome terbaru ( Chrome 58 ) yang diluncurkan sekitar waktu yang sama. TinyMCE menggunakan fitur-fitur usang yang dihapus dalam versi itu.

Magento 2.0 dan 2.1 juga terpengaruh (lihat: https://github.com/magento/magento2/issues/9518 )

Tampaknya menjadi masalah dengan gambar secara umum, inilah masalah terkait dalam proyek TinyMCE: https://github.com/tinymce/tinymce/issues/3611 TinyMCE 4.6 memperbaiki masalah ini.

Sekarang Anda memiliki opsi berikut:

• ganti versi TinyMCE yang dibundel dengan 4.6 atau yang lebih baru
• tunggu hingga Magento merilis tambalan yang memperbarui TinyMCE dan sampai saat itu menggunakan peramban lain (saat ini hanya Chrome yang tampaknya menjadi masalah) dan berharap mereka tidak segera menghapus fitur yang sudah usang.

Perbaikan cepat yang saya terapkan adalah menimpa file JS tiny_mce dengan versi tambalan saya sendiri.

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

Untuk peretasan yang malas. Sorot gambar dengan kursor Anda (seolah-olah Anda memilih teks). Setelah disorot, itu dapat diklik.

Terima kasih, TylerSN

Dalam kasus saya, kode yang harus dihapus tampak seperti ini:

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

Harap dicatat: Ini adalah rilis tiny_mce asli (v3.5.4, 2011-09-06), bukan bantuan Magento . Namun, saya menemukan pertanyaan ini ketika mencari Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1. at Editor.<anonymous>dan ingin menambahkan solusi untuk referensi orang lain. Semoga sedikit "di luar topik" dapat dimaafkan dalam keadaan ini.