Quiero permitir todos los componentes de Alpine JS ( x-data , x-init , etc.) como atributos para todas las etiquetas HTML en TinyMCE 4.
Traté de agregarlos a través de una regla para extended_valid_attributes de diferentes maneras, pero todo falla. O todavía se eliminan del código o se vuelven válidos, pero luego se eliminan todos los demás atributos.
Aquí hay algunos ejemplos de lo que ya probé, la mayoría lo encontré en las respuestas a otras preguntas de tinyMCE aquí (por ejemplo, TinyMCE 4: agregue estilos/clases/atributos personalizados a cualquier etiqueta HTML ) y leí en los documentos de tinyMCE ( 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 .']'; -> seleccione todos los elementos a través de * : no funciona, los atributos alpinos aún se eliminan
$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],div,a,p'; -> aquí al menos los atributos ya no se eliminan para las div , a y p , pero todos los demás atributos que normalmente se permitirían para cada uno de esos tres ahora se eliminarán, porque la lista de atributos permitidos no se amplía pero anulado con mis atributos.
$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],*';-> no funciona, los atributos alpinos aún se eliminan
$settings['extended_valid_elements'] = '@['. $alpineAttributes .']';-> no funciona, los atributos alpinos aún se eliminan
¿Realmente no hay forma de AMPLIAR la lista de atributos permitidos para cada elemento en lugar de anularla por completo con mis reglas en extended_valid_elements ?
Podemos resolver este problema usando una estrategia diferente. Podemos cambiar el prefijo Alpine de x- a data-x- .
Según los datos x estándar de HTML x-data, x-init ... no son "atributos personalizados" válidos. Los atributos deben tener un prefijo data- .
TinyMCE permite atributos de datos personalizados data-* de forma predeterminada , sin tener que especificarlos en ninguna regla. Entonces, en lugar de forzar los prefijos de Alpine en TinyMce, simplemente podemos cambiar el prefijo en Alpine, usando Alpine.prefix("data-x-") .
Demostración: en 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> El atributo alpine x-text también funciona dentro del editor y muestra la fecha actual. Esto se debe a que TinyMce permite nuestro atributo data-x-text .
Nota:
<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/4/tinymce.min.js'></script>