So, after doing some more digging, I answered my own question by “connecting the dots”, so to speak. There’s a lot of bits and pieces of info on this topic on StackOverflow and StackExchange, but none of them really answered my question.
So here is the full working code to loading a wp_editor
instance with AJAX on the front-end, including the settings provided to wp_editor
.
I think there might be an even better solution, as right now, I’m having to call wp_print_footer_scripts()
, which might add some unnessacary stuff, but doesn’t (in my case).
PHP
function insert_wp_editor_callback() {
$html="";
// Define the editor settings
$content="";
$editor_id = 'frontend_wp_editor';
$settings = array(
'media_buttons' => false,
'textarea_rows' => 1,
'quicktags' => false,
'tinymce' => array(
'toolbar1' => 'bold,italic,undo,redo',
'statusbar' => false,
'resize' => 'both',
'paste_as_text' => true
)
);
// Grab content to put inside a variable
ob_start();
// Create the editor
wp_editor($content, $editor_id, $settings);
// IMPORTANT
// Adding the required scripts, styles, and wp_editor configuration
_WP_Editors::enqueue_scripts();
_WP_Editors::editor_js();
print_footer_scripts();
$html .= ob_get_contents();
ob_end_clean();
// Send everything to JavaScript function
wp_send_json_success($html);
wp_die();
} add_action( 'wp_ajax_insert_wp_editor_callback', 'insert_wp_editor_callback' );
add_action( 'wp_ajax_nopriv_insert_wp_editor_callback', 'insert_wp_editor_callback' );