How to change angular tinymce editor's localization dynamically?

1.3k Views Asked by At

I am using angular-ui-tinymce with tinymce ver 4.5.6 I am trying to change the localization of editor dynamically. for localization I use angular-translate However i am not able to do it.

I try to achieve it like this

JS

var tinymce=null;
vm.tinymceOptions = {
   setup: function(editor) {
        tinymce = editor;
   },
   content_css: "vendor/tinymce/angular-ui-tinymce/skins/lightgray/content.min.css",
   language: $translate.proposedLanguage(),
   //more options here
}

//To get localization change
$rootScope.$on('$translateChangeSuccess', function () {
    if(tinymce!=null)
        tinymce.execCommand('mceRepaint'); //This doesn't reflect any changes
});

And here is the HTML:

<form method="post" ng-show="vm.editMode">
     <textarea ui-tinymce="vm.tinymceOptions" ng-model="vm.editorContent"></textarea>
</form>

After refreshing the page, editor's language changes.

2

There are 2 best solutions below

0
On BEST ANSWER

This is how i solved it.

 $rootScope.$on('$translateChangeSuccess', function () {
    if(tinymce!=null){
        vm.tinymceOptions.language=$translate.proposedLanguage();
        tinymce.editorManager.editors = [];
        tinymce.editorManager.createEditor("ui-tinymce-1",vm.tinymceOptions);
        tinymce.init(vm.tinymceOptions);
    }
});
0
On

TinyMCE does not support dynamically changing the language/localization after the editor is initialized.

You can remove() and init() the editor with different language settings but once initialized that setting cannot be changed.