Question

我的页面上有一个WYMeditor实例，我想使用AngularJS来控制文本内部的值。

我尝试过的几种方法都没有用过：

我们假设：

$scope.Details = 'foo';

并且它会根据不同的用户操作而改变。

使用ng-model：
```
<textarea ng-model="Details" class="wymeditor"></textarea>
```
不起作用，因为当我修改Details时，实际textarea的内容会发生变化，但它是隐藏的，属于WYMeditor的内部iFrame的内容不会改变。
在我的Angular控制器中使用WYMeditor的html（）函数：
```
wym = jQuery.wymeditors(0);
wym.html($scope.Details);
```
这将返回一条引用WYMeditor的html（）函数声明的错误消息。
```
Error: this._doc is undefined
```

我正在使用WYMeditor 0.5，Angular 1.1.5，jQuery 2.0.3和jQuery-migrate 1.2.1（WYMeditor使用jQuery 2）。

我想到了以某种方式在iFrame声明中添加ng-model =“Details”，但我不知道如何做到这一点，并且似乎有一个更深层次的问题需要解决这个问题。

谢谢！

Answer 1

WYMeditor需要一些时间来初始化。最好在postInit钩子中设置与它的交互。

angular.module('myApp')
  .directive('wymeditor', ($log, $parse) ->
    scope:
      ngModel: '='
    restrict: 'C'
    link: (scope, element, attrs) ->
      $log.debug 'Initializing WYMeditor', attrs.wymOptions
      options = $parse(attrs.wymOptions)()
      options.postInit = (wym) ->
        # we need to wait till editor is ready to interact with it
        scope.$watch 'ngModel', (newVal, oldVal) ->
          $log.debug 'ngModel Changed, refreshing editor....'
          wym._html(scope.ngModel)

      element.wymeditor( options )

  )

然后您可以使用以下内容设置WYMeditor：

<textarea
  class="wymeditor"
  wym-options="{
    skin: 'seamless',
    iframeHtml: WYMeditor.SKINS.seamless.OPTS.iframeHtml,
    logoHtml: ''
  }"
  ng-model="someVar"
  ></textarea>

请注意，以上内容并未填充模型。 WYMeditor没有提供检测变化的方法。最可靠的方法是每隔几秒轮询一次更改。请改为textAngular。

使用AngularJS设置WYMeditor的内容

1 个答案: