summernote 동적 HTML 삽입

$ scope.selectedTemplate이라는 변수가 있습니다. 이 변수는 HTML 텍스트를 포함하며 본질적으로이 "content"텍스트가있는 객체로 채워진 선택 목록에서 가져옵니다.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 형식의 컨텐츠를 동적으로 변경할 수 있습니까? 다음 코드로 작동하는 시계를 사용 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

답변

관련 문제