如何通过在 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" class 到 "text mode" 中的 "textarea"。有帮助吗？谢谢。

Answer 1

当 WordPress 加载 jQuery 时，它的加载方式与您在常规应用程序中加载 jQuery 的方式有所不同 - 它使用 "compatibility mode"。

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

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

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

为了更好的解释，你可以阅读这个post：https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

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

How to add an onclick event by creating a toggle button in tinymce editor?

javascript

wordpress

jquery

tinymce