Question

我写了一个Wordpress插件来增强TinyMCE功能。我通过以下代码将js文件包含在管理面板中：

add_action('admin_print_scripts', 'admin_head_js');
function admin_head_js() {
    $myJSFile =  plugins_url( 'a2m_functions.js', __FILE__ ) ;
    wp_enqueue_script( 'a2m_functions_js',$myJSFile,false,'1.0');
}

TinyMCE插件如下所示：

// closure to avoid namespace collision
(function(){
    // creates the plugin
    tinymce.create('tinymce.plugins.a2m_landingpages', {
        // creates control instances based on the control's id.
        // our button's id is "mygallery_button"
        createControl : function(id, controlManager) {
            if (id == 'a2m_landingpages_button') {
                // creates the button
                var button = controlManager.createButton('a2m_landingpages_button', {
                    title : 'A2ML Landindpage', // title of the button
                    image : '../wp-includes/images/smilies/icon_mrgreen.gif',  // path to the button's image
                    onclick : function() {
                        // triggers the thickbox
                        var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
                        W = W - 80;
                        H = H - 84;
                        tb_show( 'A2M Landingpage Content', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=a2ml-form' );
                    }
                });
                return button;
            }
            return null;
        }
    });

    // registers the plugin. DON'T MISS THIS STEP!!!
    tinymce.PluginManager.add('a2m_landingpages', tinymce.plugins.a2m_landingpages);

    // executes this when the DOM is ready
    jQuery(function(){
        // creates a form to be displayed everytime the button is clicked
        // you should achieve this using AJAX instead of direct html code like this
        var form = jQuery('<div id="a2ml-form">\
                                <div class="a2ml-form-wrapper">\
                                    <div class="a2ml-form-selector a2ml-form-landingpage">Landingpage Quiz</div>\
                                    <div class="a2ml-form-selector">AR Quiz</div>\
                                <\div>\
                            </div>');

        var table = form.find('table');
        form.appendTo('body').hide();

        // handles the click event of the submit button
        form.find('#a2m-submit').click(function(){
            // defines the options and their default values
            // again, this is not the most elegant way to do this
            // but well, this gets the job done nonetheless
            var shortcode = '<table><tr><td>';
            shortcode += table.find('#a2ml-question').val();
            shortcode += '</td></tr></table>';

            // inserts the shortcode into the active editor
            tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

            // closes Thickbox
            tb_remove();
        });
    });
})()

包含的a2m_functions.js如下所示：

jQuery(document).ready(function(){

    jQuery('.a2ml-form-wrapper').on('click', '.a2ml-form-selector', function() {
        alert("Yes");

    });
});

但是当我点击“无警报”时出现。 JQuery选择器如何与Wordpress中的TinyMCE插件一起使用？

Answer 1

我不相信你的问题是关于TinyMCE的。

加载脚本时，您在脚本中选择的html元素.a2ml-form-wrapper可能尚不存在。如果TinyMCE脚本在您自己的脚本之后加载，或者如果它的html元素被添加到页面中有一些延迟，则会出现这种情况。

如果我的假设适用，解决方案是要么确保在TinyMCE之后加载脚本，要么使用.live()而不是.on()来收听点击。即使在您编写脚本后加载了单击的元素，这也会触发您的回调。

$(document).ready(function() {
    $('.a2ml-form-wrapper').live('click', function() {
        alert('Hello World');
    });
});

如果这不能解决您的问题，整个TinyMCE html结构和脚本可能对您有用。

Answer 2

这个州的哪些部分是正确的。 $('.a2ml-form-wrapper')不会返回任何内容，因为该元素在执行时不存在。但是$(document).ready在这里没有帮助，因为ready在文档准备好时被触发 - 而不是编辑器。 tinymce编辑器通常需要更长时间才能完全初始化。

您需要做的是在编辑器准备好时分配处理程序。这是解决方案：

在您自己的插件中的createControl之后立即添加以下代码

createControl : function(id, controlManager) {
    ....
},
init : function(ed, url) {
    ed.onInit.add(function(ed) {
        jQuery('.a2ml-form-wrapper').on('click', '.a2ml-form-selector', function() {
            alert("Yes");
        });
    )};
},

JQuery应该在TinyMCE插件中定位一个类

2 个答案: