0

我在 TinyMCE 可视化编辑器中添加了一个自定义按钮。此按钮将所有突出显示的单词包装在<em>带有 class 的标签中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);

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

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

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

4

1 回答 1

1

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

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

2) 你也可以给它传递一个选择器( '#div.foo') 并期望它返回一个匹配它的节点列表。

这意味着，在应用 (1) 或 (2) 之前，此函数必须决定它正在处理的内容，因此它会检查您传递给它的任何内容是否看起来像 selector。事实证明'foo: bar'，它通过（2）进行。接下来发生的是它尝试标记选择器并失败。

要解决此问题，您需要做的是确保使用 (1)，而不是 (2)，并且您可以这样做，jQuery.parseHTML因此您的代码应该是

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

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

onclick : function() {
    editor.formatter.toggle('reftitle');
}
于 2014-10-20T15:18:21.750 回答