Summernote插入动态HTML

问题描述：

我有一个名为$ scope.selectedTemplate的变量。这个变量包含HTML文本，并且基本上从充满了具有这个“内容”文本的对象的选择列表中拉出。Summernote插入动态HTML

我试图然后使用一个函数，当执行第一次，但不是当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>");  
    } 
});

然而，这是一个输出你好手工和静态文本。

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

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

答

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启动其自身。 – Kraishan

对不起兄弟，我误解了。我用正确的一个替换了它。 – sqlProvider

不幸的是，Summernote的textarea仍然没有填充内容。 – Kraishan

Summernote插入动态HTML

相关推荐