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