CODEWITHSUNDEEP
javascriptjqueryangularjs
Mac
Mac

Reputation: 13

AngularJS textarea newline on enter key

I am developing an AngularJS application same like how we post answers and questions on stackoverflow and we get live preview of our answers or question just below the textarea.

Here is my trial code:

index.html-

<div ng-app="bindHtmlExample" ng-controller="ExampleController">
        <textarea ng-model="myHTML"></textarea>
        <div ng-bind-html="myHTML"></div>
</div>

script.js-

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML =
       'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>';
  }]);
})(window.angular);

When user types anything in the textarea, user can see live preview of what he/she is typing in the <div ng-bind-html="myHTML"></div>. When user types any HTML code, it will show real HTML output.

I have done upto this.

So, my problem is when user presses enter key in textarea, newline must get started in <div ng-bind-html="myHTML"></div>.

How do I do that?

Here is the Screenshot of my wordpress website, you will get an idea what exactly I want...

Upvotes: 1

Views: 3736

Answers (1)

Moe Khalil
Moe Khalil

Reputation: 64

Thats because newlines in the textarea are not HTML line breaks. You need to replace them with something like this:

$(document).ready(function() {
  var pad = $('#pad');
  var board = $('#board');

  pad.keypress(function(event) {
    board.html(pad.val().replace(/\r?\n/g, '<br />'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="pad"></textarea>
<div id="board"></div>

Upvotes: 3

Related Questions