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