magento2: WYSIWYG: Saving IFrame-elements directly via TinyMCE editor won't work - IFrame got lost on save

Preconditions

A wysiwyg-editor enabled on the catalog product edit page.

Tested with Magento 2.2.6

Steps to reproduce

1. Open the catalog product edit page
2. Open the “content” area"
3. Enable all the WYSIWYG-editors in this area
4. Click on Insert Media in the Description Editor
5. Select Iframe as type
6. Enter a url (eg. https://magento.com/)
7. Click on insert
8. Now save the product

Expected result

The Iframe is stored within the content and displayed in the frontend, also it will load again when editing the same product again.

Actual result

The Iframe got lost - it’s not shown on the page and also when editing the product again, the Iframe is not longer part of the HTML for the content.

Workaround for now: Hide the editor after inserting the Iframe but before saving, so the HTML will be pushed into a textarea-field - here the transformation is correct and the IFrame got stored as expected.

Cause:

When inserting the Iframe with the Media-Dialog, a placeholder img-tag with serialized data is pushed to the preview:

<img data-mce-src="https://i-18548-2-2-6.engcom.dev.magento.com/pub/static/adminhtml/Magento/backend/en_US/tiny_mce/themes/advanced/img/trans.gif" src="https://i-18548-2-2-6.engcom.dev.magento.com/pub/static/adminhtml/Magento/backend/en_US/tiny_mce/themes/advanced/img/trans.gif" class="mceItemMedia mceItemIframe" data-mce-json="{'type':'iframe','video':{'sources':{}},'params':{'src':'https://magento.com/'},'width':'320','height':'240'}" width="320" height="240">

On saving the img-tag must be serialized with the TinyMCE serializer, so the data in the data-mce-json-attribute will be transformed to an valid iframe-tag. This is not done at the moment, due to the following call in the tiny_mce_src.js within the function getContent():

// Get raw contents or by default the cleaned contents
if (args.format == 'raw')
    content = self.getBody().innerHTML;
else
    content = self.serializer.serialize(self.getBody(), args);

As the getContent is called with format “raw” from the onBeforeUnload-Handler as defined also in tiny_mce_src.js the iframe information got lost, as the serializer got not called:

if (s.add_unload_trigger) {
    t._beforeUnload = tinyMCE.onBeforeUnload.add(function() {
        if (t.initialized && !t.destroyed && !t.isHidden())
	    t.save({format : 'raw', no_events : true});
    });
}
´´´