文章/答案/技术大牛

发布

社区首页 >问答首页 >用角显示Kendo编辑器的HTML预览

问用角显示Kendo编辑器的HTML预览
EN

Stack Overflow用户

提问于 2014-07-29 18:25:05

回答 1查看 4.8K关注 0票数 2

根据演示网站上的示例，我尝试用Kendo UI Editor实现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]));
            }
        };
    });
})();

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>

angularjs

kendo-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-31 07:45:54

你需要做两件事：

阻止编辑器对其值进行编码。
避免使用kendo.htmlEncode，因为它会再次对其进行编码。作用域.$watch(attrs.kendoHtml，function() { element.html(scopeattrs.kendoHtml)；})；

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

您还可以使用ng-bind来避免使用自定义指令：http://jsbin.com/kamenoju/1/edit。一旦您将encoded选项设置为false，它将如预期的那样工作。

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25022404

复制

相似问题

问用角显示Kendo编辑器的HTML预览
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用角显示Kendo编辑器的HTML预览EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用角显示Kendo编辑器的HTML预览
EN