在使用AJAX的前端插入wp_EDITOR?

时间:2017-08-16 作者:Swen

我正在尝试插入wp_editor() 使用AJAX将其转换为前端的页面。我现在的代码插入了wp\\U编辑器元素和所需的JavaScript和CSS文件,但没有我最初在中使用的设置wp_editor() 创建此TinyMCE元素时使用。

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

我发现一个老问题似乎可以回答我的问题,但我不理解它是如何工作的,代码给出了一个PHP折旧错误。

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

1 个回复
最合适的回答,由SO网友:Swen 整理而成

所以,在做了更多的挖掘之后,我回答了自己的问题,可以说是“连接点”。关于StackOverflow和StackExchange这个主题,有很多零碎的信息,但没有一个真正回答了我的问题。

下面是加载wp_editor 前端带有AJAX的实例,including 提供给的设置wp_editor.

我想可能有更好的解决方案,因为现在我不得不打电话wp_print_footer_scripts(), 这可能会添加一些不必要的东西,但不会(在我的情况下)。

<小时>

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

结束

相关推荐

从不同的域发出AJAX请求

我正在从主域向子域发出ajax请求。我已经解决了我的跨来源问题,所以我没有收到错误。呼叫正在返回data:0. 我已经检查了我的响应配置,ajax url和“操作”都是正确的。我的functions.php 如下所示:add_action(\"wp_ajax_sendhire\", \"sendhire\"); add_action(\"wp_ajax_nopriv_sendhire\", \"sendhire\"); function sendhire() {