0

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

我尝试过但无效的几种方法：

让我们假设：

$scope.Details = 'foo';

它会根据不同的用户操作而变化。

  1. 使用 ng 模型：

    <textarea ng-model="Details" class="wymeditor"></textarea>

    不起作用，因为当我修改Details时，实际textarea的内容会发生变化，但它是隐藏的，并且属于WYMeditor的内部iFrame的内容不会改变。

  2. 在我的 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 一起工作）。

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

谢谢！

4

1 回答 1

0

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。

于 2013-11-07T22:38:41.767 回答