I'm using tinyMce (the native one, not the angular ui directive)with my angular app. The text area which tinyMce converts to an html editor is located in a partial view (i'm using angular route). The problem is that the first time the app visits the partial view everything is ok, however the next times the user chooses this view the text are is not converted to tinyMce editor.

So my question is how do I make tinyMce initialization code hit each time the user visits the partial?

I saw similiar questions but didn't understand any of the solutions....

Here is my init tinyMCE code which is located in the controller of the partial view:

angular.module('sam').controller('groupMailController', ['$http', '$log', '$routeParams', 'User', function($http, $log, $routeParams, User) {
    tmp = this;
    //a factory which passes paramteres cross controllers
    this.user = User;
    //get list of building objects
    this.availableBuildings = _.values(this.user.buildings);

    $log.log('init meee !!');
    tinymce.init(
        {selector:'textarea',
        directionality : 'rtl',
        plugins: ["advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste directionality"], 
        toolbar: "undo redo | styleselect | bold italic | link image | alignleft aligncenter alignright | ltr rtl"});
}]);

I'm using tinyMce (the native one, not the angular ui directive)with my angular app. The text area which tinyMce converts to an html editor is located in a partial view (i'm using angular route). The problem is that the first time the app visits the partial view everything is ok, however the next times the user chooses this view the text are is not converted to tinyMce editor.

So my question is how do I make tinyMce initialization code hit each time the user visits the partial?

I saw similiar questions but didn't understand any of the solutions....

Here is my init tinyMCE code which is located in the controller of the partial view:

angular.module('sam').controller('groupMailController', ['$http', '$log', '$routeParams', 'User', function($http, $log, $routeParams, User) {
    tmp = this;
    //a factory which passes paramteres cross controllers
    this.user = User;
    //get list of building objects
    this.availableBuildings = _.values(this.user.buildings);

    $log.log('init meee !!');
    tinymce.init(
        {selector:'textarea',
        directionality : 'rtl',
        plugins: ["advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste directionality"], 
        toolbar: "undo redo | styleselect | bold italic | link image | alignleft aligncenter alignright | ltr rtl"});
}]);

• javascript
• angularjs
• tinymce
• angular-routing

Share Improve this question Follow edited Aug 28, 2014 at 11:10 omer bach asked Aug 28, 2014 at 8:21 omer bachomer bach 2,40555 gold badges3535 silver badges4646 bronze badges 1

• I'm having the same problem. Do you at least have a link to the other solutions you mentioned? – Bob Vork Commented Mar 4, 2015 at 13:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can remove the current active editor before calling init().

if (tinyMCE.activeEditor != null)
  tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'myTextArea');

tinymce.init({
  selector: "#myTextArea"
});

Or you can use TinyMCE Angular plugin. Here is the info : https://github./angular-ui/ui-tinymce

This is a late answer for those who may have the same issue. The problem is that tinymce is still keeping the old instance of the editor and initializing it again won't work. So the solution consist of deleting that instance on scope destroy event.

  $scope.$on('$destroy', function() {
    var tinyInstance = tinymce.get('#myTextArea');

    if (tinyInstance) {
      tinyInstance.remove();
      tinyInstance = null;
    }
});

Hope this will help

Changing the textarea's id when routing, forces the tiny-mce angular module to refresh and re-create the editor.