user1970557 user1970557 - 3 months ago 17
jQuery Question

TinyMCE - attach to divs loaded via AJAX calls

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

}

});

});

Answer

You will need to call the id explizitly. Use

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