1

我目前正在使用 Angular 1.1.5 开发一个项目。升级 Angular 目前不是一种选择。

我们想实现一个丰富的 HTML5 所见即所得编辑器，并决定尝试 Froala，因为它符合我们的要求，并且 angular-froala 的文档指出它应该适用于所有版本的 Angular >=1.0。

我在Plunker上做了一个使用 Angular 1.1.5 的 POC。

<!DOCTYPE html>

<!-- define angular app -->
<html ng-app="myApp">

<head>
  <script src="https://code.jquery.com/jquery-2.2.0.js"></script>

  <!-- Include Font Awesome. -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg=="
  crossorigin="anonymous">
  <!-- Include Froala Editor styles -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/froala_editor.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/froala_style.min.css" />

  <!-- Include Froala Editor Plugins styles -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/char_counter.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/code_view.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/colors.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/emoticons.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/file.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/fullscreen.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/image_manager.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/image.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/line_breaker.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/table.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/video.css">

  <!-- Include Froala Editor -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/froala_editor.min.js"></script>

  <!-- Include Froala Editor Plugins -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/align.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/char_counter.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/code_beautifier.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/code_view.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/colors.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/emoticons.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/entities.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/file.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/font_family.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/font_size.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/fullscreen.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/image.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/image_manager.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/inline_style.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/line_breaker.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/link.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/lists.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/paragraph_format.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/paragraph_style.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/quote.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/save.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/video.min.js"></script>
  <!-- End Froala -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js"></script>

  <script src="angular-froala.js"></script>
  <script src="app.js"></script>
  <link rel="stylesheet" href="app.css">
</head>

<!-- define angular controller -->

<body ng-controller="mainController">

  <div class="sample">
    <h2>Sample 2: Full Editor</h2>
    <textarea id="froala-sample-2" froala ng-model="sample2Text"></textarea>
    <h4>HTML Content:</h4> {{sample2Text}}
  </div>

</body>

</html>

除了最重要的部分数据绑定之外，一切似乎都运行良好。将 Angular 版本升级到 1.5.0 修复了 POC 中的问题。但如前所述，这不是我的选择。

这是一个错误吗？froala-angular 的文档是否已过时？除了升级 Angular 之外，还有其他解决方法吗？还是我只是在这里遗漏了什么？

4

2 回答 2

1

尝试在指令中使用 ngModel 时，此版本的 Angular 似乎存在问题。

https://github.com/angular/angular.js/issues/1924

当 ngModel 指令用于表示组件的元素（通过具有隔离作用域的指令实现）时，ngModel 被锁定在此隔离作用域中，为了退出并使 ngModel 有用，ngModel 表达式必须以 $parent 为前缀。

正如这个线程中所建议的，我尝试使用 $parent 前缀，并且可以注意到一种数据绑定查找位置的方式。

<textarea id="froala-sample-2" froala ng-model="$parent.sample2Text"></textarea>

为了让我的模型得到更新，我不得不在 froala 指令中调用 $apply() 来强制使用 $digest()。

ctrl.updateModelView = function () {
    var returnedHtml = element.froalaEditor('html.get');
    if (angular.isString(returnedHtml)) {
        scope.$apply(function() {
            ngModel.$setViewValue(returnedHtml);
        })
    }
};

我在 plunker 上更新了我的 POC，供那些希望看到它运行的人使用。

于 2016-02-10T10:19:33.823 回答
0

我知道这篇文章很旧，但对于任何寻求解决方案的人，我通过更改以下内容来解决问题：

<textarea froala="froalaOptions" ng-model="myHtml"></textarea>

对此：

<textarea froala="froalaOptions" ng-model="$parent.myHtml"></textarea>
于 2016-11-07T14:52:56.497 回答