Tiny MCE - how to allow 'empty attributes'?

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
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
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
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.