3

I have a plugin that allows the user to dynamically add sections that need to have the tinyMCE editor in them. The jQuery clones a div and places it into a container. One of the input boxes is a textarea set up like so:

<textarea name="sectionContent_1" id="sectionContent_1"></textarea>

I need to replace the textarea with the tinyMCE editor.

I've looked at:

How to load wp_editor() through AJAX/jQuery and use wordpress wp_editor in dynamic/ajax html

Neither of these seem to work for us

I've tried this inside the trigger that calls to add the textarea section:

$(this).parent().find('.sectionOptions').html(ctHolder);

var textAreaID = 'sectionContent_'+sectionID;

tinyMCE.execCommand('mceRemoveEditor', true, textAreaID);
tinyMCE.execCommand('mceAddControl', false, textAreaID);

In this, I'm adding the cloned data (ctHolder) to the .sectionOptions setting the textarea's ID, resetting the editor on the ID, then adding control to the ID... this doesn't work but seems to be most commons suggestion.

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

This works well!

  • 2
    Please add some explanation also. – Nilambar Mar 22 '15 at 3:59
  • This really helps. it works. – harrrrrrry Jun 1 '15 at 18:09
0

This did the trick:

var textAreaID = 'sectionContent_' + sectionID;
$(this).parent()
    .find('.sectionOptions')
    .html(ctHolder).ready(
        function() {
            tinyMCE.execCommand('mceAddEditor', false, textAreaID); 
        }
    );

Wordpress 3.9 is using tinyMCE 4.x so "mceAddControl" was changed to "mceAddEditor". Also, I placed the call inside a ready function so jquery wouldn't run tinyMCE until after it loaded the textarea on the dom.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.