2

我为 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 插件一起使用？

4

2 回答 2

2

我不认为您的问题专门针对 TinyMCE。

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

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

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

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

于 2013-02-22T16:16:45.010 回答
0

sharethis 的说法是部分正确的。 $('.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");
        });
    )};
},
于 2013-02-22T17:01:40.517 回答