Text_Editor_Custom_control working?

[bainternet]

Did you get the Text_Editor_Custom_control to work?

[stri8ed]

Found the problem. The tinyMCE scripts get outputed in the hook "admin_print_footer_scripts". In the theme-customizer, this hook never gets fired, and as a result the scripts are not loaded. To fix, simply add this immediately after calling wp_editor:

if( did_action( 'admin_print_footer_scripts' ) == 0 ) { do_action('admin_print_footer_scripts'); }

[stri8ed]

I was having an issue where the editor dropdown menus (fonts, colors etc..) where not showing up. It seems the issue is related to the z-index. Adding this CSS to my control got it working:

div[role="listbox"] { z-index: 999999999 !important; }

[madebyguerrilla]

I'm also having an issue with the text editor. I have it set up, but whenever I type anything into it, it never allows me to save and doesn't show what I've typed into the spot in my theme.

I tried the recommendation stri8ed mentioned above in the text-editor-custom-control.php file, but it didn't fix the issue for me.

Any recommendations?

[pixedelic]

I "solved" in this way, but let me know if someone has a better solution please:

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 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
                    );
                    wp_editor($this->value(), $this->id, $settings );

                    do_action('admin_footer');
                    do_action('admin_print_footer_scripts');

                  ?>
                </label>
            <?php
       }
}

and, in the javascript file load via "customize_controls_enqueue_scripts" hook:

( function( $ ) {
    wp.customizerCtrlEditor = {

        init: function() {

            $(window).load(function(){

                $('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.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 );

Part of this solution is taken from http://digitalzoomstudio.net/2014/10/10/wordpress-theme-customizer-how-to-add-a-wordpress-editor-field/

[cafesk8]

Hello,

I tried the pixedelic solution, but it didn't help. Has anyone resolved this issue?

Thanks

[EvanHerman]

I was having issues with the wysiwyg field as well.

You can change textarea-custom-control.php to the following to get things working:

<?php
if ( ! class_exists( 'WP_Customize_Control' ) )
    return NULL;
/**
 * Class to create a custom tags control
 */
class Textarea_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 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
                    );
                    wp_editor($this->value(), $this->id, $settings );

                    do_action('admin_footer');
                    do_action('admin_print_footer_scripts');

                  ?>
                </label>
            <?php
       }
}

Thanks to @pixedelic for the majority of that solution.

[malthemilthers]

I followed @pixedelic's approach, and it works. Except the link icon in the editor doesn't do anything. And this was kinda the main reason for me to have an editor in the customizer. Did anyone else get the link to work?

[malthemilthers]

Oh, I realised that it was intact working, but that the z-index was lower than the customisers preview. I fixed it by including this:

<style>
    #wp-link-wrap {
        z-index: 99999999999999;
    }
    #wp-link-backdrop {
        z-index: 99999999999999;
    }
</style>

Looks like a hack, but it works :D

[daronspence]

Just a note to anyone else who stumbles over this, you'll need to add this to the CSS above for WP v4.5+ since they added the new inline link feature.

#wp-link-wrap {
  z-index: 99999999999999 !important;
}
#wp-link-backdrop {
  z-index: 99999999999999 !important;
}
.mce-floatpanel, .mce-toolbar-grp.mce-inline-toolbar-grp {
  z-index: 99999999999999 !important;
}

Unfortunately, the inline link wrapper does not include an ID to latch onto so we have to settle for the above. Luckily, it would make sense that other inline toolbars would need to be visible so a high z-index ins't a bad thing for unrelated elements, just unnecessary. The .mce-floatpanel class is what is used by the "h1, h2, h3, etc" dropdown so it's good to have that as well!

[versdivers]

I tried everything here and only the last index works. All the other text area's before that do not work notice when changed

[tareqchy]

Thanks @EvanHerman and @pixedelic for wonderful solution. It works for me :) Cheers!

[versdivers]

Just a notification here. When you use multiple text area's on 1 page it create X times text area for each textarea (so you have overlapping text area's). You can see the solution here : https://wordpress.stackexchange.com/questions/264446/tinymce-in-customizer/264636?noredirect=1#comment392646_264636