Placing an extra empty linebreak in the Redactor Field

Question

I've been trying to add extra line breaks to a text field, But this seems impossible?

Most logical thing to do for the user would be to give it an extra linebreak <br>

Those get deleted, sometimes directly, sometimes after opening and then saving again

So far I've tried:

• disable cleanup html in the field - still deletes <br>

In the json file settings:

• tidyHtml: false - no
• cleanSpaces: false - no

• removeEmptyTags: false - no

• linebreaks: true - this converts ALL breaks to line breaks. Not handy.

Answer 1

For me this works: Shift+Enter

Answer 2

Just tried this again in Craft 2.3 and now it works as most people would expect (I know, not as it should for html purists)

Shift Enter = <br>

Regular Enters are coded as <p><br></p>, forcing an empty line. For me, this works :-)

This is with 'Clean HTML' selected and HTML purifier OFF

Answer 3

Single Line-Break

To insert a line-break <br> into a Redactor text field use Shift+Enter on your keyboard.

Do this for single line-breaks only! You or your client should not misuse the <br> tag for styling purposes by adding multiple of them in a row. It is semantically wrong (and you can't be sure how browsers interpret it).

With older versions of Redactor / Craft it was possible to do this. I can still save Redactor fields with <br><br><br> on a Craft 1.3 installation, but something must have changed down the road, because now all but one gets removed.

But there's other ways to make adding vertical space within a Redactor field possible:

Horizontal Line

If it matches the semantic meaning of that space you create, what about using a horizontal line <hr> instead and style it to your needs:

hr {
  height: 3em;
  visibility: hidden;
}

Redactor has a build-in button for <hr>. Edit your Redactor configs for it to show up:

{
    buttons: [
        'html','formatting','bold','italic',
        'unorderedlist','orderedlist','link','image','video',
        'horizontalrule'
    ],
    plugins: ['fullscreen'],
    toolbarFixedBox: true
}

DIV

That vertical space should not have any semantic meaning at all and you simply want an option to insert some beautiful white space? Then it gets a bit more complicated, because what you should add to your markup in this case is a sematically meaningless element, a div or span.

To do this, switch to "HTML Mode" in your Redactor field and add an empty div inbetween your paragraphs:

<p>
        More white space for these paragraphs, please!
</p>
<div class="whitespace"><div>
<p>
        More white space for these paragraphs, please!
</p>

You have to configure Redactor to not convert div on save by setting convertDivs:false. (note that this setting will be renamed to replaceDivs with Redactor 10).

To make inserting such div easier, write you own little Craft / Redactor plugin that inserts the HTML with the click on a button and add some CSS to style your white space on the backend. A good starting point for the JS might be the "Insert HTML" Redactor plugin.

The Craft plugin "RedactorClips" could be an alternative, but I think there's no option to set custom CSS for the backend.