TinyMCE Editor removing <p> and <br> and putting &nbsp; instead

Question

Steps for problem reproduction:

1. Open WordPress Admin Dashboard (I use version 3.7);
2. Click on Page > Add Page;
3. On the editor, choose the "HTML" Tab;
4. Write <p>Lorem ipsum dolor sit amet</p><br> on the content area;
5. Choose the "Visual" Tab;
6. Choose "HTML" Tab back;

7. The code <p>Lorem ipsum dolor sit amet</p><br> lost its formatting and appears as:

   Lorem ipsum dolor sit amet
   
    
   

How to deactivate this TinyMCE issue to maintain the entirely original formatting? (I'm looking for a solution on JavaScript client-side of the editor)

Answer 1

Once you save it, the

tags are automatically added to the contents. It only removes it when you have a plain <p>....</p> but if you have <p class='something'>...</p> it would preserve it.

Answer 2

You can add:

"wpautop" => false

as an argument to your wp_editor.

Example (mileage may vary) :

 $args = array(
                "textarea_name" => $this->option_name . "[editor_text]", // Name of the textarea on the forms, this value is passed when submitting the form.
                "textarea_rows" => 15, // The number of rows textarea displays.
                "wpautop" => false, // So <p> tags are not removed going from text->visual->text in editor.
                "editor_class" => "my_editor_custom_css" // Additional CSS classes added to the TinyMce editor.
            );

        echo wp_editor($display_text, "my_editor_html_id", $args);

Note that you have to use <p> </p> tags rather than <br> but that is the preferred way nowadays anyway since it gives you the capability of formatting with css without touching the html.

Answer 3

I do not usually recommend plugins as an answer to something like this, but TinyMCE Advanced is developed by a core WP developer and it provides this option. It's one of my staple plugins on every WP site I create.