I want to allow all Alpine JS components (x-data, x-init, etc.) as attributes for all HTML tags in TinyMCE 4.
I tried to add them via a rule for extended_valid_attributes in different ways, but everything fails. Either they are still stripped from the code or they become valid, but all other attributes are then stripped.
Here are some examples of what I already tried, most of it I found in answers to other tinyMCE questions here (e.g. TinyMCE 4 - add custom styles/classes/attributes to any HTML tag) and read in the tinyMCE docs (https://www.tiny.cloud/docs-4x/configure/content-filtering/#extended_valid_elements, https://www.tiny.cloud/docs-4x/configure/content-filtering/#controlcharacters):
$alpineAttributes = 'x-data|x-init|x-show|x-text|x-html|x-model|x-for|x-transition|x-effect|x-ignore|x-ref|x-cloak|x-teleport|x-if|x-id';
$settings['extended_valid_elements'] = '*['. $alpineAttributes .']';
-> select all elements via *: doesn't work, the alpine attributes still get stripped
$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],div,a,p';
-> here at least the attributes don't get stripped anymore for div, a and p tags, but all other attributes that would normally be allowed for each of those three now get stripped, because the list of allowed attributes doesn't get extended but overriden with my attributes.
$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],*';
-> doesn't work, the alpine attributes still get stripped
$settings['extended_valid_elements'] = '@['. $alpineAttributes .']';
-> doesn't work, the alpine attributes still get stripped
Is there really no way to just EXTEND the list of allowed attributes for each element instead of completely overriding it with my rules in extended_valid_elements?
We can solve this issue using different strategy. We can change Alpine prefix from x- to data-x-.
As per the HTML standard x-data, x-init ... are not valid "custom attributes". The attributes need to have prefix data-.
TinyMCE allows data-* custom data attributes by default, without having to specify them in any rules. So instead of forcing Alpine prefixes on TinyMce we can simply change the prefix on Alpine, using Alpine.prefix("data-x-").
Demo: on codepen
<!DOCTYPE html>
<html>
<head>
<style>
#output {
font-family: monospace;
font-size: 0.9em;
color: rgb(83, 23, 23);
}
</style>
</head>
<body>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://unpkg.com/alpinejs@3.8.1/dist/cdn.min.js"></script>
<script>Alpine.prefix("data-x-");</script>
<p data-x-data="{date:'Date: '+ new Date().toISOString()}" data-x-text="date">date place holder</p>
<textarea id=editor>Tiny!</textarea>
<input type="button" id="btn" value="Show editor HTML content" />
<div id=output></div>
<script type="text/javascript">
let content = `<br><p data-x-data="{date: 'Date: '+new Date().toISOString()}" data-x-text="date">date place holder</p>`;
tinymce.init({
selector: '#editor',
schema: 'html5',
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(content);
setTimeout(() => Alpine.initTree(editorDOM()), 200);
});
}
});
btn.onclick = function () {
output.innerText = tinyMCE.activeEditor.getContent();
}
function editorDOM() {
return (editor_ifr.contentWindow
? editor_ifr.contentWindow.document
: editor_ifr.contentDocument).body;
}
</script>
</body>
</html>
The alpine x-text attribute works inside the editor as well, and it shows current date. This is because TinyMce allows our data-x-text attribute.
Note:
<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/4/tinymce.min.js'></script>