使用AngularJS设置WYMeditor的内容

2018-06-04 23:05:11

我的网页上有一个WYMeditor实例，我想用AngularJS控制文本的内容。

我尝试了几种方法，但都没有成功：

我们假设：

$scope.Details = 'foo';

并且它根据用户的不同行为而变化。

使用ng-model：

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

不起作用，因为当我修改细节时，实际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”，但我不知道如何做到这一点，似乎有一个更深层次的问题需要解决，就像那样。

谢谢！

WYMeditor需要一些时间来初始化。最好在postInit钩子中设置与它的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。

链接地址: http://www.djcxy.com/p/15917.html

上一篇: Setting WYMeditor's contents with AngularJS

下一篇: How to scale iframe content (embedded using a WYSIWYG editor)?