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

我有一个自定义按钮添加到TinyMCE可视化编辑器。此按钮将<em>标记中的所有突出显示的单词包装在类别tle中。因此，如果您突出显示术语Pulp Fiction并单击按钮，您将获得<em class="tle">Pulp Fiction</em>。自定义TinyMCE按钮不适用于包含特殊字符的条款

的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大师。

来源

2014-10-18 Henrik Petterson

问题是否与往往隐含URL-或字符发生类似HTML编码？例如，“Test-Movie”与Test_Movie和Test＆Movie相同吗？我想知道是否有一些编码在选择上发生，导致它在尝试应用格式时无法再次找到它。另外，控制台中的任何错误都是相关的？ – trnelson 2014-10-20 14:55:21

@trnelson该按钮适用于“测试电影”，但不适用于“测试和电影”。是的，控制台为“测试和电影”提供以下错误：语法错误，无法识别的表达式：测试&电影... – 2014-10-20 14:56:45

哎呀，对不起，我错误地按下了后退按钮，而没有认为我以前的评论发布。这听起来像某种类型的html编码问题。在尝试应用格式之前，您可以利用JavaScript的'escape（）'函数对查询进行编码。我认为jQuery在幕后做了很多编码/解码。 – trnelson 2014-10-20 14:58:27

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

来源

2014-10-20 15:18:21

有趣！刚刚测试过它。用你列出的那个替换了“tags = jQuery ...”这一行，它没有任何术语。控制台也不显示任何错误。有任何想法吗？你的代码中有错字吗？或者对此有不同的方法？ – 2014-10-20 15:30:58

那就是之后的逻辑。 AndSelf将确保数组至少有一个元素，所以if条件将始终为真。 – 2014-10-20 15:41:45

我是否需要更改代码中的其他内容才能使其正常工作？ – 2014-10-20 15:43:54

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

回答

相关问题