Adding new row with WYSIWYG in repeater field loses content of all previous fields

[kristaps-ancans]

Wordpress: v.4.8.2

Plugins:

• ACF PRO v.5.6.4
• Advanced Custom Fields: qTranslate v.1.7.23 (Enable translation for Standard Field Types - checked)
• qTranslate-X v.3.4.6.8

Reproducing the bug:

• Create new custom field group
• Add repeater field
• Add repeater field group with one text field and one WYSIWYG field
• Attach the field group to the page
• Go to page and add couple rows with content filled in
• Save
• Add new row - content from previous WYSIWYG fields in rows disappears. Text field is not affected.

Clicking on button - Add row and checking the Network tab in Chrome Dev Tools, we can see that the content disappears as soon as the response is received from sent POST request.

Seems that TinyMCE editor is not correctly initialised with the same content after adding new row to the same repeater field.

P.S.: Disabling plugin - content loads correctly.

[kristaps-ancans]

The problem is here -> https://github.com/funkjedi/acf-qtranslate/blob/ed8026764c0d5effc50e16fecf23c7290ed659a9/assets/acf_5/qtranslatex.js#L70-L78

TinyMCE hooks are not correctly initialized.

[Lenny4]

Did you solve the problem ? How ?

[kristaps-ancans]

@Lenny4 replaced a bit of javascript. Not the perfect fix, but at least the content doesn't disappear and new repeater fields can be added without any problem.

if (jQuery(field).hasClass('wp-editor-area')) {
    // qTranslateConfig.qtx.addContentHooksTinyMCE();

    // We must manually trigger load event so that the
    // loadTinyMceHooks function which calls setEditorHooks is executed
    // var loadEvent = document.createEvent('UIEvents');
    // loadEvent.initEvent('load', true, false, window);
    // window.dispatchEvent(loadEvent);

    var evt = new Event("load", { "bubbles": true, "cancelable": false });
    field.dispatchEvent(evt);                
}

[BartzikWebdesign]

@kristaps-ancans do have an idea how to fix your code for enabling the qTranslate support on the new field in wysiwyg mode. It seems that the qTranslate buttons only affect to the new editor field if the editor is in text mode not in wysiwyg mode.

[kristaps-ancans]

@cyberian90 not really. It just doesn't work. Content disappears in WYSIWYG and in text mode. My provided javascript fix gets rid of the problem and it's again usable.

[BartzikWebdesign]

@kristaps-ancans pity, but maybe the plugin author (@funkjedi) still has an idea for the problem. thanks anyway for your quick response.

[BartzikWebdesign]

Maybe @elliotcondon can help as author of acf pro itselve

[CanCman]

Hi, i'm share my dirty hack. I use ACF wysiwyg with my delay initialization, because it too not worked. I update wysiwyg clicks on Visual button and translate with editor work fine. Or just click on button and all will work at once. I connect own js in admin page in function.php. Something like that

function admin_theme_script()
{
  wp_enqueue_script( 'admin-theme', get_stylesheet_directory_uri() . '/js/wp-admin.js' );
}
add_action('admin_enqueue_scripts', 'admin_theme_script');

Ajax request works after load and update page. Into js this

function eventSwitchTmce(wysiwyg) {
    var $wysiwyg = jQuery(wysiwyg).closest('.acf-field-qtranslate-wysiwyg');
    $wysiwyg.find(".switch-tmce").click();
    $wysiwyg.find(".acf-editor-toolbar").remove();
}

jQuery(document).ajaxSuccess(function() {
    var wysiwyg = jQuery(".acf-field-qtranslate-wysiwyg"),
            hiddenToolbar = wysiwyg.find(".mce-container");
    if (hiddenToolbar.length != wysiwyg.length) {
        wysiwyg.each(function() {
            var $this = jQuery(this),
                $editContainer = $this.find('.wp-editor-container'),
                isNotf = $editContainer.children('.acf-editor-toolbar').length,
                isHidTool = $this.find(".mce-container").length;
            if (isNotf == 0 && isHidTool == 0) {
                var blockNotification = "<div style='display: block; background: #f5f5f5; border-bottom: #dddddd solid 1px; color: #555d66; padding: 10px;' class='acf-editor-toolbar'>Click to initialize TinyMCE</div>"
                $editContainer
                    .prepend(blockNotification)
                    .one("click", function() {eventSwitchTmce(this)});
            } 
            else {
                if (isNotf > 0 && isHidTool == 0) {
                    if (typeof $editContainer.data('events') != "undefined") {
                        if (! "click" in $editContainer.data('events'))
                            $editContainer.one("click", function() {eventSwitchTmce(this)});
                    } else $editContainer.one("click", function() {eventSwitchTmce(this)});
                }
                else {
                    if (isNotf > 0 && isHidTool > 0)
                        $this.find(".acf-editor-toolbar").remove();
                }
            }
        })
    }
});

Maybу it is will help anyone. Thanks.

[carlitoselmago]

My dirty fix is just add at the begining of main.js $=jQuery;