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 ?

Jay
CompuMatter

  • 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: http://wordpress.stackexchange.com/a/67070

    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,
    Adam

  • Jay

    Hello,

    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() {
        textareaId='c_tfield1';
        tinymce.init({
            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) {
               jQuery('#c_tfield1').html(tinymce.get('c_tfield1').getContent());
               jQuery("#c_tfield1").trigger('focusout');
            });
        },
        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, " " );
            }
        });
        setTimeout(function(){
            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. https://www.youtube.com/watch?v=58_jIV4vRZE

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

    Thanks in advance.

    Jay

  • 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 ){
    
    	ob_start();
    	?>
    	<div id="wpmudev_wp_editor_hidden" style="display: none;">
    	<?php
    		wp_editor( '', 'wpmudev_editor' );
    	?>
    	</div>
    	<div id="wpmudev_wp_editor_container"></div>
    	<button id="wpmudev_ajax_button" >Load editor</button>
    
    	<script type="text/javascript">
    
    		(function($){
    
    			$( document ).ready(function(){
    
    				$( '#wpmudev_ajax_button' ).on( 'click', function(e){
    
    					e.preventDefault();
    
    					var data = {
    						'action': 'wpmudev_wp_editor',
    						'sonevar1': 'someval1',
    						'nonce' : '...'
    					};
    
    					jQuery.post('<?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' );
    
    					});
    
    				});
    
    			});
    
    		})(jQuery);
    
    	</script>
    	<?php
    	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>';
    
    	exit;
    
    }
    
    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:
    [wpmudev_ajax_load_editor]

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

    I really hope this helps :slight_smile:

    Thanks!