CODEWITHSUNDEEP
javascriptangularjs
Fleeck
Fleeck

Reputation: 1066

Textarea preview

I have a problem regarding textarea and text previewing. It doesn't recognize Enter button as a newline character. Any ideas how to make this previewing correctly?

enter image description here

EDIT :

enter image description here

I want this text automatically change line when it's not fitting instead of h-scroll.

Answer :

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Upvotes: 3

Views: 1052

Answers (2)

HaikelO
HaikelO

Reputation: 106

http://plnkr.co/edit/gZM1173PNweJzcBEutTw?p=preview

You need to use ngSanitize and allow you parameter to accept html entry with $sce.trustAsHtml();

html

<textarea ng-model="text" ng-change="change()"></textarea>
<p ng-bind-html='text'></p>

js

$scope.change = function(){ 

    $scope.text = $sce.trustAsHtml($scope.text);
}

css

{white-space: pre}

You'll be able to render and save your text with newline

Upvotes: 1

Mohammad Sayeed
Mohammad Sayeed

Reputation: 2145

You can use <pre> tag while printing text from textarea it will reflect all your new lines as it is entered text in textarea

Just use <pre> before content.e.g.

<pre> Text Content From text Area</pre>

Upvotes: 2

Related Questions