TinyMCE media plugin in combination with purifier does not work

[Didier B.]

I want to use the TinyMCE Media plugin to place html video and youtube/vimeo embeds within text. I also want to leave the purifier option activated.
I added "extended_valid_elements": "video, source, iframe" to my custom TinyMCE default settings JSON file:

{
	"extended_valid_elements": "video,source,iframe",
	"browser_spellcheck": false,
	"height": 500,
	...
}

After saving the page the video and iframe elements are still removed. Sometimes the elements remain after the first save, but after a subsequent save they are still removed.

How to solve this?

[elabx]

I struggled with this too, I didn't give it a shot but I thought of hooking the MarkupHTMLPurifier but I didn't find a reasonable point to hook into, maybe here? But would love to scope it to InputfieldTinyMCE.

[Didier B.]

Based on information I found here I placed the code below in site/ready.php but this doesn't work either... Does it only work for CKEditor?

 $wire->addHookAfter('MarkupHTMLPurifier::initConfig', function(HookEvent $event) {
	$def = $event->arguments(1);
	$def->addElement('video', 'Flow', 'Flow', 'Common');
	$def->addElement('source', 'Flow', 'Flow', 'Common');
	$def->addElement('iframe', 'Flow', 'Flow', 'Common');
});

 

[BrendonKoz]

I was curious so just tested the default configuration of using the TinyMCE field with the media plugin enabled, and I was able to get it to save a YouTube and/or Vimeo video within the editor (and view it successfully on the frontend) without adjusting HTMLPurifier. However, if I re-save the exact same page, after saving it once, the content then disappears. Something must be changing just enough that's causing it to get wiped, though I haven't dug down to see what.

I think most have taken advantage of either hannacodes, Ryan's Textformatter Video Embed, or one of the two Oembed modules for this. It's not quite as convenient as simply using something that exists natively within the TinyMCE editor, but it may be a viable workaround if a better solution can't immediately be found. 😞

[gRegor]

With the help of this thread and this StackOverflow response, I think this is working for me with TinyMCE so far:

In site/ready.php:

$wire->addHookAfter('MarkupHTMLPurifier::initConfig', function(HookEvent $event) {
    $config = $event->arguments(0);
    $def = $event->arguments(1);

    $config->set('HTML.SafeIframe', true);

    // Allow YouTube and Vimeo
    $config->set('URI.SafeIframeRegexp', '%^(https?:)?//(www\.youtube(?:-nocookie)?\.com/embed/|player\.vimeo\.com/video/)%');
});

Then, in the PW admin for the textarea field > Input tab > Custom Settings JSON:

{
  "extended_valid_elements": "video,source,iframe[src|width|height|title|frameborder|allow|referrerpolicy|allowfullscreen]"
}

Note the list of attributes in square brackets after the "iframe". You can use wildcard `[*]` if you want to allow any attribute, though I haven't experimented with that.

Finally, clear the HTMLPurifier cache from Tracy Console as described in that GitHub conversation:

$purifier = new MarkupHTMLPurifier();
$purifier->clearCache();

This is very fresh, I'm still testing it out, but it seems to work. Might still need to add that bit from SO for the `allowfullscreen`:

$def->addAttribute('iframe', 'allowfullscreen', 'Bool');