TinyMce not initializing on second visit to angular partial view
I am using tinyMce (native, not angular ui directive) with my angular app. The text area that converts tinyMce to html editor is in partial view (I'm using angular route). The problem is that the first time you visit the app, the partial view is fine, however the next time the user selects that view, the text is not converted to tinyMce editor.
So my question is, how do I make the tinyMce initialize code every time a user visits a partial?
I've seen similar questions but didn't understand any of the solutions.
Here is my init tinyMCE code, which is in the partial view controller:
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"});
}]);
source to share
This is a late answer for those who may have the same problem. The problem is that tinymce is still keeping the old editor instance and initializing it won't work again. So the solution is to delete this instance for area destruction.
$scope.$on('$destroy', function() {
var tinyInstance = tinymce.get('#myTextArea');
if (tinyInstance) {
tinyInstance.remove();
tinyInstance = null;
}
});
Hope this helps
source to share
You can remove the currently active editor before calling init ().
if (tinyMCE.activeEditor != null)
tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'myTextArea');
tinymce.init({
selector: "#myTextArea"
});
Or you can use the TinyMCE Angular plugin. Here is the info: https://github.com/angular-ui/ui-tinymce
source to share