UI.Tinymce directive

This directive allows you to add a TinyMCE editor to your form elements.

Usage

Apply the directive to your form elements:

<form method="post">
  <textarea ui-tinymce ng-model="tinymceModel"></textarea>
</form>

Be sure not to set an id attribute. This is because the directive needs to maintain selector knowledge in order to handle buggy behavior in TinyMCE when DOM manipulation is involved, such as in a reordering of HTML through ng-repeat or DOM destruction/recreation through ng-if.

Working with ng-model

The ui-tinymce directive plays nicely with the ng-model directive such as ng-required.

If you add the ng-model directive to same the element as ui-tinymce then the text in the editor is automatically synchronized with the model value.

The ui-tinymce directive stores the configuration options as specified in the TinyMCE documentation and expects the model value to be a html string or raw text, depending on whether raw is true (default value is false).

Options

The directive supports all of the standard TinyMCE initialization options as listed here.

In addition, it supports these additional optional options

• format Format to get content as, i.e. raw for raw HTML, or text for text only. Documentation here.
• trusted When true, all TinyMCE content that is set to ngModel will be whitelisted by $sce.
• mode Preset options for toolbar and plugin controls. We strongly encourage you to use one of these preset modes so that users of your plugin will have a consistent experience with other editors in the app. Two modes are available: basic or advanced. If a mode is not set it will default to basic. Check the table below for a complete list of toolbar controls set for each mode. If you wish to customize the set of plugins/toolbars, do not specify a mode. You may use the listings below as a baseline for your options.

myAppModule.controller('MyController', function($scope) {
  $scope.tinymceOptions = {
    onChange: function(e) {
      // put logic here for keypress and cut/paste changes
    },
    inline: false,
    plugins : 'advlist autolink link image lists charmap print preview',
    toolbar: 'bold italic | forecolor backcolor | alignleft aligncenter alignright | print preview'
  };
});

<form method="post">
  <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
</form>

Troubleshooting

If you are conditionally hiding/showing the TinyMCE editor you may run into an issue where the editor’s contents aren’t updating to reflect ng-model changes. In that case you can fix it by calling:

$scope.$broadcast('$tinymce:refresh');