最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

How to use TinyMCE in the quick edit form?

programmeradmin0浏览0评论

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?

发布评论

评论列表(0)

  1. 暂无评论