的 kendo ui demos

Question

根据他们的演示网站上的示例，我尝试使用Kendo UI Editor实施Angular。到目前为止，它的效果非常好;

的 kendo ui demos

这是我到目前为止所做的，但我遇到的问题实际上是渲染编辑器内容的完全解析预览。当我使用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]));
            }
        };
    });
})();

的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>

Answer 1

你需要做两件事：

阻止编辑器对其值进行编码。

<textarea kendo-editor ng-model="html" k-encoded="false"></textarea>

避免使用kendo.htmlEncode，因为它会再次编码。

scope.$watch(attrs.kendoHtml, function() {
    element.html(scope[attrs.kendoHtml]);
});

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

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

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

的 kendo ui demos

jsBin

app.js

的HTML

1 个答案: