angular-ui / ui-tinymce

AngularUI wrapper for TinyMCE
MIT License
488 stars 371 forks source link

I can't create a TinyMCE on demand multiple times #322

Open JulienLaclaverie opened 7 years ago

JulienLaclaverie commented 7 years ago

Hello,

I need some guidance here, I'm trying to load a page with multiple text-area on it, but only load the tinyMCE on a specifyed textarea when it's needed.

To do so, TinyMCE gives access to this function : tinymce.execCommand('mceAddEditor',false,'MyTextareaId');

But to use execCommand with ui-tinymce works just once, I have this :

vm.tinymceOptions = {
      setup: function(div) {
            tinymce.execCommand('mceAddEditor',false,div);
      }
 }

function putEditor(id){
    vm.tinymceOptions.setup( document.getElementById(id) );
}

So this works, but only once and I can have 1 to 15 textarea to maybe change into a tinymce. How can I do this dynamically, is this even possible with ui-tinymce ?

ionutanin commented 7 years ago

any update here? I get Uncaught TypeError: pe[a].exec is not a function when trying to use multiple instances of tinymce

snthamel commented 6 years ago

Instead of using the execCommand, I was able to do this using init and remove options, as follows.

var tinymceOptions = {
    plugins: 'lists advlist link paste autolink',
    toolbar: 'fontselect fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright | bullist numlist | link',
    menubar: false,
    branding: false,
    paste_data_images: false,
    isLoaded: false,
};

function initTinyMCE(inputTagId){
    var tinymce_options = tinymceOptions;
    tinymce_options.selector = '#' + inputTagId;
    tinymce.init(tinymce_options);
}

function removeTinyMCE(inputTagId){
    tinymce.remove('#' + inputTagId);
}

Note that I am using the selector option instead the setup option to set the exact DOM element which I need to be initiated as a TinyMCE editor. Hope this helps.