This directive allows you to add a TinyMCE editor to your form elements.
Apply the directive to your form elements:
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.
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
true (default value is
The directive supports all of the standard TinyMCE initialization options as listed here.
In addition, it supports these additional optional options
formatFormat to get content as, i.e.
rawfor raw HTML, or
textfor text only. Documentation here.
true, all TinyMCE content that is set to
ngModelwill be whitelisted by
modePreset 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:
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.
plugins: "link textcolor hr code"
plugins: "link textcolor hr table code image paste searchreplace fullscreen"
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: