Text_Editor_Custom_control working? about wordpress-theme-customizer-custom-controls HOT 12 OPEN

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/

from wordpress-theme-customizer-custom-controls.

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

from wordpress-theme-customizer-custom-controls.

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');
}

from wordpress-theme-customizer-custom-controls.

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; }

from wordpress-theme-customizer-custom-controls.

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?

from wordpress-theme-customizer-custom-controls.

Hello,

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

Thanks

from wordpress-theme-customizer-custom-controls.

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.

from wordpress-theme-customizer-custom-controls.

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?

from wordpress-theme-customizer-custom-controls.

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

from wordpress-theme-customizer-custom-controls.

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!

from wordpress-theme-customizer-custom-controls.

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

from wordpress-theme-customizer-custom-controls.

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

from wordpress-theme-customizer-custom-controls.