I'm trying to make the description of a post editable - specifically the description of a WooCommerce product, but the issue should apply to any post type. I managed to implement it with a simple textarea, but it shows the bare HTML code and also I cannot add new lines, the Enter key will trigger a form submit.
So I want to use the TinyMCE editor instead, but the content isn't loaded in the editor correctly.
Here's what I tried:
functions.php
// Add an invisible column containing the product description
add_filter( "manage_product_posts_columns", function( $columns ) {
$columns['_description'] = '';
return $columns;
}, 10, 1 );
add_action('manage_product_posts_custom_column', function ( $column_name, $id ) {
if ( $column_name === '_description' )
echo get_the_content( $id );
}, 10, 2);
// Add the quick edit form field
add_action( 'quick_edit_custom_box', function ( $col, $type ) {
if( $col != '_description' || $type != 'product' ) {
return;
} ?>
<fieldset>
<div class="inline-edit-col">
<label>
<span class="title"><?php _e('Description'); ?></span>
<span class="input-text-wrap">
<?php
wp_editor( '', 'inline-desc', array( 'media_buttons' => false ) );
?>
</span>
</label>
</div>
</fieldset>
<?php
}, 10, 2 );
// Add the script to fill the new form field with the data from the invisible column
function enqueue_admin_products_scripts( $hook ) {
if ( 'edit.php' != $hook )
return;
wp_enqueue_script( 'custom_script', get_stylesheet_directory_uri() . '/admin_quickedit.js', array( 'jquery' ), NULL, true );
}
add_action('admin_enqueue_scripts', 'enqueue_admin_products_scripts', 99);
admin_quickedit.js
jQuery(document).ready(function($) {
$('#the-list').on('click', '.editinline', function(){
var now = jQuery(this).closest('tr').find('td.column-_description').html();
if (typeof tinyMCE != "undefined") {
console.log(now);
tinyMCE.get('inline-desc').setContent(now);
console.log(tinyMCE.get('inline-desc').getContent());
}
});
});
The logs in the .js print the expected content, so that step seems to work fine, but the editor in the quick edit form is empty.
When I inspect the site code, I find a second hidden TinyMCE instance at the bottom of the site wrapped in a <form method="get">
that has the correct content.
So how do I set the content to the "correct" editor in the quick edit form?