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

Question

我在 TinyMCE 可视化编辑器中添加了一个自定义按钮。此按钮将 <em> 中所有突出显示的单词包裹起来。带有类 tle 的标签。因此，如果您突出显示术语 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 大师。

Answer 1

问题出在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');
}