Question

我正在尝试使用AngularJS编辑和比较Word文件。我能够在iframe中加载Word文件。我无法使用ng-model编辑和比较Word文件。

我可以使用ng-model绑定iframe吗？

这是我在做什么。

<!DOCTYPE html>
<html lang="en" id="ng-app" ng-app="diffDemo">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Different Test</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js"></script>
    <script src="//neil.fraser.name/software/diff_match_patch/svn/trunk/javascript/diff_match_patch.js"></script>
    <script src="angular-diff-match-patch.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="../lib/codemirror.js"></script>
        <script src="../mode/xml/xml.js"></script>
        <script src="../mode/css/css.js"></script>
        <script src="../mode/javascript/javascript.js"></script>
        <script src="../mode/htmlmixed/htmlmixed.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
        <script src="../addon/merge/merge.js"></script>
    <script>
        var app = angular.module('diffDemo', ['ui.bootstrap','diff-match-patch']);
        app.controller('diffCtrl', function($scope) {
            $scope.left = ["TEST TEXT"].join('\n');

            $scope.right = ["TES TEX"].join('\n');
    </script>
    <style>
        pre.textdiff {
        word-break: normal;
        word-wrap: normal;
        }

        .match, .textdiff span {
            color: gray;
        }

        .ins, ins {
            color: black;
            background: #bbffbb;
        }

        .del, del {
            color: black;
            background: #ffbbbb;
        }

        .noselect {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        div.col-md-6 p textarea.inputBox {
            height: 120px;
        }
        .doc {
    width: 100%;
    height: 500px;
            }
    </style>
  </head>

  <body ng-controller="diffCtrl">
    <div class="container-fluid">
      <div class="row text-center">
        <h1>TEST Difference</h1>
      </div>
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
               <div class="col-md-6">
              <iframe ng-model="left" class="doc" ng-model="left" ng-src="https://docs.google.com/document/d/1XjS6K3O4uGbr8HM5AW2JHex9lI-FPcipLrlm8i4aD6I/edit?usp=sharing&embedded=true"></iframe>
               </div>
               <div class="col-md-6">   
              <iframe ng-model="right" class="doc" ng-model="right" ng-src="https://docs.google.com/document/d/1XjS6K3O4uGbr8HM5AW2JHex9lI-FPcipLrlm8i4aD6I/edit?usp=sharing&embedded=true"></iframe>
               </div>      
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-body">
              <pre class="textdiff" diff="" left-obj="left" right-obj="right"></pre>
            </div>
            <div class="panel-footer">diff</div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-body">
              <pre class="textdiff" processing-diff="" left-obj="left" right-obj="right"></pre>
            </div>
            <div class="panel-footer">processingDiff</div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-body">
              <pre class="textdiff" semantic-diff="" left-obj="left" right-obj="right"></pre>
            </div>
            <div class="panel-footer">semanticDiff</div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-body">
              <pre class="textdiff" line-diff="" left-obj="left" right-obj="right"></pre>
            </div>
            <div class="panel-footer">lineDiff</div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

我没有发布'diff-match-patch'指令文件。我可以在iframe中使用本地docx文件吗？另外，当插入不同的来源时，我的两个iframe也没有显示不同的文件。

在AngularJS中编辑iframe word文档

0 个答案: