是否可以动态生成angular-ui tinymce编辑器的选项？

Question

I am using tinymce editor through the ui-tinymce Angular directive.

<textarea ui-tinymce="tinymceOptions" ng-model="email.body"></textarea>

I can't initialise the editor with the content_css option set to a value which is obtained from an XHR request because the link function of the directive is called before the callback of the XHR request. As a consequence of this, the options are not passed to the directive.

Template.get({ id: $routeParams.id }, function(response) {
  $scope.template = response.attributes;

  $scope.tinymceOptions = {
      inline: false,
      plugins : 'code importcss preview code',
      skin: 'lightgray',
      theme : 'modern',
      content_css: $scope.template.content_css
    };
});

If I broadcast a $tinymce:refresh event after initialising the options, the editor gets re-initialised with the new options, but the old editor is not removed.

I a have little experience in angular directives, is it possible to watch changes in the options and reflect them in the editor?

Answer 1

You can wait for the options you load asynchronously and display the editor only after you got them. Proof of concept:

View:

<div ng-controller="MyCtrl">
    <div ng-if="!tinymceOptions">Please wait, we're initliazing editor for you!</div>
    <div ng-if="tinymceOptions">
        <textarea ui-tinymce="tinymceOptions" ng-model="email.body"></textarea>
    </div>
</div>

And controller:

module.controller('MyCtrl', function($scope) {
    Template.get({ id: $routeParams.id }, function(response) {
        // your code here
    });
});