CODEWITHSUNDEEP
jqueryajaxtinymce-4
dpDesignz
dpDesignz

Reputation: 1959

Reinitialize TinyMCE 4 in AJAX

I'm using TinyMCE in an ajax enabled Foundation Reveal box. Now the TinyMCE kicks in the first time it loads, but if I close the box and open it again it doesn't trigger :(

I have other scripts like chosen and masked input triggered in the exact same fore query that work, but TinyMCE will not reinitialize when I reload it a second time

This is my code currently that I'm trying as recommended at this question:

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
    $("#expenseUser, #expenseVendorID, #expenseCategoryID, #expenseAccidentID").chosen({disable_search_threshold: 5, width: '365px'});
    $("#expOdo").mask("999999",{placeholder:"0"});
    $('.datePicker').each(function() {
        $(this).datetimepicker({
            addSliderAccess: true,
            sliderAccessArgs: {touchonly: false},
            changeMonth: true,
            changeYear: true,
            altField: "#"+$(this).attr('id')+"Alt",
            altFieldTimeOnly: false,
            altFormat: "yy-mm-dd",
            altTimeFormat : "HH:mm:ss",
            dateFormat: "D, d MM yy",
            timeFormat: "hh:mmtt"
        });
    });
    tinymce.execCommand('mceRemoveEditor',true,"textarea#expenseComments");
    tinymce.execCommand('mceAddEditor',true,"textarea#expenseComments");
    tinyMCE.init({selector: "textarea#expenseComments",menubar : false,toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright"});
});

UPDATED

I've tried changing to the following with luck, but I think this is the right path to go down?

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
    $("#expenseUser, #expenseVendorID, #expenseCategoryID, #expenseAccidentID").chosen({disable_search_threshold: 5, width: '365px'});
    $("#expOdo").mask("999999",{placeholder:"0"});
    $('.datePicker').each(function() {
        $(this).datetimepicker({
            addSliderAccess: true,
            sliderAccessArgs: {touchonly: false},
            changeMonth: true,
            changeYear: true,
            altField: "#"+$(this).attr('id')+"Alt",
            altFieldTimeOnly: false,
            altFormat: "yy-mm-dd",
            altTimeFormat : "HH:mm:ss",
            dateFormat: "D, d MM yy",
            timeFormat: "hh:mmtt"
        });
    });     
    tinyMCE.init({selector: "textarea#expenseComments",menubar : false,toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright"});
}); 
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
    tinymce.execCommand('mceRemoveEditor',true,"textarea#expenseComments");
});

Upvotes: 4

Views: 16561

Answers (6)

Shubham Jain
Shubham Jain

Reputation: 21

this solved my issue:

// Remove all editors bound to divs

tinymce.remove('div');

// Remove all editors bound to textareas
tinymce.remove('textarea');

// Remove all editors
tinymce.remove();

// Remove specific instance by id
tinymce.remove('#id');

https://www.tiny.cloud/docs/api/tinymce/root_tinymce/?_ga=2.143898737.597721600.1600176559-1290517464.1591019990#remove

Upvotes: 1

Abhay Maurya
Abhay Maurya

Reputation: 12277

2020 Update

To remove existing tinymce editor and add new needs clearance of tinymce.EditorManager.editors array. This solution works in both cases :

  1. If you have only one editor and you want to remove and add it again.
  2. If you have multiple editors and you want to remove some special editor and add it again.
console.log(tinymce.EditorManager.editors);

This will give you a view of the array and exact index of you desired editor which you want to remove. For example one sample output of above console can be:

Array[2]
0:B
1:B
length:2
textarea-1:B
textarea-2:B
_proto_Array[0]

This is the output of the console when i have two tinymce editors on textareas : #textarea-1 and #textarea-2 Lets suppose I want to delete #textarea-2 and re-add it then it can be done as follows:

tinymce.EditorManager.editors.splice(1, 1);//removing second element in array.
delete tinymce.EditorManager.editors['textarea-2'];//deleting respective textarea id from array

Then you can add it again simply using init:

tinymce.init({
    selector:'#ts-textarea-2'
});

If you have only one textarea associated with tinymce editor lets say : #textarea-1 and you want to remove and re-initialize it then you can just empty tinymce.EditorManager.editors by :

tinymce.EditorManager.editors = [];

And then you can add using init command as explained above. Worked for me without any error.

I hope it helps

Upvotes: 6

adn
adn

Reputation: 1

Hoping this will be a more complete guide to solving this.

console.log("before remove")
//capture the editorId from this (id: )
console.log(tinymce.EditorManager.editors);
//remove instance 
tinymce.execCommand('mceRemoveEditor', true, "editorId");
//add to the DOM the html to whom you will apply tinymce
$("#emailEditor").append(html);
console.log("before add")
console.log(tinymce.EditorManager.editors);
//add instance
tinymce.EditorManager.execCommand('mceAddEditor', false, "editorId");
//init tinymce
initTinyMce();

//be sure to add the init_instance_callback part
function initTinyMce() {
    console.log("init tinymce")
    tinymce.init({
        //script_url: '~/Scripts/tinymce/jquery.tiny_mce.js',
        selector: "textarea#editorId",
        // General options
        mode: "textareas",
        theme: "modern",
        // Theme options
        theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,
        init_instance_callback: function (editor) {
            var currentEditor = editor.editorContainer;
            $(currentEditor).show();
        }
    });
}

Upvotes: 0

Shahid Iqbal
Shahid Iqbal

Reputation: 407

Need to clear the old instances of tinymce. Following code worked for me

tinymce.EditorManager.editors = []; //we need to remove the old instances.

//Set "About" section to a TinyMCE editor. tinymce.init({ selector: 'textarea', skin_url: '/packages/teamon_tinymce/skins/lightgray', menubar: false, toolbar: 'insert | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist', }); tinymce.get('pageContent').setContent(page.content);

Upvotes: 1

makwana.a
makwana.a

Reputation: 309

It seems to be a timing issue. I am looking into doing an event listener type of thing instead of a timer, but when I wrap my init function, it works properly. I found the hint from this post here: http://www.tinymce.com/forum/viewtopic.php?id=32661

tinyMCE.execCommand('mceRemoveEditor', false, 'editorId');
setTimeout(function() {
    tinyMCE.init(myconfig);
}, 3000);

Upvotes: 3

Thariama
Thariama

Reputation: 50832

Problem here is that closing the box without shutting down the inner tinymce instance properly will result in not showing the editor the second time (because there is still a tinymce editor object in the variable window.tinymce.editors).

Solution: onclose (in fact before destroying or removing) of the box shut down the editor.

Upvotes: 5

Related Questions