使用Angular从Kendo编辑器渲染HTML预览

Question

使用Angular从Kendo编辑器渲染HTML预览

我试图按照他们的演示网站上的示例实现Kendo UI Editorwith Angular.到目前为止它运作良好;

kendo ui演示

这是我到目前为止所拥有的,但我遇到的问题实际上是渲染完全解析的编辑器内容预览.当我使用时ng-bind-html,它在页面首次加载时起作用,但随后的任何后续编辑都会在其中加入HTML.我认为答案是使用kendo.htmlEncode,但这也不起作用.我不太喜欢这个,就像我想的那样......

我准备了一个jsBin来显示出错的地方,并在此处发布我的代码以供审核.

jsBin

app.js

(function(){
    var app = angular.module("kendoDemos", [ 'kendo.directives', 'ngSanitize' ]);
    app.controller('EditorController', function($scope, $sce){
        $scope.html = "<h1>Kendo Editor</h1>\n\n" +
            "<p>Note that 'change' is triggered when the editor loses focus.\n" +
            "<br /> That's when the Angular scope gets updated.</p>";
    });
    app.directive('kendoHtml', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                return element.html(kendo.htmlEncode(scope[attrs.kendoHtml]));
            }
        };
    });
})();

Run Code Online (Sandbox Code Playgroud)

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/kendo.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/angular.sanitize.js"></script>
    <script type="text/javascript" src="js/kendo.js"></script>

    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <div ng-app="kendoDemos">
        <div ng-controller="EditorController" class="container">
            <h2>Kendo Editor</h2>
            <textarea kendo-editor ng-model="html"></textarea>
            <h3>Kendo Editor Preview</h3>
            <blockquote kendo-html="html"></blockquote>
        </div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ata*_*hev 7

你需要做两件事:

阻止编辑器对其值进行编码.
```
<textarea kendo-editor ng-model="html" k-encoded="false"></textarea>
```
Run Code Online (Sandbox Code Playgroud)
避免使用kendo.htmlEncode,因为它会再次编码.
```
scope.$watch(attrs.kendoHtml, function() {
    element.html(scope[attrs.kendoHtml]);
});
```
Run Code Online (Sandbox Code Playgroud)

这是更新的jsbin:http://jsbin.com/bibecima/1/edit

您还可以使用ng-bind-html来避免需要自定义指令:http://jsbin.com/kamenoju/1/edit.一旦您将encoded选项设置为,它将按预期工作false.

归档时间：	11 年，5 月前
查看次数：	3999 次
最近记录：	11 年，5 月前