Skip to content

Compatibility issue #38

Description

@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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions