我试图弄清楚如何将 Woocommerce 变体订阅产品文本字段转换为 WYSIWYG 编辑器。
现在的样子：
如您所见，我将代码放入该字段以更新其外观，但这不适用于不知道代码的客户。如何向此字段添加文本编辑器？
问问题
2346 次
2 回答
7
函数.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);
于 2019-03-29T21:39:17.197 回答
0
无法替换变体描述，但可以隐藏（在需要时）。
可以将 WYSIWYG 编辑器添加到 Woocommerce 变体。但由于在产品变体和订阅变体上启用了 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 文件。
经过测试但无法正常工作并且存在问题：工具栏没有出现，并且编辑器在“文本”编辑器模式下保持阻塞，因此“可视”编辑器模式（选项卡）不起作用。见下文：
它只是作为普通文本区域字段工作，正确保存插补文本
于 2018-08-15T23:22:24.863 回答