Ini*_*iii 8 html tinymce tinymce-4 alpine.js
我想允许所有 Alpine JS 组件（x-data、x-init等）作为TinyMCE 4 中所有HTML 标签的属性。
我尝试通过规则以extended_valid_attributes不同的方式添加它们，但一切都失败了。它们要么仍然从代码中删除，要么变得有效，但所有其他属性都会被删除。
以下是我已经尝试过的一些示例，其中大部分是我在此处找到的其他tinyMCE问题的答案（例如TinyMCE 4 - 将自定义样式/类/属性添加到任何HTML标记）并阅读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 .']';
-> 通过 : 选择所有元素*不起作用，高山属性仍然被剥夺
$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],div,a,p';
-> 在这里，至少div、a和p标签的属性不再被剥离，但是通常这三个标签中的每一个都允许的所有其他属性现在都被剥离，因为允许的属性列表不会被扩展，而是被覆盖我的属性。
$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],*';
-> 不起作用，高山属性仍然被剥夺
$settings['extended_valid_elements'] = '@['. $alpineAttributes .']';
-> 不起作用，高山属性仍然被剥夺
难道真的没有办法只扩展每个元素允许的属性列表，而不是用我的规则完全覆盖它吗extended_valid_elements？
我们可以使用不同的策略来解决这个问题。我们可以将 Alpine 前缀从 更改x-为data-x-。
根据HTML 标准， x-data, x-init ... “自定义属性”无效。属性需要有前缀data-。TinyMCE默认
允许data-*自定义数据属性，而无需在任何规则中指定它们。因此，我们可以简单地使用 更改 Alpine 上的前缀，而不是在 TinyMce 上强制使用 Alpine 前缀。
演示：在 codepen 上Alpine.prefix("data-x-")
<!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>
alpinex-text属性也在编辑器内起作用，它显示当前日期。这是因为 TinyMce 允许我们的data-x-text属性。
笔记：
<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/4/tinymce.min.js'></script>
| 归档时间： |
|
| 查看次数： |
1008 次 |
| 最近记录： |