How to use TinyMCE in the quick edit form?
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?