我在定制器上使用TinyMce(出于obv原因)。但我遇到了一个我似乎没有答案的问题。首先,让我与您分享我的关键代码:
Functions.php
// text editor
if ( ! class_exists( \'WP_Customize_Control\' ) )
return NULL;
/**
* Class to create a custom tags control
*/
class Text_Editor_Custom_Control extends WP_Customize_Control
{
/**
* Render the content on the theme customizer page
*/
public function render_content()
{
?>
<label>
<span class="customize-text_editor"><?php echo esc_html( $this->label ); ?></span>
<input class="wp-editor-area" type="hidden" <?php $this->link(); ?> value="<?php echo esc_textarea( $this->value() ); ?>">
<?php
$settings = array(
\'textarea_name\' => $this->id,
\'media_buttons\' => false,
\'drag_drop_upload\' => false,
\'teeny\' => true,
\'quicktags\' => false,
\'textarea_rows\' => 5,
);
$this->filter_editor_setting_link();
wp_editor($this->value(), $this->id, $settings );
?>
</label>
<?php
do_action(\'admin_footer\');
do_action(\'admin_print_footer_scripts\');
}
private function filter_editor_setting_link() {
add_filter( \'the_editor\', function( $output ) { return preg_replace( \'/<textarea/\', \'<textarea \' . $this->get_link(), $output, 1 ); } );
}
}
function editor_customizer_script() {
wp_enqueue_script( \'wp-editor-customizer\', get_template_directory_uri() . \'/inc/customizer.js\', array( \'jquery\' ), rand(), true );
}
add_action( \'customize_controls_enqueue_scripts\', \'editor_customizer_script\' );
Customizer.php
// content 1 text
$wp_customize->add_setting(\'home_content1_text\', array(
\'default\' => \'Here goes an awesome title!\',
\'transport\' => \'postMessage\',
));
$wp_customize->add_control(new Text_Editor_Custom_Control( $wp_customize, \'home_content1_text\', array(
\'label\' => __(\'Text content 1\', \'DesignitMultistore\'),
\'section\' => \'home_content_1\',
\'description\' => __(\'Here you can add a title for your content\', \'DesignitMultistore\'),
\'priority\' => 5,
)));
//slider text 1 control
$wp_customize->add_setting(\'slider_text_1\', array(
\'default\' => _x(\'Welcome to the Designit Multistore theme for Wordpress\', \'DesignitMultistore\'),
\'transport\' => \'postMessage\',
));
$wp_customize->add_control(new Text_Editor_Custom_Control( $wp_customize, \'slider_text_1\', array(
\'description\' => __(\'The text for first image for the slider\', \'DesignitMultistore\'),
\'label\' => __(\'Slider Text 1\', \'DesignitMultistore\'),
\'section\' => \'Designit_slider_slide1\',
\'priority\' => 3,
)));
Customizer.JS
( function( $ ) {
wp.customizerCtrlEditor = {
init: function() {
$(window).load(function(){
var adjustArea = $(\'textarea.wp-editor-area\');
adjustArea.each(function(){
var tArea = $(this),
id = tArea.attr(\'id\'),
input = $(\'input[data-customize-setting-link="\'+ id +\'"]\'),
editor = tinyMCE.get(id),
setChange,
content;
if(editor){
editor.onChange.add(function (ed, e) {
ed.save();
content = editor.getContent();
clearTimeout(setChange);
setChange = setTimeout(function(){
input.val(content).trigger(\'change\');
},500);
});
}
if(editor){
editor.onChange.add(function (ed, e) {
ed.save();
content = editor.getContent();
clearTimeout(setChange);
setChange = setTimeout(function(){
input.val(content).trigger(\'change\');
},500);
});
}
tArea.css({
visibility: \'visible\'
}).on(\'keyup\', function(){
content = tArea.val();
clearTimeout(setChange);
setChange = setTimeout(function(){
input.val(content).trigger(\'change\');
},500);
});
});
});
}
};
wp.customizerCtrlEditor.init();
} )( jQuery );
Now the problem
一切似乎都很好。我确实有一个TinyMce编辑器。它并没有表明有什么东西被改变了。当我更改其他内容并将其与更改一起保存时,也不会保存。
是否有人提供了RTE或TinyMce编辑器的工作示例,可以替换自定义程序上的textarea?
Update
只有我在customizer中定义的最后一个实例。php工作正常。到目前为止,我有14个文本区域。文本区域在14号可以正常工作,但在1-13号不行
UPDATE 2
似乎对于每个剩下的区域,他都在该区域内创建了那个数量的tinymce。因此,第一个区域有14个tinymce重叠。第二个13;第三个14等,直到最后一个只有1个,因此工作
SO网友:ips
特警是的,您自己的回答对我帮助很大,我已经解决了在上次wp\\U editor版本后打印管理脚本的问题。另请参阅如何将JS setup函数作为tinymce选项传递,以将编辑器更改与WP customizer同步,使其正常工作。
if (class_exists(\'WP_Customize_Control\')) {
class WP_Customize_Teeny_Control extends WP_Customize_Control {
function __construct($manager, $id, $options) {
parent::__construct($manager, $id, $options);
global $num_customizer_teenies_initiated;
$num_customizer_teenies_initiated = empty($num_customizer_teenies_initiated)
? 1
: $num_customizer_teenies_initiated + 1;
}
function render_content() {
global $num_customizer_teenies_initiated, $num_customizer_teenies_rendered;
$num_customizer_teenies_rendered = empty($num_customizer_teenies_rendered)
? 1
: $num_customizer_teenies_rendered + 1;
$value = $this->value();
?>
<label>
<span class="customize-text_editor"><?php echo esc_html($this->label); ?></span>
<input id="<?php echo $this->id ?>-link" class="wp-editor-area" type="hidden" <?php $this->link(); ?> value="<?php echo esc_textarea($value); ?>">
<?php
wp_editor($value, $this->id, [
\'textarea_name\' => $this->id,
\'media_buttons\' => false,
\'drag_drop_upload\' => false,
\'teeny\' => true,
\'quicktags\' => false,
\'textarea_rows\' => 5,
// MAKE SURE TINYMCE CHANGES ARE LINKED TO CUSTOMIZER
\'tinymce\' => [
\'setup\' => "function (editor) {
var cb = function () {
var linkInput = document.getElementById(\'$this->id-link\')
linkInput.value = editor.getContent()
linkInput.dispatchEvent(new Event(\'change\'))
}
editor.on(\'Change\', cb)
editor.on(\'Undo\', cb)
editor.on(\'Redo\', cb)
editor.on(\'KeyUp\', cb) // Remove this if it seems like an overkill
}"
]
]);
?>
</label>
<?php
// PRINT THEM ADMIN SCRIPTS AFTER LAST EDITOR
if ($num_customizer_teenies_rendered == $num_customizer_teenies_initiated)
do_action(\'admin_print_footer_scripts\');
}
}
}
// TRY IT
add_action(\'customize_register\', function ($wp_customize) {
$wp_customize->add_section(\'footer_section\' , [
\'title\' => __(\'Footer\', \'musiccase\'),
\'priority\' => 100
]);
// 1st EDITOR
$wp_customize->add_setting(\'footer_contact\', [
\'type\' => \'option\'
]);
$wp_customize->add_control(new WP_Customize_Teeny_Control($wp_customize, \'footer_contact\', [
\'label\' => __(\'Contact Info\', \'musiccase\'),
\'section\' => \'footer_section\'
]));
// 2nd EDITOR
$wp_customize->add_setting(\'footer_contact_2\', [
\'type\' => \'option\'
]);
$wp_customize->add_control(new WP_Customize_Teeny_Control($wp_customize, \'footer_contact_2\', [
\'label\' => __(\'Contact Info 2\', \'musiccase\'),
\'section\' => \'footer_section\'
]));
}, 20);