Setting WYMeditor's contents with AngularJS

Question

I've got a WYMeditor instance on my page, and I'd like to control the value of the text inside using AngularJS.

Several methods I've tried and non worked:

Let's assume:

$scope.Details = 'foo';

and it's changing depending on different user actions.

1. Using ng-model:

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

   doesn't work, as when I modify Details, the contents of the actual textarea changes, but it's hidden, and the contents of the inner iFrame that belongs to WYMeditor don't change.

2. Using WYMeditor's html() function inside my Angular controller:

   wym = jQuery.wymeditors(0);
   wym.html($scope.Details);
   

   This returns an error message referring to WYMeditor's html() function declaration.

   Error: this._doc is undefined
   

I'm Using WYMeditor 0.5, Angular 1.1.5, jQuery 2.0.3 and jQuery-migrate 1.2.1 (for WYMeditor to function with jQuery 2).

I thought of somehow adding ng-model="Details" to the iFrame declaration, but I have no idea on how to do that, and it seems like there's a deeper issue to resolve here that working around like that.

Thanks!

Answer 1

WYMeditor takes some time to initialize. It's best to setup interactions with it in the postInit hook.

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 )

  )

You then setup WYMeditor with something like this:

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

Please note that the above does not populate the model back. WYMeditor doesn't provide a way to detect changes. The most reliable way is to poll for changes every few seconds. Check out textAngular instead.