使用 AngularJS 在编写页面中进行预览

Question

我想在我的写作页面中进行预览，就像在 Whosebug 问题写作中一样。

每次我在文本区域中按回车键，它都不会换行，而只是 space。

我不想在文本区域中键入 >br< 标记，而是想按回车键，因为它确实在预览区域中创建了一个新行。

请帮助我，谢谢。

这是我的代码

<html>
<script
 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>
<head>
<script>
 var app = angular.module("myApp", [ 'ngSanitize' ]);

 app.controller("myCtrl", function($scope) {
 });
</script>
</head>
<body>
 <div ng-app="myApp" ng-controller="myCtrl">
  <textarea ng-model="myText"></textarea>
  <p id="contentsPreview" ng-bind-html="myText"></p>
 </div>

</body>
</html>

Answer 1

可以用css

完成

#contentsPreview {
  white-space: pre;// or pre-line
}

否则使用函数或过滤器将 \n 替换为 <br>

$scope.n2br = function(str){
   return str.replace(/\n/g, '<br>')
}

使用 AngularJS 在编写页面中进行预览

Making preview in writing page using AngularJS

html

javascript

jsp

preview

angularjs