webentwicklung-frage-antwort-db.com.de

Wp_editor im Frontend mit AJAX einfügen?

Ich versuche, eine wp_editor() in eine Seite im Front-End mit AJAX einzufügen. Der Code, den ich gerade habe, fügt die wp_editor-Elemente und die erforderlichen 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 übergebe ich den in PHP festgelegten $settings an die dynamisch erstellte TinyMCE-Instanz?

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

Lade 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 .= "<script type='text/javascript' src='{$baseurl}/wp-tinymce.php?c=1&amp;$version'></script>\n";
    } else {
        $html .=  "<script type='text/javascript' src='{$baseurl}/tinymce.min.js?$version'></script>\n";
        $html .=  "<script type='text/javascript' src='{$baseurl}/plugins/compat3x/plugin.min.js?$version'></script>\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'
                });
            }
        }
    });
});
1
Swen

Nachdem ich noch ein bisschen gegraben hatte, beantwortete ich meine Frage, indem ich sozusagen "die Punkte verband". Es gibt eine Menge Informationen zu diesem Thema über StackOverflow und StackExchange, aber keine von ihnen hat meine Frage wirklich beantwortet.

Hier ist also der vollständige Arbeitscode zum Laden einer wp_editor-Instanz mit AJAX im Front-End, einschließlich der für wp_editor bereitgestellten Einstellungen.

Ich denke, dass es eine noch bessere Lösung geben könnte, da ich gerade wp_print_footer_scripts() aufrufen muss, was vielleicht etwas Unnötiges 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' );
1
Swen