javascriptwordpresstinymcewp-editor

wp_editor: How to load wp_editor on demand using jQuery?


I am trying to load wp_editor on demand using jquery/javascript.

Somehow I got success using following code but it does not save changed data in the element.

tinyMCE.execCommand('mceAddEditor', false, textarea_id);

I'll really appreicate any contribution.


Solution

  • When we use wp_editor() it loads WordPress default visual editor. You must load:

    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    

    Working example : http://jsfiddle.net/rupomkhondaker/j7brgyL2/

    <textarea id="test">Easy features.</textarea>
    

    And the code is

    $(document).ready(function() {
        tinyMCE.init({
            mode : "none"
        });
        tinyMCE.execCommand('mceAddEditor', false, 'test');
    });
    

    Simply use

    tinymce.execCommand('mceAddEditor', false, 'textarea_id');
    

    Here is another example example:

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

    script:

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

    and the most simple way is

    tinyMCE.execCommand("mceAddEditor", false, id);
    tinyMCE.execCommand('mceAddControl', false, id);