tinyMce not initialized upon second visit to angular partial view

Question

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"});
}]);

Answer 1

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

Answer 2

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.com/angular-ui/ui-tinymce

Answer 3

在路由时更改textarea的id，强制tiny-mce angular模块刷新并重新创建编辑器。