Question

我试图弄清楚如何将Woocommerce Variation Subscription订阅产品文本字段转换为WYSIWYG编辑器。

现在的样子：

如您所见，我将代码放入该字段中以更新其外观，但这对于不知道代码的客户来说是行不通的。如何在此字段中添加文本编辑器？

Answer 1

无法替换版本说明，但可以将其隐藏（如有需要）。

可以向Woocommerce版本添加WYSIWYG编辑器。 但是由于在产品变体和订阅变体上启用了jQuery和Ajax，因此无法正常工作。

代码如下：

// Add WYSIWYG custom field in Variation Settings
add_action( 'woocommerce_product_after_variable_attributes', 'variation_settings_fields', 10, 3 );
function variation_settings_fields( $loop, $variation_data, $variation ) {

    $text_area = get_post_meta($variation->ID, '_description2', true) ? get_post_meta($variation->ID, '_description2', true) : '';
    $args['textarea_rows'] = 6;

    echo '<p>'.__( "Description 2", "woocommerce" ).'</p>';

    wp_editor( $text_area, "description2_$loop", $args );
}
// Save WYSIWYG custom field value as Variation post meta data
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );
function save_variation_settings_fields( $variation_id, $loop ) {
    if( isset( $_POST["description2_$loop"] ) )
        update_post_meta( $variation_id, '_description2', wp_kses_post( $_POST["description2_$loop"] ) );
}

代码进入您的活动子主题（或活动主题）的function.php文件中。。

经过测试，但不能正常工作，并且存在错误：工具栏没有出现，并且编辑器在“文本”编辑器模式下处于阻塞状态，因此“可视”编辑器模式（选项卡）没有不行见下文：

它只是正常的文本区域，可以正确保存估算的文本

Answer 2

functions.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', 'garmin_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);

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

2 个答案: