3

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.

  • Noregt, why would you want to do this? This is considered as bad practice, you won't even know how a browser interprets it actually. – carlcs Jul 31 '14 at 10:49
  • IGNORE that comment, I first thought you want to produce several line breaks like so: <br><br>! Better don't do that, but a single <br> is totally legitimate. – carlcs Jul 31 '14 at 10:55
  • Yes that is, but it is erased every time. Furthermore it is the wish/demand of my client and he is not the first one to ask this. – noregt Jul 31 '14 at 12:36
  • Don't forget to tell the client to only use it (in those rather rare situations) where it is actually appropriate. Once they learned it, they may not use a normal "paragraph" <enter> again :D – carlcs Jul 31 '14 at 12:56
2

For me this works: Shift+Enter

  • Well does it still if you open and then save it again without editing? – noregt Jul 31 '14 at 12:36
  • Sure. In web apps it's <Shift>+<Enter> and OS X apps it's <Alt>+<Enter>. – carlcs Jul 31 '14 at 12:43
  • It also works if you copy and paste line breaks from other apps. They appear and get saved in the Redactor field as expected. – carlcs Jul 31 '14 at 12:46
  • Sorry but my point is that that does not work. I'm aware that you can make a line break '<br>' with Shift Enter. If I make two of those the first save one is left, the second save both are gone. – noregt Jul 31 '14 at 12:54
  • It works for me, @noregt. Manually adding <br>does not though. – carlcs Jul 31 '14 at 12:58
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

  • Glad to see you got your answer :) – carlcs Dec 18 '14 at 17:20
0
+50

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.

  • The RedactorClips plugin mysteriously fails to add the clip. I can't get RedactorStyles to add the div either, but it does have a way to set the backend CSS. – Marion Newlevant Nov 1 '14 at 21:09
  • Yeah, I behaves strange for me too if I add the whitespace clip within a paragraph. Did work though in a new paragraph: hit enter and then add the clip. But as I wrote, it's probably better to write a custom plugin (incl. backend CSS). What about using a hr? Doesn't fit your needs, @Marion? – carlcs Nov 1 '14 at 22:44
  • It's not semantic whitespace, so not hr. Best I came up with is a paragraph with a spacer img. That div is definitely better. – Marion Newlevant Nov 2 '14 at 17:27

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.