+91 9717203377

Home » Wordpress » wp editor in ajax

wp editor in ajax

Hello Folks,
Last time I have faced issue with wp_editor in ajax call. After some time I have fixed it and now want to share my solution. As we know that wp_editor renders an editor and it use tinyMCE for display editor.
It works fine if we use it without ajax call.
First Off I want to share my situation of ajax call and wp_editor. I was using a meta in add new page of wordpress backend. This meta has a editor with an add more button to add any number of editors. An ajax hit add more editor after click on add more button. In my case editor was not loading by simply using wp_editor() function although it works without ajax. I have used following code to make it proper

wp_editor( '', 'custom_editor_id' );
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

In jQuery ajax function use below code

jQuery.post(ajaxurl, data, function(response)
{
	//Your code goes here
	//init quicktags
	var eid = 'custom_editor_id';
	switchEditors.go(eid, 'tmce')
	quicktags({id : eid});
	//init tinymce
	tinyMCEPreInit.mceInit[eid]['elements'] = eid;
	tinyMCEPreInit.mceInit[eid]['body_class'] = eid;
	tinyMCEPreInit.mceInit[eid]['succesful'] =  false;
	tinymce.init(tinyMCEPreInit.mceInit[eid]);
});	

Enjoy…