TinyMCE - attach to divs loaded via AJAX calls

Question

I know this has been asked before, but I'm trying to load some divs via jQuery (AJAX) that are attached to a tinymce instance.

In the page loaded by AJAX, there are several tinymce divs, that are created by a PHP loop;

<div id="editable_ID1"><p>Some text</p></div>
<div id="editable_ID2"><p>Some more text</p></div>

tinymce.init({
        selector: "#editable_ID1",
..............
});

tinymce.init({
        selector: "#editable_ID2",

..............
});

ID1 and ID2 are dynamically taken from the database via the PHP loop.

My problem is, I cannot seem to load the tinymce and attach it to these div elements.

I've seen:

tinyMCE.execCommand('mceAddControl', true, 'id');

But again, this doesn't seem to attach the tinymce to the elements

thanks

jQuery(document).ready(function () {

var child = jQuery(this).attr('data-id');

 $.ajax({  
  type: "POST",                                    
  url: '<?php echo url_for('@load_template_from_nav') ?>',
  data: "template_id="+child,                        

  success: function(data)          
  {
    // replace ajax page content
    $('.template-editor-item-replace').html(data);
    tinyMCE.execCommand('mceAddControl', true, 'editable_1');

  } 

 });

});

score 3 · Accepted Answer · edited Jan 24 '20 at 13:24

3

You need to call the ID explicitly. Use

tinyMCE.execCommand('mceAddControl', true, 'editable_ID1'); // additionaly editable_ID2

edited Jan 24 '20 at 13:24

Inizio

2,226
15
18

answered Jun 18 '13 at 06:29

Thariama

50,002
13
138
166

Where do i put this code? In the AJAX call back or where I'm defining the `tinyMCE.init()` ? – user1970557 Jun 24 '13 at 09:49
1

in the ajax callback/success function – Thariama Jun 24 '13 at 10:51
I've updated my question. to include the ajax callback. This still doesn't load in the tinymce editor. Do i need to call it before the page has loaded in the new content? – user1970557 Jun 24 '13 at 12:34
the element with id 'editable_ID1' needs to be loaded and ready/visible to be able to work – Thariama Jun 24 '13 at 12:46
Ok, so the `tinymce.exec` needs to come after the `success` has loaded `data`? – user1970557 Jun 24 '13 at 13:16
do you get any js errors? can you log to console $('#editable_1').length just before you try to init the editor? – Thariama Jun 24 '13 at 13:50
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/32272/discussion-between-user1970557-and-thariama) – user1970557 Jun 24 '13 at 13:52
when I console.log(); it returns `1` once and then nothing subsequent ajax calls – user1970557 Jun 24 '13 at 14:03

score 1 · Answer 2 · edited Jan 24 '20 at 13:21

When dealing with ajax that replaces the tinymce element you need to remove control first and then add it again

$.ajax({  
  type: "POST",                                    
  url: '<?php echo url_for('@load_template_from_nav') ?>',
  data: "template_id="+child,                        
  beforeSend: function(){
    tinymce.execCommand('mceRemoveControl', false, 'editable_1')
  },
  success: function(data)          
  {
    // replace ajax page content
    $('.template-editor-item-replace').html(data);
  },
  complete: function() {
     tinyMCE.execCommand('mceAddControl', true, 'editable_1');
  }
});

In tinymce v.4

$.ajax({  
  type: "POST",                                    
  url: '<?php echo url_for('@load_template_from_nav') ?>',
  data: "template_id="+child,                        
  beforeSend: function(){
    tinymce.remove('#editable_1');
  },
  success: function(data)          
  {
    // replace ajax page content
    $('.template-editor-item-replace').html(data);
  },
  complete: function() {
     tinymce.add('#editable_1');
  }
});

Worked perfect for Ajax Call to load and unload TinyMce. – Vinoth Kumar Dec 28 '16 at 07:40 — Vinoth Kumar, Dec 28 '16 at 07:40

TinyMCE - attach to divs loaded via AJAX calls

2 Answers2

Linked