将所见即所得编辑器添加到 WooCommerce 产品自定义选项卡 [重复]

Question

我构建了一个自定义解决方案，以在我的 WooCommerce 产品页面上显示自定义选项卡。我可以通过管理区域管理它们。问题是，当我将一些代码（例如来自 visual composer 的代码添加到其中时，它会在产品页面上以 1:1 的比例显示。所以用户会看到代码片段。我现在得到的解决方案是一个简单的输入字段。如何将其更改为 WYSIWG 编辑器？这就是我定义管理区域的地方。

add_action( 'woocommerce_product_options_general_product_data', 'wp_bibel_de_add_custom_product_field' );

function wp_bibel_de_add_custom_product_field() {
    woocommerce_wp_textarea_input( 
        array( 
            'id'          => '_custom_tab_description', 
            'label'       => __( 'Custom Tab Description' )
        )
    );
}

这是我写的完整代码

add_action( 'woocommerce_product_options_general_product_data', 'wp_amaoni_de_add_custom_product_field' );

function wp_amaoni_de_add_custom_product_field() {
    woocommerce_wp_textarea_input( 
        array( 
            'id'          => '_custom_tab_description', 
            'label'       => __( 'Custom Tab Description' )
        )
    );
}

add_action( 'woocommerce_process_product_meta', 'wp_amaoni_de_save_custom_product_field' );

function wp_amaoni_de_save_custom_product_field( $post_id ){

    $custom_tab_description = $_POST['_custom_tab_description'];

    if( !empty( $custom_tab_description ) ) :
        update_post_meta( $post_id, '_custom_tab_description', esc_html( $custom_tab_description ) );
    endif; 
}
add_filter( 'woocommerce_product_tabs', 'wp_amaoni_de_add_woocommerce_product_tabs' );

function wp_amaoni_de_add_woocommerce_product_tabs( $tabs ) {
    $tabs['wp_amaoni_de_custom_tab'] = array(
        'title'     => __( 'New Product Tab' ),
        'priority'  => 50,
        'callback'  => 'wp_amaoni_de_new_product_tab_callback'
    );

    return $tabs;
}

function wp_amaoni_de_new_product_tab_callback() {
    global $post;

    echo wpautop( get_post_meta( $post->ID, '_custom_tab_description', true ) ); 
}

Answer 1

add_action('woocommerce_product_options_general_product_data', 'wp_amaoni_de_add_custom_product_field');

function wp_amaoni_de_add_custom_product_field() {

    global $post;

    $content = $post->post_content;
    $editor_id = '_custom_tab_description';

    wp_editor($content, $editor_id);
}