kendo编辑器如果我在angularjs中使用Table,则显示行

时间:2018-02-13 06:20:18

标签: angularjs kendo-ui kendo-editor

我使用kendo编辑器使用下面的代码显示html文件,但问题是当我在html中使用tabel时它会显示行。请在下面找到输出图像:

我只是想从表中删除一行。

enter image description here

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/editor/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>


</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>

<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
            <textarea kendo-editor k-ng-model="html"></textarea>

        <div class="box wide">
            <textarea ng-bind-html="html" style="width: 100%; height: 5em"></textarea>
        </div>
    </div>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives", "ngSanitize" ])
      .controller("MyCtrl", function($scope){
         $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>\n" +
           "<table ><tr><td><strong>Test1 </strong></td></tr>" + 
         "<table ><tr><td><strong>Test2</strong></td></tr>" ;
      })
</script>


</body>
</html>

1 个答案:

答案 0 :(得分:0)

您不应该为每一行使用table标记。

试试这个:

$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>\n" +
    "<table><tr><td><strong>Test1 </strong></td></tr>" + 
    "<tr><td><strong>Test2</strong></td></tr></table>" ;