tinymce - Insert wp_editor on front-end with AJAX?

admin管理员组

文章数量:1201785

I'm trying to insert a wp_editor() into a page on the front-end with AJAX. The code I have right now inserts the wp_editor elements and the needed JavaScript and CSS files, but none of the settings I used initially in wp_editor() are used when creating this TinyMCE element.

How do I pass the $settings set in PHP into the dynamically created TinyMCE instance?

I found an old question that seems to answer my question, but I don't understand how it works, and the code gives a PHP Depreciated error.

Load tinyMCE / wp_editor() via 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'
                });
            }
        }
    });
});

I'm trying to insert a wp_editor() into a page on the front-end with AJAX. The code I have right now inserts the wp_editor elements and the needed JavaScript and CSS files, but none of the settings I used initially in wp_editor() are used when creating this TinyMCE element.

How do I pass the $settings set in PHP into the dynamically created TinyMCE instance?

I found an old question that seems to answer my question, but I don't understand how it works, and the code gives a PHP Depreciated error.

Load tinyMCE / wp_editor() via 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'
                });
            }
        }
    });
});

• ajax
• tinymce
• front-end
• wp-editor

Share Improve this question asked Aug 16, 2017 at 17:00 SwenSwen 1,38477 gold badges2121 silver badges3636 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 5

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

tinymce.execCommand( 'mceAddEditor', true, element.id );

did the trick for me. Thanks to Goran Jakovljevic's answer on: How to load wp_editor via AJAX

本文标签： tinymceInsert wpeditor on frontend with AJAX