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.
<br><br>
! Better don't do that, but a single<br>
is totally legitimate.