CODEWITHSUNDEEP
javascripttinymce-4
kaytee
kaytee

Reputation: 85

Tinymce : Don't replicate class when adding a new paragraph on enter

Using a custom button, I add a paragraphe with a class and some content, like so :

<p class="mce-new-class">my custom content</p>

When I press enter after such a paragraph, TinyMCE will automatically add a new paragraph using the exact same class :

<p class="mce-new-class">my custom content</p>
<p class="mce-new-class">&nbsp;</p>

I'd like to only have a new paragraph but without the class :

<p class="mce-new-class">my custom content</p>
<p>&nbsp;</p>

I've tried this :

tinymce.init({
    ...
    setup: function (ed) {
        ed.on('keydown',function(e) {
            if(e.keyCode == 13){
                ed.selection.setContent('<p>&nbsp;</p>'); 
                return false;
            }
        });
    }
});

But this applies to all situations and will brake other usefull situations such as replicating a list element on "enter press"

Any help would be much appreciated

Upvotes: 1

Views: 369

Answers (2)

Mariano Arga&#241;araz
Mariano Arga&#241;araz

Reputation: 1252

You should use the config to avoid this issue, since there can be an infinite number of classes to avoid replicating

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  keep_styles: false
});

Source: https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#keep_styles

Upvotes: 0

kaytee
kaytee

Reputation: 85

Found out a solution :

...
setup: function (ed) {
    ed.on('keydown',function(e) {
        if(e.keyCode == 13){
            if(ed.dom.hasClass(ed.selection.getNode(), 'mce-new-class')){               
                ed.selection.setContent('<p>&nbsp;</p>'); 
                return false;                   
            } else {                
                return true;
            }
        }
    });
},
...

Upvotes: 3

Related Questions