Search code examples
tinymcetinymce-5

How to prevent tinymce from adding class to every new li in list


I'm using the lists plugin from tinymce.

I have made a function that will add a class to one of the li elements in the list. If I add the class to the last element in the list, every new li element added by the editor when hitting enter will have the same class.

I've tried looking into content filtering, but there it looks like I can only prevent any li element having a class.

How can I make tinymce add new li elements without a class?

What happens now:

<ul>
   <li>asd</li>
   <li>asd</li> 
   <li class="optional">asd</li> (updated by right clicking and selecting optional)
   <li class="optional">asd</li> (new elements when hitting enter)
   <li class="optional">asd</li> 
   <li class="optional">asd</li> 
</ul>

What I want

<ul>
    <li>asd</li>
    <li>asd</li> 
    <li class="optional">asd</li> (updated by right clicking and selecting optional)
    <li>asd</li> (new elements when hitting enter)
    <li>asd</li> 
    <li>asd</li> 
</ul>

Thanks in advance!


Solution

  • There is a configuration option that tells TinyMCE to not bring styles from one root block element (<p>, <li> etc) to another: keep_styles.

    The documentation is here: https://www.tiny.cloud/docs/configure/content-filtering/#keep_styles

    The setting either takes true (default) or false. As an example:

    keep_styles: false
    

    If you set this to false you won't get the current list item's classes/styles brought down to the next list item.

    Here is a running example: https://fiddle.tiny.cloud/dNhaab