Metaboxes: Trigger tinymce save before saving metaboxes

[youknowriad]

closes #7176

The idea is to fix saving wp_editors used in metaboxes.

Testing instructions

• Install ACF free from the repository
• Add a WYSIWYG field
• Try editing and saving the field
• Reload the page, it should save properly

[danielbachhuber]

@youknowriad Your testing instructions also work for me on the master branch:

Did your testing instructions fail for you on the master branch?

The change itself seems logically reasonable; just want to confirm the change fixes a real test case.

[youknowriad]

@danielbachhuber Which version of ACF are you using?

[youknowriad]

I'm using the one in the repository, I suspect they did something on their end for the 5.* version

[danielbachhuber]

@youknowriad I installed 4.4.12 from the WordPress.org repository.

[youknowriad]

🤷‍♂️ I'd have sworn I tested without my changes and it broke :P but anyway maybe we can ask the people who asked for this in the issue

Edit: you already did :)

[danielbachhuber]

@youknowriad This pull request fails for me using the test metabox in #7176 (comment)

However, if I call window.tinyMCE.triggerSave() directly in the console, the text in the TinyMCE field is saved correctly.

[youknowriad]

Thanks for the snippet, I'll give it a try when I have some time.

[youknowriad]

It's weird because I can't break it with or without the PR. Maybe it's browser specific, but I tried in both Firefox and Chrome.

[danielbachhuber]

Maybe it's browser specific, but I tried in both Firefox and Chrome.

Or maybe it's a race condition or some deeper bug?

[youknowriad]

I'm closing the PR for now and I think we should close the issue until we can break it consistently :P or maybe you can try a fix since you can reproduce

[danielbachhuber]

I think we should close the issue until we can break it consistently :P or maybe you can try a fix since you can reproduce

I'd like to keep the issue open because closing the issue doesn't make the problem go away. I don't have any ideas on what the fix might be though.

[ideadude]

I've dug into this a bit, but I feel a TinyMCE expert would have better luck figuring out the correct fix. I posted some notes on reproducing with our plugin that uses wp_editor in meta boxes below the edit post body in this related issue: #7176

Some notes:

• TinyMCE editors work by adding an iframe that shows the editor in all of it's HTML glory.
• There is also a textarea below the editor iframe that is initialized with the previously saved value for the meta box field.
• When the form is submitted, TinyMCE finds all of the editors and calls a getContent and/or setContent method to override the value of the textarea. I saw this while stepping through the console debugger, but only on the minimized version of TinyMCE, which is hard to follow.
• I believe that since Gutenberg isn't actually submitting the form, but instead using REACT/API to update the post this bit of TinyMCE code isn't triggering to update the textareas.
• One confusion is that at various places autosave methods are fired/triggered, but autosave excludes meta fields.
• The window.tinyMCE.triggerSave() or different variants isn't working for me to copy the editor content into the textareas.
• Something like this does work for me: jQuery('#mytextareaname').html(TinyMCE.get('mytextareaname').getContent());

TL;DR:
I think in the classic editor we are relying on something in TinyMCE that copies the editor content into the textareas that are actually posted to the server.

With Gutenberg, this never happens.

Once we figure out the best way to trigger TinyMCE to update all of the wp editor textareas (or write a new way), we should probably insert it into the bottom of this method in post.js: https://github.com/WordPress/WordPress/blob/bdbaccce379b9db3e8a1a6e5c7a0c6a91ae197bf/wp-admin/js/post.js#L334

I don't know where the equivalent of that file is in the Gutenberg plugin.

I hope this helps.

[ideadude]

Another note, it's very possible that certain plugins like Advanced Custom Fields have coded their own solutions for this, which is why the problem might have "gone away" in certain tests.

Ideally, if someone uses wp_editor in a meta box, it should get posted on save post without having to add additional JavaScript to fix this bug.

[azaozz]

Hmmm, tinymce.triggerSave() is the "proper way" to do this. It loops through the instance collection (tinymce.editors) and calls .save() on each.

There may be a problem where the "Text" editor tab is used and tinymce.triggerSave() is called. It would still overwrite any changes in the textarea with whatever is in the instance/iframe. To avoid that it'll need to do ! editor.isHidden() before the save.

[pbrocks]

@azaozz if I understand you correctly the only way for the metaboxes content to be saved is via js. Is there a snippet that you can point us to? This issue seems to involve only tinymce, ie the Visual tab. Content entered via the text editor tab will save.

[pbrocks]

@youknowriad This issue definitely still exists. @danielbachhuber I ran a test using your snippet for a metabox and was able to get TinyMCE Toolbar1 items to save, but if I removed your 'teeny' => true, so I could use Toolbar2, then things failed. However, the Gutenberg version was a Development copy with the snippet
if ( window.tinyMCE ) { window.tinyMCE.triggerSave(); }
from @davisshaver found here

gutenberg/edit-post/store/effects.js

Lines 68 to 70 in edefa5e

	if ( window.tinyMCE ) {
	window.tinyMCE.triggerSave();
	}

[davisshaver]

@pbrocks I agree this is still an issue. fwiw I moved away from the patched version and as a workaround I believe that the issue doesn't show up if you use the source rather than visual editor.

[pbrocks]

Actually just tested on an out of the box Gutenberg and had decent results with html and non-tinymce metabox window. Screencast here:

https://monosnap.com/file/ia9Jq03YKZDmiBQrl7x7R9yrwSYt2y

[pbrocks]

It appears that @azaozz has a point regarding the Text tab vs Visual tab. I was able to successfully use the editor and the full range of toolbars 1 and 2 in the metabox editor, as long as when I clicked save or update, I was on the text tab, ie seeing the html as text.

Screencast showing metabox editor saving html when viewed as text

[pbrocks]

Is there any issue with Tinymce being locaded twice?