TinyMCE 4 - allow AlpineJS attributes for all HTML tags

user_17983623 0
Viewed 434

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?

tinymce-4 alpine.js tinymce html
1 Answers

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:

  • In the demo I've used TinyMce latest version 5. It works on version 4 as well. Tested using following CDN:
<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/4/tinymce.min.js'></script>
  • TinyMCE doesn't work on StackOverflow because of iframe restrictions that is why I've provided the codesandbox link.
user_152739680
Related