将jQuery函数添加到管理页面

时间：2011-07-27 作者：markratledge

我需要在admin中的post/page编辑器中添加一些文档就绪jQuery。我正在破解一个旧插件，该插件向编辑器页面添加一个文本框，并处理将该文本插入模板文件的操作，但文本输入仅为html；此document ready函数将mceEditor类添加到文本框中。当我手动将其包含在admin标头中时，此函数会起作用。php，但我当然不能这样做。

我不认为我需要把它排队，因为它不是图书馆。还是我？如果适用的话：不同的添加方式有哪些优点/缺点？

那么，如何将其挂接或以其他方式加载到admin中的帖子/页面编辑器中呢？它需要进入插件文件，而不是函数。主题中的php。

<script type="text/javascript">

jQuery(document).ready( function () { 
    jQuery("#dt-additional-info").addClass("mceEditor"); 
    if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
        jQuery("#dt-additional-info").wrap( "<div id=\'editorcontainer\'></div>" ); 
        tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
    }
});

</script>

2 个回复
最合适的回答,由SO网友:Mark Duncan 整理而成

我倾向于只排一次队，就这样结束了。。

这意味着您必须管理一个额外的文件（JS文件），但在编写代码时，通常最好用文件创建某种形式的组织（或至少养成这样做的习惯），即javascript/jquery在一个文件夹中，css是另一个文件夹，将PHP和HTML保留在主插件PHP文件中。

因此，我的建议是将jQuery移动到js文件中，然后将jQuery作为依赖项运行排队设置，但无需为一次性调用注册它。

关于钩子有很多选择，但我个人倾向于。。

function yournamespace_enqueue_scripts( $hook ) {

    if( !in_array( $hook, array( \'post.php\', \'post-new.php\' ) ) )
        return;

    wp_enqueue_script( 
        \'your_script_handle\',                         // Handle
        plugins_url( \'/yourfilename.js\', __FILE__ ),  // Path to file
        array( \'jquery\' )                             // Dependancies
    );
}
add_action( \'admin_enqueue_scripts\', \'yournamespace_enqueue_scripts\', 2000 );
只需在in_array() 呼叫

SO网友:Mario

不久前，我需要这样的东西，这就是我使用的：

function admin_js() { ?>
    <script type="text/javascript">

        jQuery(document).ready( function () { 
           jQuery("#dt-additional-info").addClass("mceEditor"); 
           if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
               jQuery("#dt-additional-info").wrap( "<div id=\'editorcontainer\'></div>" ); 
               tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
        });

    </script>
<?php }
add_action(\'admin_head\', \'admin_js\');
当时，我只是把它挂在admin_head 行动，现在我知道a whole lot of actions. 在这种情况下，最好将其挂接到admin_print_scripts 措施：

add_action(\'admin_print_scripts\', \'admin_js\');
Note: 这将在页面中打印脚本，如果要将其保存在外部文件中，则必须将其排队：

function admin_js() {
    wp_register_script(\'admin_js\', plugins_url( .\'/yourplugin/admin-js.js\' . ),  array(\'jquery\'));
    wp_enqueue_script(\'admin_js\');
}
add_action(\'admin_enqueue_scripts\', \'admin_js\');
在你的admin-js.js 文件，javascript：

    jQuery(document).ready( function () { 
       jQuery("#dt-additional-info").addClass("mceEditor"); 
       if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
           jQuery("#dt-additional-info").wrap( "<div id=\'editorcontainer\'></div>" ); 
           tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
    });
我在选项页面上使用这两种方法，它们都可以正常工作。

结束
标签： plugin-development   wp-admin   jquery   小码农  

相关推荐

Jquery UI not working

我正在尝试整合Jquery UI select menu （“下拉”风格），在我的wordpress网站上。但我无法做到这一点，在widget区域中，我创建了一个选择框，并给它相应的css和jquery ID，但它并没有被jquery加载。这是我的代码，我正在使用它来实现：-头部：-<link rel=\"Stylesheet\" href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-