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

Question

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

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/