Skip to content
This repository has been archived by the owner on Dec 16, 2023. It is now read-only.

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

Open
kristaps-ancans opened this issue Oct 31, 2017 · 9 comments

Comments

@kristaps-ancans
Copy link

kristaps-ancans commented Oct 31, 2017

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
Copy link
Author

kristaps-ancans commented Oct 31, 2017

The problem is here ->

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',false,false,window);
window.dispatchEvent(loadEvent);
}

TinyMCE hooks are not correctly initialized.

@Lenny4
Copy link

Lenny4 commented Nov 27, 2017

Did you solve the problem ? How ?

@kristaps-ancans
Copy link
Author

kristaps-ancans commented Nov 28, 2017

@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
Copy link

BartzikWebdesign commented Dec 31, 2017

@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
Copy link
Author

@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
Copy link

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

@BartzikWebdesign
Copy link

Maybe @elliotcondon can help as author of acf pro itselve

@CanCman
Copy link

CanCman commented Jul 18, 2018

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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants