web-dev-qa-db-ja.com

AJAXのフロントエンドにwp_editorを挿入しますか？

私はフロントエンドのページにAJAXでwp_editor()を挿入しようとしています。私が今持っているコードはwp_editor要素と必要なJavaScriptとCSSファイルを挿入しますが、私が最初にwp_editor()で使った設定はこのTinyMCE要素を作るときには使われません。

PHPで設定された$settingsを動的に作成されたTinyMCEインスタンスに渡すにはどうすればいいですか？

私は自分の質問に答えると思われる古い質問を見つけましたが、それがどのように機能するのか理解できず、コードはPHP非推奨エラーを出します。

AJAXを介してtinyMCE/wp_editor（）をロード

_ 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'
                });
            }
        }
    });
});
ajaxtinymcefront-endwp-editor
1
Swen

そこで、さらに掘り下げた後、いわば「点をつなぐ」ことで自分の質問に答えました。 StackOverflowとStackExchangeについては、このトピックに関する多くの情報がありますが、どれも私の質問に実際に答えていません。

フロントエンドでAJAXを使用してwp_editorインスタンスを読み込むための完全に機能するコードは次のとおりです。includewp_editorに提供される設定.

私は今、wp_print_footer_scripts()を呼び出さなければならないので、さらに良い解決策があるかもしれないと思う、それはmightいくつかの不健全なものを追加、しかし（私の場合）しません。

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