Enter键上的AngularJS textarea换行符

Question

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

这是我的试用代码：

index.html-

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

脚本.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);

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

我已经做到了这一点。

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

我怎么做？

这是我的 wordpress 网站的截图，你会知道我到底想要什么......

Answer 1

那是因为 textarea 中的换行符不是 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>