TinyMCE插件不支持jQuery 3.5.1(测试jQuery更新)

时间:2020-10-31 作者:Lupus

由于Wordpress似乎正在走向一个长期到期的jQuery更新,我开始测试我的一些插件(它们没有发布,只是我用于一些客户网站的东西);测试jQuery更新;。直到昨天,一切都很顺利,我遇到了以下问题。我有一个简单的插件,它在TinyMCE中添加了几个按钮(是的,我为该客户机制作的主题使用了经典编辑器),让他们可以轻松地将短代码和预先编写的HTML片段添加到帖子和页面中。代码非常标准:首先,通过连接到“mce\\U buttons”过滤器挂钩的函数注册按钮,然后通过连接到“mce\\U external\\U plugins”的另一个函数加载带有按钮jQuery代码的脚本。当我使用默认的WP 5.5 jQuery运行此操作时,按钮会显示在TinyMCE中,而如果我激活jQuery 3.5.1(无论是否使用jQuery迁移),都不会显示任何内容,更糟糕的是,我在浏览器控制台中没有收到任何错误或警告,因此我对出现的错误一无所知。

jQuery如下所示(我发布了一个精简版的最简单按钮,它只向编辑器文本区域添加了一些预先格式化的HTML,为了简单起见,我使用了“my\\u plugin”而不是真正的插件slug):

jQuery(function ($) {
    tinymce.create(\'tinymce.plugins.my_plugin_embed_plugin\', {

        init: function (ed, url) {
            // button options
            ed.addButton(\'my_plugin_button\', {
                title: \'Enter title\', 
                cmd: \'my_plugin_insert\',
                tooltip: \'Enter a featured title\',
                classes: \'my_class \',
                icon: \'my_plugin\'//class of icon defined in CSS
            });

            ed.addCommand(\'my_plugin_insert\', function () {

                var selected = tinyMCE.activeEditor.selection.getContent();
                var content;

                // if text is selected use that as the title
                if (selected) {
                    content = \'<h1 class="my_plugin green">\' + selected + \'</h1>\';
                    tinymce.execCommand(\'mceInsertContent\', false, content);
                } else {
                    ed.windowManager.open({
                        minWidth: \'500\',
                        title: \'MyPlugin featured title\',
                        body: [
                            {
                            type: \'textbox\',
                            name: \'title\',
                            label: \'Title\'
                            }, 
                            {
                                type: \'listbox\',
                                name: \'col\',
                                label: \'Colour\',
                                tooltip: \'Title BG colour\',
                                values: [
                                    {
                                        text: \'green\',
                                        value: \'green\'
                                    },
                                    {
                                        text: \'red\',
                                        value: \'red\'
                                    },
                                    {
                                        text: \'cyan\',
                                        value: \'cyan\'
                                    },
                                    {
                                        text: \'arancione\',
                                        value: \'arancione\'
                                    } 
                                ]
                            }
                        ],
                        onsubmit: function (e) {
                            var purehtml = \'<h1 class="my_plugin \' + e.data.col + \'">\' + e.data.title + \'</h1>\';
                            ed.insertContent(purehtml);
                        }
                    });
                }

            });
        }
    });
    // Add button
    tinymce.PluginManager.add(\'my_plugin_button\', tinymce.plugins.my_plugin_embed_plugin);
});
谁能给我一根骨头让我开始走上正确的方向?提前非常感谢您。

1 个回复
最合适的回答,由SO网友:Lupus 整理而成

我在回答这个问题,以防任何人会偶然发现这有同样的问题。我刚刚删除了

jQuery(function ($) {

}); 
从我的TinyMCE插件代码包装而来,现在它在任何浏览器上都能完美工作。我意识到没有理由调用jQuery,因为正如上面Rup正确指出的那样,代码中没有使用jQuery。我复制粘贴了一段在互联网上找到的代码片段作为模板,它调用了jQuery,我相信这会延迟插件的执行(等待DOM就绪),因此TinyMCE没有正确初始化。我不明白为什么它没有干扰我在jQuery旧版本上的插件,但不管怎样,现在一切都好了。

相关推荐

JQuery AJAX方法不返回数据

我正在用phpmailer发送电子邮件,当我按下;发送(&Q);按钮,但我想保持在相同的HTML页面上,所以我将AJAX脚本与HTML和PHP结合使用。问题是,我没有得到用电子邮件状态和PHP响应更新HTML页面所需的JSON数据,因此:感谢您的帮助HTML中的AJAX<script> $("#form").submit(function(e) { e.preventDefault(); // prevent actual f