自定义TinyMCE按钮不适用于包含特殊字符的术语

Custom TinyMCE button not working with terms containing special characters

本文关键字：特殊字符 术语 包含 适用于 TinyMCE 按钮 不适用 自定义      更新时间：2023-09-26

我在TinyMCE可视化编辑器中添加了一个自定义按钮。此按钮使用类tle包装<em>标记中任何突出显示的单词。因此，如果高亮显示术语Pulp Fiction并单击按钮，则会得到<em class="tle">Pulp Fiction</em>。

JS代码：

(function() {
    tinymce.PluginManager.add('custom_em', function( editor, url ) {
        editor.on('init', function(e) {
            this.formatter.register('reftitle', {
                inline : 'em',
                classes : 'tle'
            });
        });
        editor.addButton('custom_em', {
            text: 'Title (italic)',
            icon: false,
            onclick : function() {
                var contents = editor.selection.getContent(),
                tags = jQuery(contents).find('em.tle').andSelf();
                if (tags.length) {
                    editor.formatter.remove('reftitle');
                } else {
                    editor.formatter.apply('reftitle', {value: contents});
                }

            }
        });
    });
})(jQuery);

它工作得很好，但它不会格式化任何包含任何特殊字符的术语。它只适用于字符A-Z和0-9。

例如，X-Men: Days of Future Past将不起作用，因为它包含:。在控制台中，它给出错误：Syntax error, unrecognized expression。

为什么它不能正常工作？猜测这是我的onclick函数的问题。希望这里有一位jQuery或TinyMCE大师。

问题在jQuery(contents)。这是因为jQuery（函数本身，而不是库）的双重性质：

1） 您可以向它传递一个包含有效HTML的字符串，并期望它返回一个DOM节点；

2） 您还可以向它传递选择器（'#div.foo'），并期望它返回与其匹配的节点列表。

这意味着，在应用（1）或（2）之前，这个函数必须决定它要处理什么，所以它会检查你传递给它的任何东西是否看起来像选择器。事实证明'foo: bar'是这样做的，它通过了（2）。接下来发生的是，它试图标记选择器，但失败了。

要解决这个问题，您需要做的是确保使用（1），而不是（2），并且您可以使用jQuery.parseHTML来做到这一点，因此您的代码应该是

tags = jQuery(jQuery.parseHTML(contents)).find('em.tle').andSelf();

之后的逻辑是另一个问题。实际上，最终的解决方案非常简单。事实证明，除了apply和remove之外，Formatter类还有一个toggle方法，可以更好地满足您的需求：

onclick : function() {
    editor.formatter.toggle('reftitle');
}
相关文章：