使用wp_EDITOR在前端保存和显示内容

时间:2016-11-16 作者:cmdshorty

首先让我说,当涉及到Wordpress的硬编码时,我是一个新手。并不是说我没有做过,更重要的是我不知道如何做某些事情。话虽如此,以下是我花了数小时研究的问题:

我正在尝试使用创建前端文本区域wp_editor 可以由多个用户更新并以<div>. 我有编辑器显示在前端,但没有保存或提交按钮。即使我创建了自己的保存/提交按钮,它也不会做任何事情。我如何才能做到这一点?附上我的残暴代码。

注意:如果有更简单的方法,我完全支持。我真的很想更多地参与Wordpress的硬编码,而不是依赖插件。

function front_end_text_box() {

    if(!is_admin()){
        require_once(ABSPATH . \'wp-admin/includes/template.php\');
    }

    //$post_id = 7;
    //$post = get_post( $post_id, OBJECT, \'edit\' );

    $content = \'\';//$post->post_content;
    $editor_id = \'mycustomeditor\';
    $settings =   array(
            \'wpautop\' => true, //Whether to use wpautop for adding in paragraphs. Note that the paragraphs are added automatically when wpautop is false.
            \'media_buttons\' => true, //Whether to display media insert/upload buttons
            \'textarea_name\' => $editor_id, // The name assigned to the generated textarea and passed parameter when the form is submitted.
            \'textarea_rows\' => get_option(\'default_post_edit_rows\', 10), // The number of rows to display for the textarea
            \'tabindex\' => \'\', //The tabindex value used for the form field
            \'editor_css\' => \'\', // Additional CSS styling applied for both visual and HTML editors buttons, needs to include <style> tags, can use "scoped"
            \'editor_class\' => \'\', // Any extra CSS Classes to append to the Editor textarea
            \'teeny\' => false, // Whether to output the minimal editor configuration used in PressThis
            \'dfw\' => false, // Whether to replace the default fullscreen editor with DFW (needs specific DOM elements and CSS)
            \'tinymce\' => true, // Load TinyMCE, can be used to pass settings directly to TinyMCE using an array
            \'quicktags\' => true, // Load Quicktags, can be used to pass settings directly to Quicktags using an array. Set to false to remove your editor\'s Visual and Text tabs.
            \'drag_drop_upload\' => true //Enable Drag & Drop Upload Support (since WordPress 3.9) 
    );

    //$save_content = get_post_meta ($post->ID, \'front_end_text_box\', true);
    //echo \'<form action="" method="post" target="_self">\';

    wp_editor( $content, $editor_id, $settings );

    //wp_update_post($post_id);
    //submit_button( \'Save Content\');
    //echo \'<input type="submit" value="Submit"></form>\';
    //echo \'<textarea>\' . $content . \'</textarea>\';
    //echo esc_html( get_post_meta( get_the_ID(), \'_mycustomeditor\', true ) );

}

/*
    function save_wp_editor_fields(){
        global $_POST;
        //*update_option(\'my_content\');
        update_post_meta($post->ID, \'mycustomeditor\', $_POST[\'mycustomeditor\']);
        //$post->post_content = $editor_id;
    }
    add_action( \'save_post\', \'save_wp_editor_fields\' );
    //add_action(\'admin_init\',\'save_wp_editor_fields\', 10);
*/

1 个回复
SO网友:jgraup

您要将数据提交到admin_post_(action) 然后处理请求。您可能需要jQuery 拦截单击并提供所有必需的数据,但这将显示主要部分。

HTML

<form action="http://www.example.com/wp-admin/admin-post.php" method="post">
  <input type="hidden" name="action" value="add_foobar">
  <input type="hidden" name="data" value="foobarid"> 
  <input type="submit" value="Submit">
</form>
PHP

add_action( \'admin_post_foobar\', \'prefix_admin_foobar\' );
add_action( \'admin_post_nopriv_foobar\', \'prefix_admin_foobar\' );

function prefix_admin_foobar() {

    status_header( 200 );

    $my_post = array (
            \'ID\'           => (int) $_REQUEST[ \'data\' ],
            \'post_title\'   => \'This is the post title.\',
            \'post_content\' => \'This is the updated content.\',
    );

    // Update the post into the database
    wp_update_post( $my_post );

    die( "Server updated \'{$_REQUEST[\'data\']}\' from your browser." );
}
以下是一个工作版本,您可以通过添加短代码来测试[front-end-editor] 到您的内容。包括JS在成功时刷新。

// Test with [front-end-editor] in your post content

add_shortcode( \'front-end-editor\', \'front_end_editor_shortcode\' );

function front_end_editor_shortcode() {

    if ( ! is_admin() ) {
        require_once( ABSPATH . \'wp-admin/includes/template.php\' );
    }

    // current post id
    $post_id = get_the_ID();
    $post    = get_post( $post_id, OBJECT, \'edit\' );
    $content = $post->post_content; // current content

    // editor settings
    $editor_id = \'mycustomeditor\';
    $settings  = array (
            \'wpautop\'          => true,   // Whether to use wpautop for adding in paragraphs. Note that the paragraphs are added automatically when wpautop is false.
            \'media_buttons\'    => true,   // Whether to display media insert/upload buttons
            \'textarea_name\'    => $editor_id,   // The name assigned to the generated textarea and passed parameter when the form is submitted.
            \'textarea_rows\'    => get_option( \'default_post_edit_rows\', 10 ),  // The number of rows to display for the textarea
            \'tabindex\'         => \'\',     // The tabindex value used for the form field
            \'editor_css\'       => \'\',     // Additional CSS styling applied for both visual and HTML editors buttons, needs to include <style> tags, can use "scoped"
            \'editor_class\'     => \'\',     // Any extra CSS Classes to append to the Editor textarea
            \'teeny\'            => false,  // Whether to output the minimal editor configuration used in PressThis
            \'dfw\'              => false,  // Whether to replace the default fullscreen editor with DFW (needs specific DOM elements and CSS)
            \'tinymce\'          => true,   // Load TinyMCE, can be used to pass settings directly to TinyMCE using an array
            \'quicktags\'        => true,   // Load Quicktags, can be used to pass settings directly to Quicktags using an array. Set to false to remove your editor\'s Visual and Text tabs.
            \'drag_drop_upload\' => true    // Enable Drag & Drop Upload Support (since WordPress 3.9)
    );

    // display the editor
    wp_editor( $content, $editor_id, $settings );

    // display the submit button
    submit_button( \'Save Content\' );

    // add javaScript to handle the submit button click,
    // and send the form data to WP backend,
    // then refresh on success.
    ?>
    <script>
        (function($) {
            $ (\'#submit\').on (\'click\', function(e) {
                var content = $ (\'#mycustomeditor\').val ();
                $.post (\'<?php echo get_admin_url( null, \'/admin-post.php\' ) ?>\',
                        {
                            action: \'front_end_submit\',
                            id: \'<?php echo get_the_ID(); ?>\',
                            content: content
                        },
                        function(response) {

                            // looks good
                            console.log (response);

                            // reload the latest content
                            window.location.reload();
                        });
            });
        }) (jQuery);
    </script>
    <?php
}

// subscribe to the form submit event
add_action( \'admin_post_front_end_submit\', \'prefix_admin_front_end_submit\' );
add_action( \'admin_post_nopriv_front_end_submit\', \'prefix_admin_front_end_submit\' );

// handle the form submit action
function prefix_admin_front_end_submit() {

    // grab the content and post id from the POST data
    $content = $_POST[ \'content\' ];
    $id      = (int) $_POST[ \'id\' ];

    // check if the post is valid
    if( ! get_post($id) ) {
        die( "No post \'{$id}\'." );
    }

    // prep the update
    $my_post = array (
        \'ID\'           => $id,
        \'post_content\' => stripslashes( $content ),
    );

    // update the post into the database
    $result = wp_update_post( $my_post );

    // return the results
    if ( $result ) {

        // GOOD

        status_header( 200 );
        die( "Server updated \'{$id}\' from your browser." );

    } else {

        // BAD

        die( "Failed to updated \'{$id}\' from your browser." );
    }
}

相关推荐

Front-End Post Submission

我正在尝试添加一个表单,用户可以从前端提交帖子。我正在学习本教程:http://wpshout。com/wordpress从前端提交帖子/我正在做的是添加this code 到我的一个页面模板。表单显示正常,但当我单击“提交”按钮时,它会显示“Page not found error“”许多评论者说这不起作用。谁能给我指出正确的方向吗?代码是否不完整?有缺陷吗?我做错什么了吗?谢谢Towfiq I。