WordPress.org

Ready to get started?Download WordPress

Forums

Create wp_editor with ajax call (4 posts)

  1. oKpi
    Member
    Posted 1 year ago #

    Hi,

    I am working on admin interface which have multiple wp_editor and we can add or remove an textarea.

    When i load the page, i have a list of textareas with editors. When i click the add button, i call admin-ajx.php which call this function :

    function ajax_create_settings_field_slider_image(){
    		$nonce = $_POST['nonce'];
    
    		if (!wp_verify_nonce($nonce, 'ajax-nonce'))
    			die ('Error!');
    
    		if (current_user_can('edit_theme_options')) {
    			// Create editor
    			if (isset($_POST['id']) && isset($_POST['option_name']) && isset($_POST['name']) && isset($_POST['index'])) {
    				echo wp_editor('', 'custom-editor-' . $_POST['index'], array(
    					'media_buttons' => FALSE,
    					'textarea_name' => $_POST['option_name'] . '[' . $_POST['name'] .'][text][]',
    					'textarea_rows' => 5,
    					'wpautop' => FALSE
    				));
    			}
    		}
    		exit;
    	}

    And this my Javascript Code :

    jQuery.ajax({
    						type: 'POST',
    				        dataType: 'HTML',
    				        url: url,
    				        data: {
    				        	'action': 'create_settings_field_slider_image',
    				        	'limit' : limit,
    				        	'id' : id,
    				        	'option_name' : option_name,
    				        	'name' : name,
    				        	'index': nextId,
    				        	'nonce' : nonce
    				        },
    				        success:function(data){
    				            // Prepare parent and add data
    							parent.find('.buttonAdd').hide();
    							parent.find('.buttonDelete').show();
    							parent.append(jQuery(data).html());
    
    							tinyMCE.execCommand('mceAddControl', false, 'custom-editor-' + nextId);
    				        },
    						error: function(errorThrown){
    							alert("Une erreur est apparue pendant l'ajout des nouveaux champs de saisies");
    			         	}
    				    });

    Ajax call works fine, but my new editor don't work, my TinyMCE buttons are not displayed, and when i click on Text or Visual link i have TinyMEC errors like : this.getDoc(...) is undefined, z is undefined

    I try many things on my javascript like :

    //init quicktags
    				            quicktags({id : 'custom-editor-' + nextId});
    				            //init tinymce
    				            tinymce.init(tinyMCEPreInit.mceInit['custom-editor-' + nextId]);

    but it's never work.

    Anyone can help me ?

    Thanks

  2. gwinh.lopez
    Member
    Posted 1 year ago #

    Hi,

    Have you figured this out already? I am having similar problem right now and it is a bit of a pain to debug.

    Thanks!

  3. shaikhaezaz80
    Member
    Posted 7 months ago #

    I am also having same problem. Does anyone help me to find this issue.

    Thanks,
    Aezaz

  4. Kevin Stover
    The WP Ninjas
    Posted 7 months ago #

    Hey,

    I use a backbone call to create a wp_editor instance. I've found success in following something similar to the JavaScript above, using TinyMCE.execommand() after the call is complete and the HTML is in place. The secret sauce for my use-case was to add a hidden wp_editor() instance on the page that the call is being made from. This makes sure that the CSS and JS required for the editor are loaded properly.

Topic Closed

This topic has been closed to new replies.

About this Topic