web-dev-qa-db-fra.com

TinyMCE dans le customizer

J'utilise TinyMce sur mon customizer (pour des raisons évidentes). Mais je rencontre un problème dont je ne semble pas avoir la réponse. Laissez-moi d'abord vous partager mes codes qui sont cruciaux:

Functions.php 

// text editor

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 class="wp-editor-area" 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,
                'quicktags' => false,
                'textarea_rows' => 5,
            );
            $this->filter_editor_setting_link();
            wp_editor($this->value(), $this->id, $settings );
            ?>
        </label>
        <?php
        do_action('admin_footer');
        do_action('admin_print_footer_scripts');
    }
    private function filter_editor_setting_link() {
        add_filter( 'the_editor', function( $output ) { return preg_replace( '/<textarea/', '<textarea ' . $this->get_link(), $output, 1 ); } );
    }
}

function editor_customizer_script() {
    wp_enqueue_script( 'wp-editor-customizer', get_template_directory_uri() . '/inc/customizer.js', array( 'jquery' ), Rand(), true );
}
add_action( 'customize_controls_enqueue_scripts', 'editor_customizer_script' );

Customizer.php 

    // content 1 text

$wp_customize->add_setting('home_content1_text', array(
    'default' => 'Here goes an awesome title!',
    'transport' => 'postMessage',
));
$wp_customize->add_control(new Text_Editor_Custom_Control( $wp_customize, 'home_content1_text', array(
    'label' => __('Text content 1', 'DesignitMultistore'),
    'section' => 'home_content_1',
    'description' => __('Here you can add a title for your content', 'DesignitMultistore'),
    'priority' => 5,
)));

    //slider text 1 control
$wp_customize->add_setting('slider_text_1', array(
    'default' => _x('Welcome to the Designit Multistore theme for Wordpress', 'DesignitMultistore'),
    'transport' => 'postMessage',
));
$wp_customize->add_control(new Text_Editor_Custom_Control( $wp_customize, 'slider_text_1', array(
    'description' => __('The text for first image for the slider', 'DesignitMultistore'),
    'label' => __('Slider Text 1', 'DesignitMultistore'),
    'section' => 'Designit_slider_slide1',
    'priority' => 3,
)));

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

Maintenant le problème

Tout semble bien fonctionner. J'ai un éditeur TinyMce. Ce n'est pas enregistrer que quelque chose a été changé. Et quand je change quelque chose et le sauvegarde avec les modifications n'est pas enregistré non plus.

Quelqu'un a-t-il un exemple de travail d'un éditeur RTE ou TinyMce qui remplace les zones de texte sur le personnaliseur?

Mettre à jour

Seule la dernière instance que je définis dans mon customizer.php fonctionne. A présent, j'ai 14 textarea. La zone de texte fonctionne bien le 14 mais pas le 1-13

MISE À JOUR 2

Il semble que pour chaque zone restante, il crée ce nombre de tinymce dans cette zone. Donc, la première zone a 14 tinymce qui se chevauchent. Le second 13; le 14 14 etc etc Jusqu'à ce que le dernier a seulement 1 et donc travailler

tinymcetheme-customizer
5
CompactCode

Mon problème a été "résolu" en procédant comme suit:

Le problème est que do_action est appelé chaque fois que j'ai une nouvelle classe. Mais il doit être appelé que dans le dernier. Sinon, cela crée un tas de scripts admin_print_footer.

Étant donné que j'écris moi-même le code et que je n'ai pas l'intention de le vendre pour l'instant, je ne peux compter que le nombre de nouvelles instances de classe que je crée. Quel est 14 à ce stade.

Alors je l'ai modifié comme ça:

Functions.php 

class Text_Editor_Custom_Control extends WP_Customize_Control
{

    /**
     * Render the content on the theme customizer page
     */
    public function render_content()
    {
        static $i = 1;
        ?>
        <label>
            <span class="customize-text_editor"><?php echo esc_html( $this->label ); ?></span>
            <input class="wp-editor-area" type="hidden" <?php $this->link(); ?> value="<?php echo esc_textarea( $this->value() ); ?>">
            <?php
            $content = $this->value();
            $editor_id = $this->id;
            $settings = array(
                'textarea_name' => $this->id,
                'media_buttons' => false,
                'drag_drop_upload' => false,
                'teeny' => true,
                'quicktags' => false,
                'textarea_rows' => 5,
            );
            wp_editor($content, $editor_id, $settings );


            if( $i == 14) {
                do_action('admin_print_footer_scripts');
            }
            $i++;

            ?>
        </label>
        <?php
    }
};

function editor_customizer_script() {
    wp_enqueue_script( 'wp-editor-customizer', get_template_directory_uri() . '/inc/customizer.js', array( 'jquery' ), false, true );
}
add_action( 'customize_controls_enqueue_scripts', 'editor_customizer_script' );

Si quelqu'un sait comment je peux compter le nombre de fois que j'appelle cette nouvelle classe dans mon personnalisateur et que je l'utilise dans mon functions.php pour savoir quand il s'appelle pour la dernière fois, je peux appeler le do_action ... Cela aiderait beaucoup

2
CompactCode

SwAt.Be, votre propre réponse m'a aidé beaucoup et j'ai résolu le problème de l'impression des scripts d'administration après la dernière version de wp_editor. Voyez également comment je passe la fonction d’installation JS en tant qu’option tinymce pour synchroniser les modifications de l’éditeur avec le personnalisateur WP afin de le faire fonctionner correctement.

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);
1
ips

Le problème réside dans customizer.js où vous essayez de sélectionner le .wp-editor-area. Cependant, le input[data-customize-setting-link="'+ id +'"] ne sélectionne pas cette entrée car la id renvoie la control au lieu de la setting.

Pour résoudre ce problème

donnez à l'entrée .wp-editor-area un identifiant id="tinymce-input"

et utilisez-le pour sélectionner cette entrée dans votre customizer.js en remplaçant input = $('input[data-customize-setting-link="'+ id +'"]') par input = $('#tinymce-input')

0
Tom Groot

On dirait que je suis un peu trop tard pour la réponse, mais en ce qui concerne le nombre, vous pouvez utiliser ceci: (ajoutez le compteur et __construct () au sommet de votre classe pour une utilisation réelle) NON testé mais devrait être bon à utiliser .

<?php
class Text_Editor_Custom_Control {
    public static $counter = 0;

    function __construct() {
        self::$counter++;
        self::$lastcall= date('Y-m-d H:i:s');
    }
}

new Text_Editor_Custom_Control();
new Text_Editor_Custom_Control();
new Text_Editor_Custom_Control();

echo Text_Editor_Custom_Control::$counter;  //would be 3

echo Text_Editor_Custom_Control::$counter;  //shows datetime of last call
?>
0
rudtek