Summernote insert dynamic HTML

$ scope.selectedTemplateという変数があります。この変数はHTMLテキストを含み、本質的には、この「内容」テキストを有するオブジェクトで満たされた選択リストから引き出される。Summernote insert dynamic 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形式のコンテンツを動的に変更するにはどうすればよいですか？

は、時計を使用してselectedTemplateの変更を処理しようとすると、次のコードで作業されています：アップデート1は

$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のテキストエリアにはまだコンテンツが入力されていません。 – Kraishan

Summernote insert dynamic HTML

答えて

関連する問題