Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm doing an experiment and looking for a WordPress theme that utilizes the contenteditable html5 property to allow in context editing on the live website (for authenticated admin users).

Are there any examples?

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

I don't know about a theme but i wrote this a while back as a "Prof of concept" which simply wraps the content inside an editable div and sends the data in an hidden textarea along with nonce:

if (!class_exists('contentEditable')){
    /**
    * contentEditable class
    * @author Ohad Raz
    */
    class contentEditable
    {
        public $nonce;
        public $nonce_action;

        /**
         * class constructor
         * @author Ohad Raz
         */
        function __construct()
        {
            if(!is_admin()){
                $this->nonce = 'ce__wpnonce';
                $this->nonce_action = 'ce_editor';
                $this->all_checks = false;
                add_filter('the_content',array($this,'editable_content'),10);
                add_action('get_header',array($this,'check_submit'));
            }

        }

        /**
         * check_submit
         * function to check if the form has been submited
         * if so call the update post function
         * @author Ohad Raz
         * @return void
         */
        public function check_submit(){
            if (isset($_POST['content_editable_Save']) && $_POST['content_editable_Save'] == "submit"){
                $this->updated_post();
            }
        }

        /**
         * editable_content
         * function that adds the form to the content
         * @author Ohad Raz 
         * @param  string $content 
         * @return string
         */
        public function editable_content($content){
            global $post;
            //early exit if not needed
            if (!current_user_can('edit_post', $post->ID))
                return $content;

            wp_enqueue_script('jquery');
            add_action('wp_footer',array($this,'submit_js'));
            return '<form action="contentEditable_submit" method="POST" accept-charset="utf-8">
                        <div id="editable" contenteditable="true">'
                            .$content
                        .'</div>
                        <textarea id="h_content" name="content" style="display:none;"></textarea>
                        <input type="hidden" name="pid" value="'.$post->ID.'">
                        <input type="hidden" name="content_editable_Save" value="submit">'
                        .wp_nonce_field($this->nonce_action, $this->nonce,true, false)
                        .'<input type="submit" id="submit_editable" name="save" value="'.__('Save changes').'">
                    </form>';
        }

        /**
         * updated_post
         * the function that actually updates the post and redirects to the newly modified post
         * @author Ohad Raz
         * @return VOID
         */
        public function updated_post(){
            if ($this->_verify_nonce()){

                $p['ID'] = intval($_POST['pid']);
                $p['post_content'] = $_POST['content'];
                $n = wp_update_post($p);
                wp_redirect(get_permalink($n));
                exit;
            }
        }

        /**
         * _verify_nonce 
         * nonce check
         * @author Ohad Raz
         * @return boolean
         */
        public function _verify_nonce()
        {
            $n = isset($_REQUEST[$this->nonce]) ? $_REQUEST[$this->nonce]: '';
            if ('' === $n) return false;
            if (!function_exists('wp_verify_nonce'))
                require_once(ABSPATH .'wp-includes/pluggable.php');
            return wp_verify_nonce($n, $this->nonce_action);
        }

        /**
         * submit_js
         * some jQuery magic
         * @author Ohad Raz
         * @return void
         */
        public function submit_js(){
            ?>
            <script type="text/javascript">
                jquery(document).ready(function($){
                    $("#submit_editable").click(function(){
                        $("#h_content").val($("#editable").html());
                        return true;
                    });
                });
            </script>
            <?php
        }

    }//end class
}//end if
new contentEditable();
share|improve this answer
1  
+1 This looks very interesting. Thanks for the example. –  N2Mystic Nov 1 '12 at 23:19
    
you're most welcome –  Bainternet Nov 1 '12 at 23:26
    
Do you have a demo page for this? I pasted it into single.php but I can't tell yet how to hook into it. –  N2Mystic Nov 9 '12 at 18:40
add comment

Check out the plugin...wait for it...WPContentEditable. I briefly browsed the source and it does seem to be using contenteditable attribute, though I think there's a fallback. That's for you to sort out, I suppose :)

share|improve this answer
    
+1 Thanks for the link. Its not very well documented but it works. Only one problem I see is that it uses a relative path reference that foobars its operation outside of the home page of the blog. –  N2Mystic Nov 1 '12 at 23:20
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.