その場で編集くん

header.php

<?php 
// wp_headの前に追加    
// wp_deregister_script('jquery') をしていると表示されないので注意
// 一応ログインしていないと表示しないようにする
if (current_user_can('editor') || current_user_can('administrator')) { 
	wp_enqueue_script( 'wp-api' );
}
?>
<?php wp_head(); ?>

single.php

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
	
			<?php
			/* Start the Loop */
			while ( have_posts() ) : the_post(); ?>
			<article id="editor">
				<h1><?php the_title(); ?></h1>

				<div class="entry-content" v-html="compiledMarkdown">
				<?php the_content(); ?>
				</div>

				<?php if (current_user_can('editor') || current_user_can('administrator')) :?>
				<textarea :value="input" @input="update"></textarea><button @click="send">送信</button>
				<?php endif; ?>
			</article>
			<?php endwhile;?>


		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php if (current_user_can('editor') || current_user_can('administrator')) :?>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script>
var $html;
jQuery.ajax( {
  url: '/wp-json/wp/v2/posts/'+ <?php echo get_the_ID(); ?>,
  method: 'GET'
}).done(function(res){
  $text = res.content.rendered;
  init()
})

function init() {
new Vue({
  el: '#editor',
  data: {
    input: $text
  },
  computed: {
    compiledMarkdown: function () {
      return marked(this.input, { sanitize: false })
    }
  },
  methods: {
    update: _.debounce(function (e) {
      this.input = e.target.value
      console.log(marked(this.input))
    }, 300),
    send: function(){
      var that = this
      jQuery.ajax( {
        url: wpApiSettings.root + 'wp/v2/posts/<?php echo get_the_ID(); ?>',
        method: 'POST',
        beforeSend: function ( xhr ) {
          xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
        },
        data:{
          'content' : marked(that.input)
        }
      } ).done( function ( response ) {
        console.log( response );
      } );
	}
  }
})
}
</script>
<?php endif; ?>

<?php get_footer();