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();

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

onclick : function() {
    editor.formatter.toggle('reftitle');
}

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

1 个答案: