1

我正在使用 textAngular 和 angular。在我的应用程序中，用户可以编写 html 代码并进行预览。它使用 iframe 正确预览，但我注意到在将其显示到 textAngular 编辑器之前，角度会去除<html>和标记。<head>如何防止 Angular 这样做？

这是我在 plunkr 中的代码：http ://plnkr.co/edit/W1YjV9qO3kzeBQbdgSKf?p=preview

请注意，editor( $scope.orightml) 的内容以开头，<!DOCTYPE html><html><head><link rel="stylesheet" ....但是当我单击切换 html 按钮（带有</>图标的按钮）时，只剩<div class="alert alert-success">Hello World</div>下一个。我想展示全部内容。我不想删除任何标签。怎么做？

对不起，我的英语不好。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,300">
  <style>
    .ta-editor {
      min-height: 300px;
      height: auto;
      overflow: auto;
      font-family: inherit;
      font-size: 100%;
    }
  </style>

  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js'></script>

  <script src='http://textangular.com/dist/textAngular-rangy.min.js'></script>

  <script src='http://textangular.com/dist/textAngular-sanitize.min.js'></script>

  <script src='http://textangular.com/dist/textAngular.min.js'></script>

</head>

<body>
  <div ng-app="textAngularTest" ng-controller="wysiwygeditor" class="container app">
    <h1>Editor</h1>
    <button ng-click="disabled = !disabled" unselectable>Disable text-angular Toggle</button>
    <div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled='disabled'></div>
  </div>
  <script>
    angular.module("textAngularTest", ['textAngular']).controller('wysiwygeditor', function wysiwygeditor($scope) {
      $scope.orightml = '<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/></head><body><div class="alert alert-success" role="alert">Hello World</div></body></html>';
      $scope.htmlcontent = $scope.orightml;
      $scope.disabled = false;
    });
  </script>
</body>

</html>
4

0 回答 0