Wordpress小部件的markItUp

Question

我在WP小部件中(即在widgets.php页面上，创建和编辑小部件时)使用markItUp作为文本区。

当我第一次打开这个小部件时，这个文本区被标记为I‘，但是在我点击保存之后，功能就丢失了，我又回到了一个普通的文本区。

我比较了页面保存前和保存后版本的源代码，没有不同的-obviously，因为页面不会重新加载。是否需要为每个ajax调用调用jQuery？

我试着添加

jQuery(".markitup").markItUp(mySettings);

在小部件的表单处理函数中，但这并没有帮助。我也尝试将此事件绑定到保存按钮进行更改，但这似乎没有什么不同(我很有可能完全搞错了)。

Answer 1

The jQuery

因此，您需要做的第一件事是挂钩AJAX调用，以便在保存小部件时得到通知。为此，我们将使用jQuery ajaxSuccess函数。将其放入其自己的js文件中：

// Use a self executing function so we can safely use
// $ inside and know it = jQuery
(function($){

    // Tie into all jQuery AJAX requests
    $(document).ajaxSuccess(function(e, x, o){

        // Make sure our widget is the one being saved
        // id_base will equal whatever is set in the PHP for the widget
        // In this example, we target the text widget 
        if(o.data && o.data.indexOf('id_base=text') > -1){

           // Now, lets quickly find all the right elements
           // and filter out the ones already set up, and finally
           // apply the `markItUp` call, but we will delay just to give
           // WP a chance to update the widget
           window.setTimeout( function(){
               $("textareas.markItUp:not(.markItUpEditor)").markItUp(mySettings);
           }, 200 );
        }
    });

})(jQuery);

PHP/WordPress

最后，告诉WP在widgets页面上只包含新的js文件。您需要将此代码合并到functions.php中，或者如果您正在构建小部件，则需要将其合并到widgets PHP文件中：

function register_markitup(){
    wp_enqueue_script( 'markitup-widgets', WP_PLUGIN_URL . '/your-plugin/js/markitup-ajax.js' );
}

add_action( "admin_print_scripts-widgets.php", 'register_markitup' );

编辑我在发布时有一个不正确的add_action钩子。它需要我刚刚添加的.php。代码现在是正确的。

Answer 2

Doug的解决方案效果很好。我只需要更改window.setTimeout函数，如下所示：

 window.setTimeout( function(){
   $("textarea.markItUp").each(function () {
      if (!($(this).hasClass('markItUpEditor'))) {
          $(this).markItUp(mySettings);
      }
    });                                    
 }, 200 );