How to configure tinymceOptions from angular-ui/ui-tinymce

Question

I have decided to use ui-tinymce(angular version of tinymce) for my blog. But I cannot find the documentation for the same. Will appreciate any resource or any suggestion on configuring tinymceOptions.

This is the git link - https://github.com/angular-ui/ui-tinymce

Answer 1

Assuming you have your angular app working and it is just a matter of configuring the editor, you can configure the editor with the same options that are documented for the non-angular, base TinyMce here: http://www.tinymce.com/wiki.php/configuration

If you click on a specific option, you will see how you can configure non-angular tinymce like so:

tinymce.init({
    resize: false
});

So to do the equivalent customization in angular with the ui-tinymce, instead of tinymce.init(), you would set the options inside of the scope variable $scope.tinymceOptions. So an example of configuring ui-tinymce to not allow user to resize, have a width/height of 400/300, allow print, and text color/background picker would be:

myAppModule.controller('MyController', function($scope) {
    $scope.tinymceOptions = {
        resize: false,
        width: 400,  // I *think* its a number and not '400' string
        height: 300,
        plugins: 'print textcolor',
        toolbar: "undo redo styleselect bold italic print forecolor backcolor"

    };
});

And your view could look something like this (note the tinymceOptions):

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

ui-tinymce should come with a number of built-in plugins, which you can find documentation on here: http://www.tinymce.com/wiki.php/Plugins

For a full list of toolbar options see: http://www.tinymce.com/wiki.php/Controls

From what I recall, you can not after the fact change the tinymceOptions. By that I mean, after the editor is loaded, if you want to later change some of $scope.tinymceOptions, those changes would not automatically be updated in the editor, because I believe the ui-tinymce code passes the options to tinymce.init() only once when it is loaded.

You can also do things like manually set the editor contents by using the plain tinyMce javascript hooks like:

tinyMCE.activeEditor.setContent('<h1>hello world</h1><p>this is my story.  the end.</p>');

Similarly, you can use getContent() see: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent But I believe you can also access the editor contents via the $scope.tinymceModel variable in this example. (the use case being, if you have an ng-click on a button to save the editor contents, then how do you get the editor contents…)

But the more angular way would be to do everything through the ng-model and scope variables instead of relying on the raw tinymce javascript api.

Hope that helps. In summary, ui-tinymce is a very thin wrapper around plain TinyMce. So anything you can do with the regular tinymce, you can for the most part do with the angular-ized version. I think this is why there isn't a whole lot of docs for customizing ui-tinymce, but this fact is not readily apparent to new beginners.