javascript - 如何通过在tinymce编辑器中创建切换按钮来添加onclick事件？

Question

我正在尝试向 WordPress 中的 TinyMCE 编辑器添加一个按钮。这里是将注册按钮注册到 wordpress 的代码，wordks 很好:

add_action( 'init', 'wptuts_buttons' );
function wptuts_buttons() {
    add_filter( "mce_external_plugins", "wptuts_add_buttons" );
    add_filter( 'mce_buttons', 'wptuts_register_buttons' );
}
function wptuts_add_buttons( $plugin_array ) {
    $plugin_array['wptuts'] = get_template_directory_uri() . '/js/webramz-tinymce-toggle.js';
    return $plugin_array;
}
function wptuts_register_buttons( $buttons ) {
    array_push( $buttons, 'mybutton' ); // dropcap', 'recentposts
    return $buttons;
}

这里是添加按钮的 js 插件代码及其命令:

(function() {
    tinymce.create('tinymce.plugins.Wptuts', {
        init : function(ed, url) {
           ed.addButton('mybutton', {
                text: "rtl-ltr",
                cmd : 'mybuttoncmd',
            });
            ed.addCommand('mybuttoncmd', function() {
                //function () {
                    $(".wp-editor-area").addClass("ltr");
                //}
            });
        },
        // ... Hidden code
    });
    // Register plugin
    tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts );
})();

按钮出现，但单击时控制台中出现以下错误:

TypeError: $ is not a function

我的错是什么？事实上我想添加一个切换按钮来添加和删除“ltr”类到“文本模式”中的“textarea”。有什么帮助吗？谢谢。

Answer 1

虽然 WordPress 加载 jQuery 的方式与在常规应用程序中加载 jQuery 的方式有些不同 - 它使用“兼容模式”。

其作用的实质是 $ 未定义，但 jQuery 已定义。因此，当您使用 $ 尝试运行 jQuery 时，它尚未定义。如果您将其更改为使用 jQuery:

jQuery(".wp-editor-area").addClass("ltr");

...我怀疑事情会开始为你工作。

要获得更好的解释，您可以阅读这篇文章:https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/