In the TinyMCE editor I want to add a valid element attribute, the HTML5 audio and video attribute "controlList". It's an experimental attribute but supported in Chrome and we have a use for it. For example we want the following code to validate in TinyMCE:
<p>
<audio controls="controls" controlsList="nodownload">
<source src="some.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</p>
Right now 'controlsList="nodownload"' is not recognized and stripped out.
Tiny MCE's documentation shows that adding custom tags and attributes is possible using tinyMCE.init (https://www.tiny.cloud/docs/configure/content-filtering/#valid_elements). However I've looked at the source of 2sxc and I am not quite clear about the best way to do this in 2sxc's implementation of TinyMCE.
One possibility seems to be line 2045 of the file \dist\sxc-edit\sxc-edit.js (2sxc 9.14). There I added the tags & attribute to the existing validateAlso:
validateAlso: '@[class]' // allow classes on all elements,
+ ',i' // allow i elements (allows icon-font tags like <i class="fa fa-...">)
+ ",hr[sxc|guid]" // experimental: allow inline content-blocks
+ ",audio[controlsList]"
+ ",video[controlsList]"
However that didn't have the desired effect on my testing server and I don't love the idea of modifying source since my changes will be overwritten by the next patch I apply.
What is the right way to do this?
As of now, tinyMCE is not configurable. Reason is that we're moving to a completely new implementation of the UI using Angular 7, and we don't want to introduce more features to migrate :)
If you really want to do this, I recommend you use the code for the input-type "string-wysiwyg" to create your own - let's call it "string-wysiswyg-withfeatures" and register it as an input-type (there are some blogs about that) - then configure your field to use that wysiwyg.