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>

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

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

我已经做到了。

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

我该怎么做？

以下是我的wordpress网站的Screenshot，您将了解到我想要的内容......

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>

输入密钥时AngularJS textarea换行符

1 个答案: