How do I initialize TinyMCE on a ajax loaded textarea in 4.x?

Question

I am upgrading to tinyMCE 4.x and I am attempting to initialize tinyMCE on a textarea loaded via AJAX. In 3.x I did something of the sort: TinyMCE - attach to divs loaded via AJAX calls but this does not seem to work in 4.x.

Answer 1

tinymce.remove();
tinymce.init();

This works well!

Answer 2

In TinyMCE 4.x mceRemoveControl and mceAddControl have been removed. You have to use mceRemoveEditor and mceAddEditor instead.

Got it from: [Resolved] mceRemoveControl and mceAddControl in tinymce 4

Otherwise, you can reload tinymce.init({ ... }) but that should not be the way as it would be slower.

Answer 3

You can load TinyMCE after including textarea with the following code:

//initialize tinyMCE in page
tinymce.init({selector:'textarea'});

Answer 4

just for then running into the same problem.

I solved the problem with wrapping the init Script into a function like this.

in my init.js file

initializeTinyMce();
function initializeTinyMce(selector){
  if(selector == undefined){selector = 'textarea';}
  ...
  tinymce.init({
    selector: selector,
    ...
  });
}

so on your ajax request result you add

<script type="text/javascript">
  $(document).ready(function(){
    initMCE('textarea#someId');
  });
</script>

works fine for me

Answer 5

tinymce.init({ selector:'textarea' });

just use this in ajax and if you are not able to pick the value then Before submitting the form, call

tinyMCE.triggerSave();