Filtered html ignores extra line breaks

Question

I'm using the Filtered HTML input format without a WYSIWYG editor.

When editing text, if I put some text onto a new line by hitting return, when I save its fine.

However if I add another line (so there is a space between the 2 lines of text) by hitting return twice, when I save this extra line disappears. How can I stop this from happening? Thanks

So I can do this:

1
2

But I can't do this:

1

2

Answer 1

Consider using the Markdown Filter. It not only solves your problem, but gives a more intuitive input option.

If your users are used to using Markdown on StackOverflow, then they will love it ;) In fact, StackOverflow was one of the first sites to integrate the Markdown format.

Answer 2

Add the "P" tag (< p >) and "BR" tag (< br >) to the list of allowed tags on your filter HTML tags settings. You don't have to worry about security because since it is a filter HTML all the extra code like style inside the p tag will be remove.

Note: Make sure to check the option to Convert line breaks into HTML (i.e. < br > and < p >)

Note 2: if using a WYSIWYG editor like ckeditor make sure you have a set a condition like in note 1.

Answer 3

Ive found a solution but its not perfect.

Ive turned on the 'Limit allowed HTML tags' filter for safety but turned all other filters off. This means the spaces appear in the code but do nothing as they arn't p or br tags.

Then I apply white-space: pre; to the element. Now all the spaces and new lines are preserved.

The issue with this is that a user could enter 100 new lines as there is no validation at all. Another problem is if this field is aggregated or used elsewhere on the site you would need to apply the css again to see the spaces.

Ill be very happy to accept a better solution.

Answer 4

Another solution is to use a wysiwyg editor. If you add a blank line then Ckeditor will create a p tag containing a html space.

I was however hoping to avoid using an wysiwyg as it needlessly increases the page size. I also dont know what its performance is link on mobile devices as its javascript based.

Answer 5

I don't know a perfect solution either. You can limit the number of consecutive newlines at any stage you like with regex - client-side presave, server-side presave, server-side pre-output, client-side output.

Here's an example for server-side pre-output modification in your theme's template.php file. The plain_text format can be any text filter of your choice and the null case covers plain text (when filter not set). I'm limiting the max newlines to 2 (using {3,} for 3 instances and above). My generalised regex covers \r newlines as well but this wouldn't be necessary in this use case.

function YOURSUBTHEME_preprocess_field(&$variables, $hook) {
  if ($variables['element']['#field_type'] == 'text_long' &&  // Makes sure this is a text_long field type.
    isset($variables['element']['#items'][0]) && 
    (!isset($variables['element']['#items'][0]['format']) ||
    $variables['element']['#items'][0]['format'] === 'plain_text')
  ) {
    foreach ($variables['items'] as $index => $value) {
      $markup = isset($variables['items'][$index]['#markup']) ? $variables['items'][$index]['#markup'] : '';
      $markup = preg_replace("/[\r\n]{3,}/", "\n\n", $markup);
      $variables['items'][$index]['#markup'] = nl2br($markup);
    }
  }
}