输入键上的AngularJS textarea换行符

Question

我正在开发一个 AngularJS 应用程序，就像我们在 stackoverflow 上发布答案和问题一样，我们可以在文本区域下方实时预览我们的答案或问题。

这是我的试用代码：

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);

当用户在文本区域中键入任何内容时，用户可以在<div ng-bind-html="myHTML"></div> 中看到他/她正在键入的内容的实时预览。 当用户键入任何 HTML 代码时，它将显示真实的 HTML 输出。

我已经做到了。

所以，我的问题是当用户在 textarea 中按下 enter key 时，newline 必须从 <div ng-bind-html="myHTML"></div> 开始。

我该怎么做？

这是我的 wordpress 网站的Screenshot，你会明白我到底想要什么...

Answer 1

那是因为文本区域中的换行符不是 HTML 换行符。您需要用以下内容替换它们：

$(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>