tinyMCE duplicates previous block element when pressing return (visual editor)

4 Views

Going crazy with this. Can’t figure out if this is normal behavior.

I have added a filter to rewrite image inserts to use <figure> and <figcaption>. Works well.

Read More

However, when I insert an image in the Visual view and press return, I want it to start a new paragraph.

Instead it creates another <figure> element and puts my next line of text in that.

Example of the code produced if switch to Text view: 

<figure class="alignnone">

<a href="path/to/image.jpg"><img class="alignnone size- wp-image-209" src="path/to/image.jpg" width="199" height="43" /></a>

<figcaption>Image Caption</figcaption>

</figure>

<figure class="alignnone"`>This should be a new paragraph but is inside a figure tag.</figure>

Is there any way I can stop tinyMCE from replicating the previous block element? I know if you set some text as, say, an <h2> and press return the next line defaults back to <p>. That’s the behavior I want.

Post Views: 4

Related posts

Leave a Reply

4 comments

  1. I’m currently having the same problem. Here’s my work-around.

    add_filter( 'tiny_mce_before_init', 'workaround' );
public function workaround( $in ) {
    $in['force_br_newlines'] = true;
    $in['force_p_newlines'] = false;
    $in['forced_root_block'] = '';
    return $in;
}

    tiny_mce_before_init gives you access to the TinyMCE settings that WordPress’ editor uses. See also: TinyMCEConfiguration

    The downside to this is instead of “return” resulting in a p it instead gives you a br. I’ve tried reversing the force_br_newlines and force_p_newlines but it results in the original problem. Hope this is of some help.

  2. I had the same problem, but not in WordPress. Anyway, I force the ‘p’ block to take the content between ‘p’ tags. And because of that, when I hit the return button and save the content into DB the TinyMce duplicates the ‘p’ tags. Moreover, it duplicates the tags all the times I save it again. My solution is into the init:

    force_br_newlines: true,
force_p_newlines: false,
forced_root_block: 'p',
invalid_elements: 'p',

    The most important is the invalid_elements. Here you have to list the ‘p’ tag. After this setting my code does not duplicate the ‘p’ tag anymore. Hope your’s will do the same.

  3. You can set the keep_styles option to false on init.

    This option will keep the editor’s current text style when a user presses enter/return.

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

    Taken from the docs

  4. Here is a nother version of the solution. I have to write a new one, because the previous one is OK, but it not works with every other settings.
    This solution stops duplicating p tags after new lines and headings, but puts one simple br tag between the paragraphs.

    forced_root_block: 'p',
force_p_newlines: false,
force_br_newlines: false,
extended_valid_elements: '-p',

    I use the extended_valid_elements because I do not want to redefine the default setting, just one value of the valid_elements. The meaning of -p and the other settings are here.

    Note that with this setting, you will see bigger space between the text elements in the editor visually.