Using wp_editor($content,'fieldid') in Ajax load

I'm loading somefile.php file from ajax. Within that somefile.php I have a textfield that I want to use the wp_config() function so it allows WYSIWYG formatting via the tinymce that comes with WP. Unfortunately, it fails. A zillion Googlings have failed to turn up the best method.

Has anyone here done this and if so, do you have a concise and clear snippet that can send me on my way ?

What sayeth the group ?


  • Adam Czajczyk

    Hello Jay,

    I hope you're well today and thank you for your question!

    Have you tried a solution similar to this one:

    Personally I didn't test it yet but it seems to make perfect sense. Could you give it a try and let me know if it worked for you? If that's not a working solution for you, I'll consult that with my colleagues that are more into development.

    Best regards,

  • Jay


    Yes I did try that. I've tried quite a few. I've actually got something is ALMOST working.

    Here is my JS code which IS causing the tinymce to capture my textfield. It is working perfectly except for one remaining issue

    None of the drop downs work. The color picker, format, view etc drop down menus will not drop down. So this is my issue at present.

    Here is my loading tinymce code:
    wp_enqueue_script( 'tinymce_js', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ), false, true );

    Here is my JS code

    jQuery( document ).ready(function() {
            mode : "specific_textareas",
            content_css : "PLUGINS_URL/cm-core/both-ends/css/tinymce.css",
            elements : 'pre-details',
            editor_selector : "tinymce",
            skin: "lightgray",
            statusbar : false,
            plugins: "textcolor colorpicker",
            textcolor_cols: "5",
            browser_spellcheck: true,
            toolbar: [
                "bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | undo redo | forecolor backcolor"
            setup: function(editor) {
            editor.on('blur', function(e) {
        style_formats: [
            { title: 'Bold text', inline: 'strong' },
            { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
            { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
            { title: 'Badge', inline: 'span', styles: { display: 'inline-block', border: '1px solid #2276d2', 'border-radius': '5px', padding: '2px 5px', margin: '0 2px', color: '#2276d2' } },
            { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
          formats: {
            alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
            aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
            alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
            alignfull: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
            bold: { inline: 'span', 'classes': 'bold' },
            italic: { inline: 'span', 'classes': 'italic' },
            underline: { inline: 'span', 'classes': 'underline', exact: true },
            strikethrough: { inline: 'del' },
            customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format' }, classes: 'example1' },
         paste_auto_cleanup_on_paste : true,
            paste_postprocess : function( pl, o ) {
                o.node.innerHTML = o.node.innerHTML.replace( / +/ig, " " );
            if (tinymce.editors.length > 0) {
                tinymce.execCommand('mceFocus', true, textareaId );
                tinymce.execCommand('mceRemoveEditor',true, textareaId);
                tinymce.execCommand('mceAddEditor',true, textareaId);
         }, 500);

    I have created a youtube video for you to see the improper behavior.

    You'll notice the dropdowns are not responsive. They also do not throw any errors in console or php log.

    Thanks in advance.


  • Panos

    Hi Jay ,

    I'd suggest an approach using the wp_editor() included in wp.

    The idea is to provide the wp_editor in the page you want to load it, but hidden. In your ajax response you can have a text-area on which you will then add the editor with the "mceAddEditor" command of tinymce.

    I have attached an example for reference:

    function wpmudev_ajax_load_editor_sh( $atts ){
    	<div id="wpmudev_wp_editor_hidden" style="display: none;">
    		wp_editor( '', 'wpmudev_editor' );
    	<div id="wpmudev_wp_editor_container"></div>
    	<button id="wpmudev_ajax_button" >Load editor</button>
    	<script type="text/javascript">
    			$( document ).ready(function(){
    				$( '#wpmudev_ajax_button' ).on( 'click', function(e){
    					var data = {
    						'action': 'wpmudev_wp_editor',
    						'sonevar1': 'someval1',
    						'nonce' : '...'
    '<?php echo admin_url( 'admin-ajax.php' ); ?>', data, function(response) {
    						EDITOR = $('#wpmudev_wp_editor_hidden').contents();
    						$('#wpmudev_wp_editor_container').append( EDITOR );
    						tinymce.execCommand( 'mceRemoveEditor', false, 'wpmudev_editor' );
    						tinymce.execCommand( 'mceAddEditor', false, 'wpmudev_editor' );
    	return ob_get_clean();
    add_shortcode( 'wpmudev_ajax_load_editor', 'wpmudev_ajax_load_editor_sh' );
    function wpmudev_wp_editor_ajax(){
    	echo '<textarea id="wpmudev_editor"></textarea>';
    add_action( 'wp_ajax_wpmudev_wp_editor', 'wpmudev_wp_editor_ajax' );
    add_action( 'wp_ajax_no_priv_wpmudev_wp_editor', 'wpmudev_wp_editor_ajax' );

    Please keep in mind that this is to be used as a reference only as it's not safe to use (eg there is no ajax referrer check ).

    I have provided it in a shortcode so you can test quickly and easily by inserting the following shortcode in any page:

    This should display a button "Load Editor" which should load the text editor in the page.

    I really hope this helps :slight_smile: