Saving and displaying content on front end with wp_editor

Question

Let me first start out by saying that when it comes to hard coding with Wordpress, I'm a rookie. Not that I haven't done it, but more in the matter I don't know exactly HOW to do certain things. With that said, here is my issue that I have spent HOURS researching on:

I'm trying to create a front end textarea using wp_editor that can be updated by multiple users and display the content in say a <div>. I've got the editor to show up on the front end but there is no save or submit button. Even if I create my own save/submit button, it doesn't do anything. How can I accomplish this? My atrocious code is attached.

NOTE: If there is an easier way to do this, I'm all for it. I would really like to get more involved with hardcoding for Wordpress than relying on plugins.

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);
*/

Answer 1

You want to submit the data to admin_post_(action) and then handle the request. You may need jQuery to intercept the click and supply all the required data, but this shows you the main parts.

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." );
}

---

WORKING VERSION AS SHORTCODE

Here is a working version you can test by adding the shortcode [front-end-editor] to your content. Includes refresh by JS on success.

// 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." );
    }
}