用AngularJS接收和存储HTML实体 - Receiving and storing HTML entities with AngularJS

我试图存储和接收HTML内容(通过HTML编辑器)与我的AngularJS WebApp。但是，代码显示为纯文本。

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

和结果在我的DB是:

&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()方法开始工作了!现在我的文本显示正确了。

但是现在我得到HTML标签在我的summernote textarea由于:

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

如何显示格式化的文本，而不是像等标签的文本?

更新2:

仍然没有进展，但是我尝试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);

如果这是$scope.template.content的内容，这段代码的结果基本上是"hello"。

是。它可以使用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);
             };
           }]);

您可以在这里获得更多详细信息…

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

更新

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

用法:

var plain_text = htmlToPlaintext( your_html );

With angular.js:

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

use:

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

在最初的帖子中，你可以找到一些我试图展示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>