web-dev-qa-db-ja.com

カスタマイザ内のTinyMCE

私は自分のカスタマイザでTinyMceを使っています（わかりにくい理由で）。しかし、答えがないようです。最初に、重要なコードを紹介しましょう。

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

今問題 -

すべてうまくいっているようです。私はTinyMceエディタを持っています。それは何かが変更されたことを登録していません。そして、私が何か他のものを変更して、変更と一緒にそれを保存するときも保存されません。

カスタマイザ上のテキストエリアを置き換えるRTEまたはTinyMceエディタの実用的な例がありますか。

アップデート

私のcustomizer.phpで定義した最後のインスタンスだけが動作します。今までに14個のtextareaがあります。テキスト領域は14日には正常に機能しますが、1〜13日には機能しません

アップデート2

残っているエリアごとに、そのエリア内にその数の住居を作成したようです。そのため、最初の領域は14個の重複部分が重なり合っています。二番目の13;最後の人は1人しかいないのでそれまでは働いています。

tinymcetheme-customizer
5
CompactCode

私の問題は次のようにして解決されました。

問題は、do_actionが新しいクラスを持つたびに呼び出されることです。しかし、それは最後にのみ呼び出される必要があります。そうでなければ、たくさんのadmin_print_footer_scriptsが作成されます。

私は自分でコードを書いているので、今のところこれを販売するつもりはないので、作成した新しいクラスインスタンスの数を数えることができます。現時点で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' );

誰かが私がどのように私が私のカスタマイザでその新しいクラスを呼ぶかを数えることができる方法を知っていて、最後にそれが呼ばれたとき私がdo_actionを呼ぶことができる時を知るために私のfunctions.phpでそれを使う…

2
CompactCode

SwAt.Be、あなた自身の答えは私にたくさん助けたそして私はwp_editorの最後の表現の後に管理者スクリプトを印刷する問題を釘付けにした。また、エディターの変更を同期するためのJSセットアップ機能をTinymceオプションとしてWPカスタマイザーで渡して正しく機能させる方法も参照してください。

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

問題は、customizer.jsを選択しようとしている.wp-editor-area内にあります。ただし、idはcontrolではなくsettingを返すため、input[data-customize-setting-link="'+ id +'"]はこの入力を選択しません。

これを修正するには

入力.wp-editor-areaにid id="tinymce-input"を与えます

input = $('input[data-customize-setting-link="'+ id +'"]')をinput = $('#tinymce-input')に変更することで、それを使ってcustomizer.js内のこの入力を選択します。

0
Tom Groot

私は答えには少し遅すぎるように見えますが、あなたがこれを使うことができる数に関しては：（実際の使用のためにあなたのクラスの先頭にカウンタと__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
?>
0
rudtek