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.

score 62 · Accepted Answer · edited Mar 22 '15 at 09:43

62

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

This works well!

edited Mar 22 '15 at 09:43

Bjørn-Roger Kringsjå

9,849
6
36
64

answered Mar 21 '15 at 23:24

Arquimedes de Siracusa

740
6
3

1

use tinymce.init({ selector:'textarea' }); in ajax – suraj Oct 23 '18 at 13:20
1

This worked well for me, but it took me a little bit to realize that I would have to replace the other information inside the parenthesis for the `.init()` function. Just throwing that out there for anyone else who may be confused why it might not work with just `.init()`. You need to include the `{selector:'textarea'}` bit inside the parenthesis and complete the function call like so: `tinymce.init({selector:'textarea'})` – Joel Trauger Feb 12 '19 at 15:17

score 12 · Answer 2 · answered Nov 20 '13 at 15:13

12

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.

answered Nov 20 '13 at 15:13

Eduardo Casas

578
4
11

1

the link is dead :( – supersan Feb 23 '17 at 18:42
Look here: https://stackoverflow.com/questions/16987757/tinymce-attach-to-divs-loaded-via-ajax-calls or https://www.tiny.cloud/docs-3x/reference/TinyMCE3x@Command_identifiers/ Didn't get is working with remove() and init() . This way it works really. – sneaky Jan 19 '19 at 13:29

score 7 · Answer 3 · answered Oct 29 '13 at 07:23

7

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

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

answered Oct 29 '13 at 07:23

Jamshid Hashimi

7,639
2
28
27

1

I was calling init with some custom options to load the static textareas, so I ended up extracting my initialize into a function and calling that when the ajax call is complete. – Mike Dotterer Oct 29 '13 at 16:42

score 1 · Answer 4 · answered Aug 13 '16 at 11:43

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

score 0 · Answer 5 · answered Oct 23 '18 at 13:21

0

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();

answered Oct 23 '18 at 13:21

suraj

326
4
6

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

5 Answers5

Linked