Summernote 插入动态 HTML答案

【问题标题】：Summernote insert dynamic HTMLSummernote 插入动态 HTML
【发布时间】：2017-04-06 06:02:28
【问题描述】：

我有一个名为 $scope.selectedTemplate 的变量。此变量包含 HTML 文本，本质上是从一个选择列表中提取的，该列表中填充了具有此“内容”文本的对象。

我正在尝试使用一个在第一次执行时有效的函数将内容发送到我的 Summernote 编辑器，但在更改 selectedTemplate 变量时无效。当我在 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));    
    }
});

【问题讨论】：

标签： jquery html angularjs summernote

【解决方案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>

【讨论】：

这不适用于 HTML 内容，也不适用于 Summernote 启动自身的方式。
对不起兄弟，我误会了。我把它换成了正确的。
很遗憾，Summernote 的文本区域仍未填充内容。
我通过包含 Summernote 进行了安排。我希望它对你有用。