Wp_editor am Frontend mit AJAX?

Ich versuche, einen wp_editor() in eine Seite am Front-End mit AJAX einzufügen. Der Code, den ich gerade habe, fügt die wp_editor-Elemente und die benötigten JavaScript- und CSS-Dateien ein, aber keine der Einstellungen, die ich ursprünglich in wp_editor() verwendet habe, werden beim Erstellen dieses TinyMCE-Elements verwendet.

Wie übertrage ich die in PHP gesetzten $settings in die dynamisch erstellte TinyMCE-Instanz?

Ich habe eine alte Frage gefunden, die meine Frage zu beantworten scheint, aber ich verstehe nicht, wie es funktioniert, und der Code gibt einen PHP Depreciated-Fehler.

Laden Sie tinyMCE / wp_editor () über AJAX


PHP

 function insert_wp_editor_callback() { // Empty variable $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 ) ); // Hack to put wp_editor inside variable ob_start(); wp_editor($content, $editor_id, $settings); $html .= ob_get_contents(); ob_end_clean(); // Get the necessary scripts to launch tinymce $baseurl = includes_url( 'js/tinymce' ); $cssurl = includes_url('css/'); global $tinymce_version, $concatenate_scripts, $compress_scripts; $version = 'ver=' . $tinymce_version; $css = $cssurl . 'editor.css'; $compressed = $compress_scripts && $concatenate_scripts && isset($_SERVER['HTTP_ACCEPT_ENCODING']) && false !== stripos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'); if ( $compressed ) { $html .= "\n"; } else { $html .= "\n"; $html .= "\n"; } add_action( 'wp_print_footer_scripts', array( '_WP_Editors', 'editor_js' ), 50 ); add_action( 'wp_print_footer_scripts', array( '_WP_Editors', 'enqueue_scripts' ), 1 ); wp_register_style('tinymce_css', $css); wp_enqueue_style('tinymce_css'); // Send data 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' ); 

JavaScript

 $('#insert_wp_editor').on('click', function() { // Data to send to function var data = { 'action': 'insert_wp_editor_callback' }; $.ajax({ url: ajaxURL, type: 'POST', data: data, success: function(response) { if ( response.success === true ) { // Replace element with editor $('#editor-placeholder').replaceWith(response.data); // Init TinyMCE tinymce.init({ selector: '#frontend_wp_editor' }); } } }); }); 

Solutions Collecting From Web of "Wp_editor am Frontend mit AJAX?"

Nachdem ich ein wenig mehr gegraben hatte, beantwortete ich meine eigene Frage, indem ich sozusagen “die Punkte verband”. Es gibt eine Menge Informationen über dieses Thema in StackOverflow und StackExchange, aber keine von ihnen hat meine Frage wirklich beantwortet.

Also hier ist der vollständige wp_editor zum Laden einer wp_editor Instanz mit AJAX auf dem Front-End, einschließlich der Einstellungen, die für wp_editor bereitgestellt wp_editor .

Ich denke, dass es eine noch bessere Lösung geben könnte, da ich gerade wp_print_footer_scripts() aufrufen wp_print_footer_scripts() , was möglicherweise unnatürliches Zeug hinzufügt, aber nicht (in meinem Fall).


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' );