How to store and render paragraphs with line-breaks

help
1

I thought the html
would work but it did not and so i tried \n but that did not work ether. please help thanks

2

Use triple brackets like {{{this}}} when you want Blaze to render the content as HTML.

2 Likes
3

it did not work this is what was were the line break was to render {{{


}}}. any idea why

4

do you mean

< p >this is a < br >linebreak</ p>

?
without space (seems like the code tag is formatting html code)

if you have html code in the template via a helper use {{{helper}}} in the template to render the pure html so its breaking the paragraph with {{helper}} its just rendering the code itsself “< p >this is a< br >linebreak</ p>”.

and if you want answers that help you… please ask clear questions and give us some code. your question is not that clear.

5

thanks so how would i turn the string into a html <p></p>. how would i set up that helper

6

if you have a helper defined and its returning a string with HTML Code just use {{{helpername}}} so the string will be rendered as HTML.

if you still have issues please post your code

7

currently i am rendering just thru the html template and blaze. just <p>{{text}}</p>

8

so where is your problem? put your HTML code into the text helper and use 3 brackets {{{text}}}

9

The triple braces option works if you are storing the text as html. In that case you can display it as raw html using {{{text}}} but make sure you sanitize the user input with one of these https://atmospherejs.com/?q=sanitize

But if you are just storing text input from plain textarea or contenteditable you need to preserve the newline escapes. In that case you have two options (that I often use).

Convert newlines to paragraphs using javascript

meteor add yagni:split-on-newlines

{{#each splitOnNewlines text}}
  <p>{{this}}</p>
{{/each}}

More info here: https://atmospherejs.com/yagni/split-on-newlines

Of course you can also convert the input and store it as converted, but I usually like it better to store the original so that I can very easily populate a textarea for the user to be able to edit the content unaltered.

Use CSS the display the new lines as they should:

<div class="newlines">{{text}}</div>

.newlines {
  whitespace: pre-line;
}

What this does is render the contents so that it is formatted as is in terms of preserving the whitespace as they are stored, ie spaces as spaces, line breaks as line breaks just as it would have been displayed in a <pre> tag

1 Like
10

Replace new line to break line in js

var post = $('textarea[name="reply"]').val();
    post = post.replace(/\r?\n/g, '<br />');

Use triple braces to render output text

{{{reply}}}
1 Like