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 con

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.

Answer 2

Even though jCuga provided a very helpful explanation, I still couldn't get a customized setup to work. The TinyMCE editor would load but with default settings. It appears that others are having a similar problem, which is logged as issue #158 for the ui-tinymce directive project. The main problem for me seems to be that since I defined the setup options in an Angular controller as the docs suggest, the default tinymceOptions variable never gets overwritten because my controller is never loaded. I solved this by simply referencing the controller as such:

<textarea ui-tinymce="tinymceOptions" ng-controller="RichTextCtrl"></textarea>

Once I added the ng-controller reference, my custom settings were used instead of the default settings.