15

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

Abhishek Prakash
  • 201
  • 1
  • 3
  • 11
  • I've done this before--let me see if I can whip up an example. Sadly I found the documentation lacking so it took some trial and error. – jCuga Feb 23 '14 at 16:55

2 Answers2

28

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.

jCuga
  • 1,523
  • 3
  • 16
  • 28
  • Thanks jCuga, it helped a lot. – Abhishek Prakash Feb 23 '14 at 19:07
  • What if I need to remove the TinyMCE editor? Is it possible to do it from the controller, somehow? – ilter Apr 10 '15 at 15:11
  • This was not in the docs -> ui-tinymce="tinymceOptions". It took me quite a while to figure out why the options I set were not reflecting on the editor. Thank you so much. – Strategist Dec 03 '15 at 23:34
  • For the height option, you cannot have the autoresize plugin enabled. I struggled with this for a bit. – aoakeson Sep 20 '16 at 19:00
  • @jCuga i am having cursor issues as i start typing, it put the cursor at first character in first line.. as i thing it happens becuase of $scope.apply for two way binding but couldn't resolve it.. do u find any alternatives for this – sandeep_kosta Apr 10 '17 at 08:48
1

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.

Nick A. Watts
  • 819
  • 10
  • 16