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

2 Views

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

Read More
<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

Post Views: 2

Related posts

3 comments

  1. 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. 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

  3. 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');
            }
        });

Comments are closed.