There is a flash of HTML when submitting a form with TinyMCE (requires change in core AND TinyMCE module)

[swampopus]

This is related to this issue in core: backdrop/backdrop-issues#7158

Basically, when the form is saved, the editor is removed and the user briefly sees a textarea with plain HTML instead of the editor.

This is easily fixed with a simple if statement, checking to see if the form is submitting or not. If it is, do not remove the editor.

Unfortunately (unless there is another way to handle this), this requires a single line of code added to core's filter.js file, as seen in this core issue and PR: backdrop/backdrop-issues#7149

Once that is in place (or if there is another technique for detecting the form is being submitted which can be used), then THIS bug would be easy to fix with the following code for tinymce-integration.js, on line 143:

    detach: function (element, format, trigger) {
      if (trigger === 'serialize') {
        tinymce.triggerSave();
        return;
      }
      if (Backdrop.settings.formIsSubmitting != true) {
        let idSelector = '#' + element.id;
        tinymce.remove(idSelector);
      }
    }

If the core PR gets merged, I will immediately create a PR for TinyMCE which adds this little bit of code. I wanted to create this issue in the meantime, to document the situation.

[indigoxela]

@swampopus many thanks for opening the issue. Yes, I also saw the issue in the core queue, but have some reservations. There might be side effects.

[swampopus]

I understand the reservations-- I've been using the fix in my live sites, and don't have any issues. Since the page is in the process of submitting and reloading anyway, the TinyMCE editor simply stays visible until the page refreshes. I haven't had any problem switching between TinyMCE and CKEditor (or no editor), as it still gets removed correctly for those events.

I was trying to think of a possible situation where there might be problems-- I have tested it with "unlimited" fields, and everything still works-- I was thinking maybe Ajax would possible cause issues, but so far no.

[swampopus]

Update: I may have found a work-around, which would let me just create a contrib module that accomplishes this, with no changes to core (just in case the PR is not accepted).

I created such a module for CKEditor, here: https://github.com/backdrop-contrib/ckeditor_no_html_flash

I could very probably create a similar one for TinyMCE.

[indigoxela]

I could very probably create a similar one for TinyMCE.

I don't think that's necessary. backdrop/backdrop-issues#7149 has been marked as RTBC in core, so if that gets merged, I'll have a look how to integrate it here.

A little tricky, that I probably have to check the core version in order to make use of Backdrop.settings.formIsSubmitting (or maybe not, I'll see). 😉

[swampopus]

Lol-- I know-- I found out my patch was RTBC like 1 hour after posting this :)

As for detecting core version-- that's the beauty of it. You don't need to--

Backdrop.settings.formIsSubmitting will simply be undefined in earlier versions of core and in situations where the form is not being submitted. So this if statement:

if (Backdrop.settings.formIsSubmitting != true)

will work in either case. In other words, it will have only two states, regardless of the version of core: undefined and true