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.

enter image description here

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
, Sandeep 3 years 2019-12-03T01:34:25-05:00 0 Answers 68 views 0

Leave an answer

Browse
Browse