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?

Topic wp-editor quick-edit tinymce forms Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.