TinyMCE 4 - 允许所有 HTML 标签的 AlpineJS 属性

Question

我想允许所有 Alpine JS 组件（x-data、x-init 等）作为 TinyMCE 4 中 所有 HTML 标签的属性。

我尝试以不同的方式通过extended_valid_attributes 的规则添加它们，但一切都失败了。要么它们仍然从代码中被剥离，要么它们变得有效，但所有其他属性随后被剥离。

以下是我已经尝试过的一些示例，其中大部分是我在此处的其他 tinyMCE 问题的答案中找到的（例如TinyMCE 4 - add custom styles/classes/attributes to any HTML tag）并阅读了 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 .']';

-> 通过* 选择所有元素：不起作用，alpine 属性仍然被剥离

$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],div,a,p';

-> 至少 div、a 和 p 标记的属性不会再被剥离，但是 所有其他 属性通常允许用于这些标记三个现在被剥离，因为允许的属性列表没有得到扩展，而是被我的属性覆盖。

$settings['extended_valid_elements'] = '@['. $alpineAttributes .'],*';

-> 不起作用，alpine 属性仍然被剥离

$settings['extended_valid_elements'] = '@['. $alpineAttributes .']';

-> 不起作用，alpine 属性仍然被剥离

真的没有办法只扩展每个元素的允许属性列表，而不是用我在extended_valid_elements 中的规则完全覆盖它吗？

Answer 1

我们可以使用不同的策略来解决这个问题。我们可以将 Alpine 前缀从 x- 更改为 data-x-。

根据HTML standard x-data, x-init ... 不是有效的“自定义属性”。属性需要有前缀data-。
TinyMCE 允许data-* 自定义数据属性by default，而无需在任何规则中指定它们。因此，我们可以简单地使用 Alpine.prefix("data-x-") 更改 Alpine 上的前缀，而不是在 TinyMce 上强制使用 Alpine 前缀。

演示： 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>

alpine x-text 属性也适用于编辑器，它显示当前日期。这是因为 TinyMce 允许我们的 data-x-text 属性。

注意：

• 在演示中，我使用了 TinyMce 最新版本 5。它也适用于版本 4。使用以下 CDN 进行测试：

<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/4/tinymce.min.js'></script>

• TinyMCE 无法在 StackOverflow 上运行，因为 iframe 限制，这就是我提供代码和框链接的原因。