在 Woocommerce 中的 WYSIWYG 编辑器字段中添加或替换变体字段

我正在尝试弄清楚如何将 Woocommerce 变体订阅产品文本字段转换为所见即所得编辑器。

How it looks now:

正如您所看到的，我将代码放入该字段以更新其外观，但这对于不懂代码的客户来说不起作用。如何向该字段添加文本编辑器？

函数.php：

/**
* Adding variation specifications field
* 
* @param $loop
* @param $variation_data
* @param $variation
*/
function demo_product_variation_fields($loop, $variation_data, $variation)
{
    wp_enqueue_editor();

    woocommerce_wp_textarea_input(
        array(
            'id' => "demo_variation_specs{$loop}",
            'name' => "demo_variation_specs[{$loop}]",
            'value' => get_post_meta($variation->ID, '_demo_variation_specs', true),
            'label' => __('Specifications', 'woocommerce'),
            'desc_tip' => true,
            'description' => __('Some description.', 'woocommerce'),
            'wrapper_class' => 'form-row form-row-full',
        )
    );
}

function demo_save_product_variation_fields($variation_id, $loop)
{
    $text_field = $_POST['demo_variation_specs'][$loop];

    update_post_meta($variation_id, '_demo_variation_specs', $text_field);
}

function demo_load_variation_fields($variations)
{
    $variations['demo_variation_specs'] = get_post_meta(
        $variations['variation_id'],
        '_demo_variation_specs',
        true
    );

    return $variations;
}

add_action('woocommerce_product_after_variable_attributes', 'demo_product_variation_fields', 10, 3);
add_action('woocommerce_save_product_variation', 'demo_save_product_variation_fields', 10, 2);
add_filter('woocommerce_available_variation', 'demo_load_variation_fields');

function demo_manage_admin_js()
{
    wp_enqueue_editor();

    $theme_version = wp_get_theme()->get('Version');

    wp_register_script(
        'variations-editor',
        get_bloginfo('stylesheet_directory') . '/assets/js/variations-editor.js',
        array('jquery', 'quicktags'),
        $theme_version,
        true
    );

    wp_enqueue_script('variations-editor');

    /**
     * Example of adding a plugin to the WP JS editor
     */
    wp_register_script(
        'tinymce_table_plugin',
        get_bloginfo('stylesheet_directory') . '/assets/js/tinymce/plugins/table/plugin.min.js',
        array('wp-tinymce-root'),
        $theme_version,
        true
    );

    wp_enqueue_script('tinymce_table_plugin');
}

add_action('admin_enqueue_scripts', 'demo_manage_admin_js');

wp-content/themes/demo/assets/js/variations-editor.js：

var documentBody = $(document.body);

function initEditor(event) {
    var editorConfig = wp.editor.getDefaultSettings;

    editorConfig.mediaButtons = true;
    editorConfig.quicktags = true;
    editorConfig.tinymce = {
        theme:
            "modern",
        skin:
            "lightgray",
        language:
            "en",
        relative_urls: false,
        remove_script_host:
            false,
        convert_urls:
            false,
        browser_spellcheck:
            true,
        fix_list_elements:
            true,
        entities:
            "38,amp,60,lt,62,gt",
        entity_encoding:
            "raw",
        keep_styles:
            false,
        resize:
            "vertical",
        menubar:
            false,
        branding:
            false,
        preview_styles:
            "font-family font-size font-weight font-style text-decoration text-transform",
        end_container_on_empty_block:
            true,
        wpeditimage_html5_captions:
            true,
        wp_lang_attr:
            "en-US",
        wp_keep_scroll_position:
            false,
        wp_shortcut_labels:
            {
                "Heading 1":
                    "access1", "Heading 2":
                    "access2", "Heading 3":
                    "access3", "Heading 4":
                    "access4", "Heading 5":
                    "access5", "Heading 6":
                    "access6", "Paragraph":
                    "access7", "Blockquote":
                    "accessQ", "Underline":
                    "metaU", "Strikethrough":
                    "accessD", "Bold":
                    "metaB", "Italic":
                    "metaI", "Code":
                    "accessX", "Align center":
                    "accessC", "Align right":
                    "accessR", "Align left":
                    "accessL", "Justify":
                    "accessJ", "Cut":
                    "metaX", "Copy":
                    "metaC", "Paste":
                    "metaV", "Select all":
                    "metaA", "Undo":
                    "metaZ", "Redo":
                    "metaY", "Bullet list":
                    "accessU", "Numbered list":
                    "accessO", "Insert\/edit image":
                    "accessM", "Remove link":
                    "accessS", "Toolbar Toggle":
                    "accessZ", "Insert Read More tag":
                    "accessT", "Insert Page Break tag":
                    "accessP", "Distraction-free writing mode":
                    "accessW", "Add Media":
                    "accessM", "Keyboard Shortcuts":
                    "accessH"
            }
        ,
        toolbar1:
            "formatselect,bold,italic,bullist,numlist,link,table",
        wpautop:
            false,
        indent:
            true,
        elementpath:
            false,
        plugins:
            "table,charmap,colorpicker,hr,lists,paste,tabfocus,textcolor,wordpress,wpautoresize,wpeditimage,wpgallery,wplink,wptextpattern",
        init_instance_callback: function (editor) {
            editor.on('dirty', function () {
                editor.save();
            });
        }
    };

    var textArea = $('.woocommerce_variation textarea');

    textArea.each(function (index) {
        var textAreaId = $(this).attr('id');

        if (tinymce.get(textAreaId)) {
            wp.editor.remove(textAreaId);
        }

        wp.editor.initialize(textAreaId, editorConfig);

        var editor = tinymce.get(textAreaId);

        editor.on('blur', function () {
            $('#' + textAreaId).trigger('change');
        });
    });
}

documentBody.on('woocommerce_variations_loaded', {name: 'woocommerce_variations_loaded'}, initEditor);
documentBody.on('woocommerce_variations_added', {name: 'woocommerce_variations_added'}, initEditor);
documentBody.on('woocommerce_variations_removed', {name: 'woocommerce_variations_removed'}, initEditor);