Tiny MCE - how to allow 'empty attributes'?

Lance

Vote:

We are using TinyMCE v4.4 in a v12.21 Episerver Core headless setup. The front end is an angular app. We are trying to allow some custom attributes that we use for Angular inside of Tiny MCE in the CMS editor.

Here’s an example of a table we’d like to use:

<table lg-table>
  <thead lg-table-head>
    <tr lg-table-row>
      <th lg-table-head-cell>Author</th>
      <th lg-table-head-cell>Book</th>
      <th lg-table-head-cell>Published</th>
    </tr>
  </thead>
  <tbody lg-table-body>
    <tr lg-table-row>
      <td lg-table-cell>Orhan Pamuk</td>
      <td lg-table-cell>Strangeness in my Mind</td>
      <td lg-table-cell>2016</td>
    </tr>
    <tr lg-table-row>
      <td lg-table-cell>Albert Camus</td>
      <td lg-table-cell>The Plague</td>
      <td lg-table-cell>1947</td>
    </tr>
  </tbody>
</table>

Note that all of the special attributes such as ‘lg-table’ are used by Angular to make the table data dynamic.

We’ve gotten pretty close in that we’re able to allow these custom attributes:

<table lg-table="">
<thead lg-table-head="">
<tr lg-table-row="">
<th lg-table-head-cell="">Author</th>
<th lg-table-head-cell="">Book</th>
<th lg-table-head-cell="">Published</th>
</tr>
</thead>
<tbody lg-table-body="">
<tr lg-table-row="">
<td lg-table-cell="">Orhan Pamuk</td>
<td lg-table-cell="">Strangeness in my Mind</td>
<td lg-table-cell="">2016</td>
</tr>
<tr lg-table-row="">
<td lg-table-cell="">Albert Camus</td>
<td lg-table-cell="">The Plague</td>
<td lg-table-cell="">1947</td>
</tr>
</tbody>
</table>

We are using the ‘extended_valid_elements’ to allow these attributes:

https://www.tiny.cloud/docs/tinymce/6/content-filtering/#extended_valid_elements

eg: .

AddSetting("extended_valid_elements", "table[lg-table|hidden|border|style],thead[lg-table-head],tr[lg-table-row],…

However, when copying the first table into the WYSIWYG editor, and saving will then transform it into the second table. We’d like to remove all of the extra =”” from the attributes as these Attributes should be ‘empty’

Cheers,

Lance

#304159

Jun 27, 2023 9:08

Paul McGann (Netcel)

Vote:

Hi Lance,

What you seem to have is a template your wish to re-use?

You can implement templates into tiny mce just see this post.

Thanks

Paul

#304171

Jun 27, 2023 11:52

Lance

Vote:

Thanks for the table template suggestion, @paul. We may use it.

Thanks for the suggestion. We are using a v12 headless setup, with an Angular Front End. So I ended up making a custom XHTML Property Model that updates the XHTML String with the cleaned values before JSON Serialization runs.

It's not ideal, as TinyMCE still has the ="" in the source view, but at least our Front End doesn't need to strip out the extra characters.

Thanks!

#304367

Jun 30, 2023 14:34

Try our conversational search powered by Generative AI!

Tiny MCE - how to allow 'empty attributes'?