6

TinyMCE editor inserts <p>&nbsp;</p> instead of <br> tags when I press enter in my text for a new line.

How to force TinyMCE in WP to replace newlines with <br> and not <p>&nbsp;</p>?

  • 3
    use soft returns (shift+enter) to insert <br>s instead of paragraphs. – Milo Oct 10 '13 at 17:00
  • @Thanks, but that's unfortunately not an option in my case. I need to do it by pressing Enter. So, I guess some TinyMCE or WP option need to be changed. Do you know what? – Derfder Oct 10 '13 at 17:09
  • There is no such option in WordPress, use soft return – Eugene Manuilov Oct 10 '13 at 17:23
  • @EugeneManuilov I don't believe you that it's not possible to set in TinyMCE or WP. It has to be done somehow. – Derfder Oct 11 '13 at 7:19
  • @Milo My client don't even know what soft return means. And he certainly doesn't want to press shift + enter every time he wants to make a new line. If it's possible in Drupal and Joomla it has to be possible in WordPress too. – Derfder Oct 11 '13 at 7:20
10
+25

The answer suggested by GavinR is correct.

You don't need to install the suggested plug-in, though. Just add this mini plugin and you're set:

<?php
defined( 'ABSPATH' ) OR exit;
/* Plugin Name: TinyMCE break instead of paragraph */
function mytheme_tinymce_settings( $tinymce_init_settings ) {
    $tinymce_init_settings['forced_root_block'] = false;
    return $tinymce_init_settings;
}
add_filter( 'tiny_mce_before_init', 'mytheme_tinymce_settings' );

Now when you press enter, <br> tag will be inserted instead of creating new paragraph. But beware, if you create two consecutive newlines, the text will still be split to paragraph as a result of wpautop filter applied to your post content. You need to remove this filter first and create a new filter that will replace all newlines with <br> tags. Add something like this to your functions.php to display the <br> tags in your template:

remove_filter ( 'the_content', 'wpautop' );
add_filter ( 'the_content', 'add_newlines_to_post_content' );
function add_newlines_to_post_content( $content ) {
    return nl2br( $content );
}
  • 1
    I would suggest adding this to a plugin instead of your theme, so if you end up changing themes your editor will still use this method. – Morgan Estes Oct 17 '13 at 14:52
2

Install this plugin: http://wordpress.org/plugins/advanced-tinymce-configuration/

and then set forced_root_block to FALSE.

  • This is not working it still throws <p>&nbsp;</p> instead of <br> in my textareas with tinymce editor. – Derfder Oct 15 '13 at 10:37
0

This might not work for you, because I'm not sure what the scenario is that would require the need for a linebreak rather than paragraphs. If it's for a particular post type or a particular template, you could do this.

  1. Implement Advanced Custom Fields plugin.
  2. Create a custom field for your text, and select field type "textarea" with formatting set to "convert new lines into <br /> tags".
  3. Set the "location" of this custom field to appear only on the post type or template desired (the field could replace the editor on the post type or template, if desired).

Obviously, this approach removes all the normal formatting options normally provided by TinyMCE, including linking and inserting media. So, it may not be an option for you.

0

As far as I'm aware.. the only way to do this is to remove the wpautop filter.

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

This definitely prevents WordPress from adding 'artificial' p tags.

My thinking is because WordPress is somewhat designed for the "layman".. they feel it necessary to include with wpautop filter, which processes the content after it is submitted (or switched between visual and text modes); running a series of "checks" for valid html.. and adjusting the content accordingly.

While this might be great for people who never touch the HTML side; it is a thorn in the side of many users trying to "fiddle" with HTML.

NOTE: Removing the wpautop filter, will cause all your posts/pages (old and new) to not use the filter. This will result in all your HTML in the content editor being (squashed) together. Visual side will appear fine... but Text side is squashed... making it difficult to modify code.

  • I was using Advance Custom Fields, so needed remove_filter ('acf_the_content', 'wpautop'); instead, but it still wraped the whole input in one paragraph as a root block. – TecBrat Sep 30 '16 at 17:27
0

if you want to make intent in the beginning of sentence after <br> (SHIFT+ENTER), then you may need to use custom solution:

in functions.php add:

add_action('init', 'add_cust_button');
function add_cust_button() {
   if ( get_user_option('rich_editing') == 'true') {
     add_filter('mce_external_plugins', 'add_mycust_plugin');
     add_filter('mce_buttons_2', 'register_mycust_plugin');
   }
}
    function register_mycust_plugin($buttons) {
       array_push($buttons, "|", "indent_button");
       return $buttons;
    }
    function add_mycust_plugin($plugin_array) {
       $plugin_array['my_custom_button'] = get_bloginfo('template_url').'/scripts/button.js';
       return $plugin_array;
    }

add_filter( 'tiny_mce_version', 'my_refresh_mce');
function my_refresh_mce($ver) {
  $ver += 3;
  return $ver;
}

then in theme folder, make folder "scripts", and inside it create a icon file (named "indent_img.png") and javascript file (named "button.js"), with this content:

(function() {
    tinymce.create('tinymce.plugins.Nlineeplg', {
        init : function(ed, url) {

            ed.addButton('indent_button', {
                title : 'indent',
                image : url+'/indent_img.png',
                onclick : function() {
                    ed.execCommand('mceInsertContent', false, '<span style="margin:0 0 0 8px;">&nbsp;</span>');
                }
            });

        },
        createControl : function(n, cm) {
            return null;
        }
    });
    tinymce.PluginManager.add('my_custom_button', tinymce.plugins.Nlineeplg);
})();

then, in the EDITOR page, you will have a special button, and when you click in the beginning of sentence and click that button, then it places an indent.

0

Thanks to Bigsmoke it is possible to play with wpautop :
A - Enabling or disabling wpautop on selected pages
B - Without modifying function.php
C - Without messing around old pages if Wpautop filter was removed
D - Without squaching the content in the text side of the editor

http://wordpress.org/plugins/wpautop-control/

Now i can make most of my text layout enjoying automatic paragraphs, then finalize the aspect without having wpautop on or off messing around.

  • Disabling autop for this is probably a bad idea, as it makes many more changes in how the editor content is processed, changes that most likely the poster will like to still take effect – Mark Kaplun Aug 11 '14 at 13:30
  • You're right. But because WP forces br/ to be changed by &nbsp; it's just a mess when you try, for exemple, to have a fine adjustment of your text aside a picture. If you have a cleaner solution for that i'd be so glad to use it. – bradypus Aug 11 '14 at 13:48
  • Try to ask a question about it ;) – Mark Kaplun Aug 11 '14 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.