TinyMCE in customizer

时间:2017-04-21 作者:CompactCode

我在定制器上使用TinyMce(出于obv原因)。但我遇到了一个我似乎没有答案的问题。首先,让我与您分享我的关键代码:

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

Now the problem

一切似乎都很好。我确实有一个TinyMce编辑器。它并没有表明有什么东西被改变了。当我更改其他内容并将其与更改一起保存时,也不会保存。

是否有人提供了RTE或TinyMce编辑器的工作示例,可以替换自定义程序上的textarea?

Update

只有我在customizer中定义的最后一个实例。php工作正常。到目前为止,我有14个文本区域。文本区域在14号可以正常工作,但在1-13号不行

UPDATE 2

似乎对于每个剩下的区域,他都在该区域内创建了那个数量的tinymce。因此,第一个区域有14个tinymce重叠。第二个13;第三个14等,直到最后一个只有1个,因此工作

4 个回复
最合适的回答,由SO网友:CompactCode 整理而成

通过执行以下操作,“解决”了我的问题:

问题是,每次我有一个新类时,都会调用do\\u action。但它只需要在最后调用。否则,将创建一组admin\\u print\\u footer\\u脚本。

由于我自己编写代码,目前不打算出售此代码,所以我只能计算创建的新类实例的数量。此时为14。

所以我改成这样:

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\' );
如果有人知道我如何计算在customizer中调用新类并在函数中使用它的次数。php要知道上次调用它的时间,我可以调用do\\u操作。。。这会有很大帮助

SO网友:ips

特警是的,您自己的回答对我帮助很大,我已经解决了在上次wp\\U editor版本后打印管理脚本的问题。另请参阅如何将JS setup函数作为tinymce选项传递,以将编辑器更改与WP customizer同步,使其正常工作。

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

SO网友:rudtek

看起来我回答得有点晚了,但就计数而言,您可以使用以下内容:(将计数器和\\uu construct()添加到类的顶部以供实际使用)未经测试,但应该可以继续使用。

<?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
?>

SO网友:Tom Groot

问题在于customizer.js 您尝试选择.wp-editor-area. 然而input[data-customize-setting-link="\'+ id +\'"] 不选择此输入,因为id 返回control 而不是setting.

To fix this

提供输入.wp-editor-area 一个idid="tinymce-input"

并使用它在customizer.js 通过更改input = $(\'input[data-customize-setting-link="\'+ id +\'"]\') 进入input = $(\'#tinymce-input\')