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

问题描述：

我尝试使用wp编辑器创建图像小部件。我看到编辑器，但我不能让文本变得粗体或更大，无论我看到从视觉到文本的标签切换。以下是我的代码：在此先感谢。如何在自定义小部件中添加wp_editor

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

答

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

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

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

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

...添加从抄本部件代码和注册与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描述？在描述中点击右键并从开发工具中选择'Inspect'（你有一些像FireBug或Chrome DevTools这样的开发工具，在FireFox中你也可以选择'Inspect Element'中的构建）。浏览HTML代码，你会看到'隐藏'小部件中有一个编辑器包装。 wp_editor in the hidden widget

您可以在右侧的边栏中看到一个编辑器，左侧的“隐藏”窗口小部件中有一个编辑器。这不能正常工作，因为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));

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

买者

编辑内容只有正确提交，如果TinyMCE的是视觉模式（所见即所得模式）不。您必须切换到文本模式befor按'保存'。否则，提交预定义的内容（在这种情况下为$content = 'Hello World!';）。我现在不是为什么，但是对此有一个简单的解决方法。

编写一个小的jQuery脚本，在保存小部件内容之前触发“文本”选项卡上的点击。

的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

相关推荐