Compatibility issue

[EmilEriksen]

Hi,

I'm trying to make a TinyMCE Customizer field control. I know this isn't directly related to your plugin, but I was hoping you could point me in the right direction.

When I activate your plugin the visual tab of my TinyMCE control goes blank. I can switch to the text tab and back or just click the visual tab and the visual editor will appear but it won't save anything. I have no errors in my console except for an annoying Uncaught TypeError: c is not a function which I also get when your plugin isn't activated and it doesn't seem to affect anything. When your plugin is actived I can also use the media selector with my TinyMCE control which I cannot if it's not activated.

PHP code:

class _KEE_WP_Editor extends WP_Customize_Control {

    public $type = 'editor';

    public function render_content() { ?>

        <label class="kee-editor">
            <span class="customize-control-title">
                <?php echo esc_attr( $this->label ); ?>

                <?php if ( ! empty( $this->description ) ) : ?>
                    <?php // The description has already been sanitized in the Fields class, no need to re-sanitize it. ?>
                    <span class="description customize-control-description"><?php echo $this->description; ?></span>
                <?php endif; ?>
            </span>

            <input type="hidden" <?php $this->link(); ?> value="<?php echo esc_textarea( $this->value() ); ?>">

            <?php
                $settings = array(
                    'textarea_name'    => $this->id,
                    'teeny'            => true,
                    'default_editor'   => 'tmce'
                );
                wp_editor( wp_kses_post( $this->value() ), $this->id, $settings );
                _WP_Editors::editor_js();
            ?>

        </label>
        <?php
    }
}

I enqueue the scripts needed for the editor in customize_controls_enqueue_scripts.

JS:

(function($) {
    wp.customizerCtrlEditor = {

        init: function() {

            $(window).load(function() {

                $('.kee-editor').find('textarea.wp-editor-area').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.on('change', function(e) {
                            editor.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);

Do you have any idea what might be causing the conflict? Thank you!