Question

我试图用wp编辑器创建一个图像小部件。我看到编辑器，但是我不能把文字变得大胆或者更大，我看到标签从视觉切换到文本。以下是我的代码：提前谢谢。

<input type="hidden" id="<?php echo esc_attr($this->get_field_id('description')); ?>" name="<?php echo esc_attr($this->get_field_name('description')); ?>" value="<?php echo esc_attr($instance['description']); ?>" />
        <?php  
            $edi_name =  esc_attr($this->get_field_name('description'));
            $content = $instance['description'];
            $editor_id_new = esc_attr($this->get_field_id('description'));
            $settings = array( 'media_buttons' => false,
              'textarea_rows' => 6,
              'textarea_name' => $edi_name,
              'teeny'         => false, 
              'menubar'     => false,
              'default_editor'   => 'tinymce',
              'quicktags' => false
              );  
            wp_editor( $content, $editor_id_new, $settings );
        ?>
        <script>
        (function($){
            tinyMCE.execCommand('mceAddEditor', false, '<?php echo $this->get_field_id('description'); ?>');
        })(jQuery);
        </script>

Answer 1

简短回答：因为有一个隐藏的小部件，首先出现TinyMCE。

答案很长（对不起，答案很长）：

转到Codex and copy the example widget Foo_Widget以确保我们正在讨论相同的代码。现在打开你的IDE（不是编辑器）并编写一个简短的测试小部件作为插件。从最小的插件标题开始...

<?php
/*
Plugin Name: Widget Test Plugin
Description: Testing plugincode
*/

...从codex添加widget代码并使用add_action()调用注册窗口小部件。现在修改窗口小部件类中的form方法，如下所示：

public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
        $title = $instance[ 'title' ];
    }
    else {
        $title = __( 'New title', 'text_domain' );
    }
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <?php

/*** add this code ***/
    $content   = 'Hello World!';
    $editor_id = 'widget_editor';

    $settings = array(
        'media_buttons' => false,
        'textarea_rows' => 3,
        'teeny'         => true,
    );

    wp_editor( $content, $editor_id, $settings );
/*** end editing ***/
}

转到您的博客，激活插件，转到小部件页面并将Foo Widget拖到侧边栏中。你会发现它会失败。

您是否在左侧看到Foo Widget说明？右键单击描述并选择“检查”。从您的开发人员工具（您有一些开发人员工具，如FireBug或Chrome DevTools，嗯？在FireFox中，您还可以选择构建＆＃39;检查元素＆＃39;）。浏览HTML代码，您将看到隐藏的＆＃39;内部有一个编辑器包装。小部件。 wp_editor in the hidden widget

您可以在右侧边栏中看到一个编辑器，其中有一个编辑器隐藏在＆＃39;左边的小部件。这不能正常工作，因为TinyMCE不知道应该使用哪个编辑器。

我们需要什么？

我们的编辑器需要唯一 ID。

/*** add this code ***/
    $rand    = rand( 0, 999 );
    $ed_id   = $this->get_field_id( 'wp_editor_' . $rand );
    $ed_name = $this->get_field_name( 'wp_editor_' . $rand );

    $content   = 'Hello World!';
    $editor_id = $ed_id;

      $settings = array(
      'media_buttons' => false,
      'textarea_rows' => 3,
      'textarea_name' => $ed_name,
      'teeny'         => true,
    );

    wp_editor( $content, $editor_id, $settings );
/*** end edit ***/

使用上面的代码再次修改form方法中的代码。我们使用rand()创建一个唯一的数字，并将此数字附加到id和name属性。但是停下来，如何保存值???

转到update方法并在第一行添加die(var_dump($new_instance));。如果您在窗口小部件上按Save，脚本将会死亡并打印出提交的值。您会看到有wp_editor_528之类的值。如果您重新加载页面并再次保存小部件，则该号码将更改为其他内容，因为它是随机数。

我如何知道小部件中设置了哪个随机数？只需发送随机数字与小部件数据。将其添加到form方法

printf(
  '<input type="hidden" id="%s" name="%s" value="%d" />',
  $this->get_field_id( 'the_random_number' ),
  $this->get_field_name( 'the_random_number' ),
  $rand
);

在更新例程中，我们现在可以使用$new_instance['the_random_number'];访问随机数，因此我们可以使用

访问编辑器内容

$rand = (int) $new_instance['the_random_number'];
$editor_content = $new_instance[ 'wp_editor_' . $rand ];
die(var_dump($editor_content));

正如您所看到的，编辑内容将被提交，您可以保存或使用它进行任何其他操作。

<强>买者

只有在视觉模式（WYSIWYG模式）中TinyMCE 不时才能正确提交编辑器内容。您必须切换到文本模式，然后按“保存”。否则，提交预定义内容（在这种情况下为$content = 'Hello World!';）。我现在不知道为什么，但有一个简单的解决方法。

编写一个小的jQuery脚本，触发点击＆＃39;文本＆＃39;保存小部件内容之前的选项卡。

JavaScript（在您的主题/插件文件夹中保存为widget_script.js）：

jQuery(document).ready(
    function($) {
        $( '.widget-control-save' ).click(
            function() {
                // grab the ID of the save button
                var saveID   = $( this ).attr( 'id' );

                // grab the 'global' ID
                var ID       = saveID.replace( /-savewidget/, '' );

                // create the ID for the random-number-input with global ID and input-ID
                var numberID = ID + '-the_random_number';

                // grab the value from input field
                var randNum  = $( '#'+numberID ).val();

                // create the ID for the text tab
                var textTab  = ID + '-wp_editor_' + randNum + '-html';

                // trigger a click
                $( '#'+textTab ).trigger( 'click' );

            }
        );
    }
);

排队

function widget_script(){

    global $pagenow;

    if ( 'widgets.php' === $pagenow )
        wp_enqueue_script( 'widget-script', plugins_url( 'widget_script.js', __FILE__ ), array( 'jquery' ), false, true );

}

add_action( 'admin_init', 'widget_script' );

那就是它。容易，不是吗？ ;）

获得撰写此测试插件@ Ralf912的作者的实际信用

参考网址：Why Can't wp_editor Be Used in a Custom Widget?

如何在自定义小部件中添加wp_editor

1 个答案: