Reply To: Add new repeater row on front-end form with Javascript

• bkjproductions

• June 20, 2018 at 1:43 am

Hmm, the wysiwyg editor is really hard to grab. To your code I’ve added the following, as the above method of getting the ID of the wysiwyg did not work, and apparently, when the wysiwyg is there, the textarea is not (and vice-versa):

	var $fields = $el.find('.acf-field').each(function(index, element) {
		console.log('---');
		var $type = $(element).data('type');
		if ($type == 'group') {return;}
		console.log('type:' + $type);
		var $key = $(element).data('key');
		var $val = $('input[name*=' +$key ).val();
		if ($type == 'wysiwyg') {
			console.log('looking for wysiwyg');
			// does not work:
			// var $id = $('[data-key="' + $key + '"].acf-input textarea').attr('id');
			var $id = $(element).find('.acf-input div').attr('id');
//something similar; we have to trim the -wrap suffic and the wp- prefix:
			$id = $id.replace('-wrap','');
			$id = $id.replace('wp-acf','acf');
			console.log('id' + $id);
			$val = find_editor($id, 'get', '');
			if ($val == undefined) {
				console.log('no wysiwyg visible, look for textarea');
				$val = $('#' + $id).val();
			}
		}
		console.log($key);
		console.log($val);
	});

and then I added a function for get/set of the Tiny editor:

function find_editor($id, action, value) {
	$editor = false;
	for (i=0; i<tinyMCE.editors.length; i++) {
		console.log(tinyMCE.editors[i].id);
		if ($id == tinyMCE.editors[i].id) {
		// found the right one, set and stop
		$editor = tinyMCE.editors[i];
		break;
		}
	}
	console.log($editor);
	if (action == 'set') {
		if ($editor) {
			// this is a tinyMCE function call
			$editor.setContent("some value");
		}
	}
	
	if (action == 'get') {
		if ($editor) {
			// this is a tinyMCE function call
			return $editor.getContent();
		}
	}
}

So, this is beginning to work. I am not dealing with other inputs such as checkboxes yet.