TinyMCE in customizer is Not working Properly
Question
I used this code for tinyMCE for my wordpress theme https://wordpress.stackexchange.com/a/274333/77065
but when I try to put text and use option like Bold nothing works, Even after entering text publish button remain changed. There is missing something like js.
Errors I’m getting in inspect
Uncaught TypeError: Cannot read property 'refreshContentEditable' of undefined
in tinymce.min.js
Uncaught Error: no such method 'instance' for menu widget instance
jquery.js
Here is full code
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);
And my javascript for 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 );
0
theme-customizer, tinymce
3 years
2019-12-03T01:34:25-05:00
2019-12-03T01:34:25-05:00 0 Answers
68 views
0
Leave an answer