Summernote 插入动态 HTML

Question

我有一个名为 $scope.selectedTemplate 的变量。此变量包含 HTML 文本，本质上是从 select 列表中提取的，列表中充满了具有此 "content" 文本的对象。

然后我尝试使用一个在第一次执行时有效但在 selectedTemplate 变量更改时无效的函数将内容获取到我的 summernote 编辑器。当我在 HTML p 元素中使用相同的函数（使用 ng-bind-html）时，会显示动态 selectedTemplate 内容。

这个有效：

<div class="shown">
    <p id="templateshow" ng-bind-html="SkipValidation(selectedTemplate)"></p>
</div>

这不是：

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

AngularJS:

 $scope.SkipValidation = function (value) {
    var decoded = $("<p/>").html(value).text();
    return $sce.trustAsHtml(decoded);
};

总结

如何使用 ng-bind-html 和 SkipValidation 方法动态更改 Summernote 编辑器的 HTML 格式内容？

更新 1：

尝试使用手表处理 selectedTemplate 的更改正在使用以下代码：

$scope.$watch('selectedTemplate', function() {
    if($scope.selectedTemplate != ""){
       $("#templatecontent").summernote('code',"<b>Hello</b>");    
    }
});

但是，这是输出 Hello.

的手动和静态文本

不幸的是，使用此代码不起作用：

$scope.$watch('selectedTemplate', function() {
    if($scope.selectedTemplate != ""){
        $("#templatecontent").summernote('code',$scope.SkipValidation($scope.selectedTemplate));    
    }
});

Answer 1

angular.module('app', [])

.controller('ctrl', ['$scope',
  function($scope) {
    $scope.sourceCodes = [
      {name: 'template 1', code: '<p>template 1<br></p>'},
      {name: 'template 2', code: '<p>template 2<br></p>'},
    ];
    
    $scope.$watch('selectedTemplate', function(n, o){
      if(n < 0 || n == undefined) return;
      $('#summernote').summernote('destroy');
      $('#summernote')
        .val($scope.sourceCodes[n].code)
        .summernote();
    })
      
    $('#summernote').summernote();
  }
])

select {
  margin: 30px !important;
  display: block;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <!-- include libraries(jQuery, bootstrap) -->
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

  <!-- include summernote css/js-->
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
</head>

<body ng-controller="ctrl">
  <select ng-model="selectedTemplate">
    <option value="-1">Please Selecte Template</option>
    <option ng-repeat="code in sourceCodes" value="{{ $index }}">{{ code.name }}
      <option>
  </select>

  <textarea id="summernote" name=""></textarea>
</body>

</html>

Summernote 插入动态 HTML

Summernote insert dynamic HTML

html

jquery

angularjs

summernote