TinyMce copies the classes from the current block element when pressing Return

3
votes

When using tinyMce in Wordpress, In the visual editor, I'f I'm entering content in an element and press return the classes from the parent element are copied over, i would want simply to create a new <p> element.

For example, I'm editing

<p class="blip blip--gray one-sixth push-huge--top push--bottom">d aasdas d</p>

Then i press return and the following is added:

<p class="blip blip--gray one-sixth push-huge--top push--bottom"></p>

where i would want only to add 

<p></p>

I have forced_root_block option set to p

3
javascriptjquerywordpresstinymcetinymce-4

3 Answers

2
votes

This is tinymce default behaviour.

You could add a tinymce handler to your editor that gets triggered by the keyup event. Testing for charCode 13 you can detect if ENTER has been pressed. If so you could remove the classes from the actual paragraph in the editor:

$(tinymce.get('youreditor_id').getNode()).closest('p').removeAttr('class');
2
votes

This might be the solution to this problem:

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

tinymce - content filtering docs

1
votes

The complete answer, based on @thariama post is

        tinyMCE.editors.content.on('keyup',function(e){
            if ( 13 === e.keyCode ) {
               $(tinyMCE.editors.content.selection.getNode()).closest('p').removeAttr('class');
            }
        });