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

我试图在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”并将其删除。

---

有什么帮助吗？谢谢。

当WordPress加载jQuery时，它的加载方式与在普通应用程序中加载jQuery时有所不同，它使用“兼容模式”

它所做的净功能是未定义

$

，但定义了

jQuery

。因此，当您使用

$

尝试运行jQuery时，它没有定义。如果将其更改为使用

jQuery

：

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

…我怀疑事情会对你起作用

---

要得到一个很好的解释，你可以阅读这篇文章：

当WordPress加载jQuery时，它的加载方式与在普通应用程序中加载jQuery时有所不同——它使用“兼容模式”

它所做的净功能是未定义

$

，但定义了

jQuery

。因此，当您使用

$

尝试运行jQuery时，它没有定义。如果将其更改为使用

jQuery

：

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

…我怀疑事情会对你起作用

---

要想得到一个好的解释，你可以阅读这篇文章：

你是否包含了对jquery库的引用？我不确定是否理解了你的问题请参见下面的Michael的答案。你是否包含了对jquery库的引用？我不确定是否理解了你的问题请参见下面的Michael的答案。非常感谢！它工作起来很有魅力。你知道：如何在文本模式下而不是在wordpress中的视觉模式下向编辑器添加按钮吗？文本模式根本不使用TinyMCE，所以我无法帮助你完成这一部分。非常感谢！它很有魅力。你知道：如何在文字模式下而不是在wordpress中的视觉模式下向编辑器添加按钮吗？文字模式根本不使用TinyMCE，所以我无法帮助你完成这部分。