Question

我正在尝试使用AngularJS WebApp存储和接收HTML内容（通过HTML编辑器）。但是，代码显示为纯文本。

JSApp：

$scope.SkipValidation = function (value) {
    var decoded = $("#showtext").html(value).text();
    return $sce.trustAsHtml(decoded);
};
// Retrieving the object with the content
$scope.getTemplate = function () {
    $http({
        method: 'GET',
        url: 'api/template.php?id=' + $routeParams.id
    }).then(function (response) {
        $scope.template = response.data;
        var index = $scope.types.findIndex(x => x.name==$scope.template.type)
        $scope.selected = $scope.types[index];
        $scope.content = $scope.template.content;
        $("#templatebutton").hide();
        $("#newtemplateform :input").prop("disabled", true);
        $(".actions").show();
    }, function (response) {
        alert(response.data, response.status);
    });
};

最后是HTML

                    <div class="shown">
                        <div id="showtext" ng-bind-html="content"></div>
                    </div>

数据库中的代码存储方式如下：（在php中发布POST后）：

$template->content = htmlentities($_POST['content']);

我的数据库中的结果是：

&lt;b&gt;&lt;u&gt;&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;&lt;/u&gt;&lt;/b&gt;

更新 skipValidation（）方法开始工作！所以现在我的文字显示正确。

但是现在我在summernote textarea中获得了HTML标签，原因是：

$('$templatecontent').html($('.summernote').summernote("code",$scope.content));

如何显示带格式的文本而不是带有等标签的文本？

更新2：

仍然没有进展，但我尝试使用$ scope.content JSON_DECODE，我尝试使用Angular-Summernote但显然与我的版本（0.8.2）不兼容。

更新3：

我发现加载Summernote时调用以下函数是有效的;

var html = "<b>hello</b>";
 $('#templatecontent').summernote('code',html);

但是，使用正手加载的动态变量不起作用：

  var html = $scope.template.content;
     $('#templatecontent').summernote('code',html);

此代码的结果基本上是“ hello ”，如果它是$ scope.template.content的内容。它仍然无法正确呈现。

Answer 1

是。它可以使用ngSanitize呈现为正确的html。必须将其注入模块，如下所示。看看。

  angular.module('sanitizeExample', ['ngSanitize'])
           .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
             $scope.snippet =
               '<p style="color:blue">an html\n' +
               '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
               'snippet</p>';
             $scope.deliberatelyTrustDangerousSnippet = function() {
               return $sce.trustAsHtml($scope.snippet);
             };
           }]);

您可以详细了解here ..

如果我误解了你的问题，请纠正我。

更新

function htmlToPlaintext(text) {
  return text ? String(text).replace(/<[^>]+>/gm, '') : '';
}

用法：

var plain_text = htmlToPlaintext( your_html );

使用angular.js：

angular.module('myApp.filters', []).
  filter('htmlToPlaintext', function() {
    return function(text) {
      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
  }
);

使用：

<div>{{myText | htmlToPlaintext}}</div>

Answer 2

在原始帖子中，您可以找到我尝试显示HTML格式文本的一些工作，以及如何将相同的文本加载到summernote中，并可视化地呈现html标记。

经过几次尝试，我发现改变了

<textarea  class="form-control " id="templatecontent" name="content" ng-model="template.content"  style="resize:none;"></textarea>

到

<textarea  class="form-control " id="templatecontent" name="content" ng-bind-html="SkipValidation(template.content)"  style="resize:none;"></textarea>

（注意ng-bind-html）有效。我假设ng-bind-html指令仅用于在HTML元素中显示html格式的文本而不是summernote。但是，嘿，猜猜是什么.. Summernote存在于HTML元素之外（呃...）

感谢那些帮助过的人！

显示和编辑文本的完整代码是：

 <div class="editor">
                        <textarea  class="form-control " id="templatecontent" name="content" ng-bind-html="SkipValidation(template.content)"  style="resize:none;"></textarea>
                    </div>
                    <div class="shown">
                        <p ng-bind-html="SkipValidation(template.content)"></p>
                    </div>

使用AngularJS接收和存储HTML实体

2 个答案:

更新

使用angular.js：