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));  
    } 
});

來源

2016-11-22 Kraishan

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>

來源

2016-11-22 14:13:58 sqlProvider

這並不與HTML內容的工作，也與方式Summernote啓動其自身。 – Kraishan

對不起兄弟，我誤解了。我用正確的一個替換了它。 – sqlProvider

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

Summernote插入動態HTML

回答

相關問題