I use TinyMce on my customizer (for obv reasons).
But i encounter a problem that i do not seem to have the answer to.
Let me first share you my code that are crucial:
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
Everything seems to work fine. I do have an TinyMce editor.
Its not registering that something has been changed. And when i change something else and save it along with the changes is not saved either.
Does someone have a working example of a RTE or TinyMce editor that replaces the textarea’s on the customizer?
Update
Only the last instance that i define in my customizer.php works. By now i have 14 textarea’s. The text area works fine on the 14th but not on 1-13th
UPDATE 2
It seems that for each area that remains he creates that number of tinymce’s within that area. So the first area has 14 tinymce’s overlapping eachother. The second 13 ; the thirth 14 etc etc. Until the last has only 1 and therefor working