关于ueditor getPlainTxt的小bug

1,182 阅读4分钟

小于号<的问题

ueditor.baidu.com/website/kit…

在公式编辑器里输入<,控制台里输入

ue.getContent()

获取内容:

"<p><img class="kfformula" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAArCAYAAADFRP4AAAABtklEQVRoQ+3Wv0tWURzH8ZfiIC0OhS1Bizrk0JJTNDk1SYEQTS0VDkamkf9C/oAyNEEI1D+gliZdndwagkBajMYGbYyQC/eCgk88x+d6702+Zz7n3PN53/f3e06XGKcS6AoupxMIMC3MCDABJq1phDFhTBiTRiCMSeMVPSaMCWPSCIQxabyix4QxF9OYbgziW1q8s89ueildwgO8whAu49fZ47a/sqlgruIpZvIoK1jGfvvROpvZNDDDeIYn+IE5rOOgs5jpq5sAJjvDKF7gLnZzIJ/wJz1SOSvqBNOLccziBj5iETvlROtslzrAXMFjPEc/lvAOe51FKXd11WDGkJVINjJT1qq6ZVKxVQ0ma67vcScvmXl8rrOXtAJWNZjiHLcwhYf4jgVs4nfqnz2v+XWBKfJcx0T+gDvEG6zi53kFbnffusEU5+zDo/xBdw0f8BZf2g1S9rymgCly9eAeXmIEW3mZbeNv2eH/tV/TwBw/621M56C+4jU2qoLTZDAFgwFM4j5uVnW9/w9gqpLkxHcCTAvsASbApFVkGBPGhDFpBMKYNF7RY8KYMCaNQBiTxit6TAteR75YLyyndV0xAAAAAElFTkSuQmCC" data-latex="&lt;"/></p>"

而输入

ue.getPlainTxt()

获取内容出错

"<img class="kfformula" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAArCAYAAADFRP4AAAABtklEQVRoQ+3Wv0tWURzH8ZfiIC0OhS1Bizrk0JJTNDk1SYEQTS0VDkamkf9C/oAyNEEI1D+gliZdndwagkBajMYGbYyQC/eCgk88x+d6702+Zz7n3PN53/f3e06XGKcS6AoupxMIMC3MCDABJq1phDFhTBiTRiCMSeMVPSaMCWPSCIQxabyix4QxF9OYbgziW1q8s89ueildwgO8whAu49fZ47a/sqlgruIpZvIoK1jGfvvROpvZNDDDeIYn+IE5rOOgs5jpq5sAJjvDKF7gLnZzIJ/wJz1SOSvqBNOLccziBj5iETvlROtslzrAXMFjPEc/lvAOe51FKXd11WDGkJVINjJT1qq6ZVKxVQ0ma67vcScvmXl8rrOXtAJWNZjiHLcwhYf4jgVs4nfqnz2v+XWBKfJcx0T+gDvEG6zi53kFbnffusEU5+zDo/xBdw0f8BZf2g1S9rymgCly9eAeXmIEW3mZbeNv2eH/tV/TwBw/621M56C+4jU2qoLTZDAFgwFM4j5uVnW9/w9gqpLkxHcCTAvsASbApFVkGBPGhDFpBMKYNF7RY8KYMCaNQBiTxit6TAteR75YLyyndV0xAAAAAElFTkSuQmCC" data-latex="<" _src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAArCAYAAADFRP4AAAABtklEQVRoQ+3Wv0tWURzH8ZfiIC0OhS1Bizrk0JJTNDk1SYEQTS0VDkamkf9C/oAyNEEI1D+gliZdndwagkBajMYGbYyQC/eCgk88x+d6702+Zz7n3PN53/f3e06XGKcS6AoupxMIMC3MCDABJq1phDFhTBiTRiCMSeMVPSaMCWPSCIQxabyix4QxF9OYbgziW1q8s89ueildwgO8whAu49fZ47a/sqlgruIpZvIoK1jGfvvROpvZNDDDeIYn+IE5rOOgs5jpq5sAJjvDKF7gLnZzIJ/wJz1SOSvqBNOLccziBj5iETvlROtslzrAXMFjPEc/lvAOe51FKXd11WDGkJVINjJT1qq6ZVKxVQ0ma67vcScvmXl8rrOXtAJWNZjiHLcwhYf4jgVs4nfqnz2v+XWBKfJcx0T+gDvEG6zi53kFbnffusEU5+zDo/xBdw0f8BZf2g1S9rymgCly9eAeXmIEW3mZbeNv2eH/tV/TwBw/621M56C+4jU2qoLTZDAFgwFM4j5uVnW9/w9gqpLkxHcCTAvsASbApFVkGBPGhDFpBMKYNF7RY8KYMCaNQBiTxit6TAteR75YLyyndV0xAAAAAElFTkSuQmCC">
"

分析结果

后来又实验,在上面ueditor的官方页面里是正常的。但是在我们自己系统里是不正常的。

为什么呢?

  • 首先说一下kfformula在ueditor中的dom节点是这样的:
<img class="kfformula" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAArCAYAAADFRP4AAAABtklEQVRoQ+3Wv0tWURzH8ZfiIC0OhS1Bizrk0JJTNDk1SYEQTS0VDkamkf9C/oAyNEEI1D+gliZdndwagkBajMYGbYyQC/eCgk88x+d6702+Zz7n3PN53/f3e06XGKcS6AoupxMIMC3MCDABJq1phDFhTBiTRiCMSeMVPSaMCWPSCIQxabyix4QxF9OYbgziW1q8s89ueildwgO8whAu49fZ47a/sqlgruIpZvIoK1jGfvvROpvZNDDDeIYn+IE5rOOgs5jpq5sAJjvDKF7gLnZzIJ/wJz1SOSvqBNOLccziBj5iETvlROtslzrAXMFjPEc/lvAOe51FKXd11WDGkJVINjJT1qq6ZVKxVQ0ma67vcScvmXl8rrOXtAJWNZjiHLcwhYf4jgVs4nfqnz2v+XWBKfJcx0T+gDvEG6zi53kFbnffusEU5+zDo/xBdw0f8BZf2g1S9rymgCly9eAeXmIEW3mZbeNv2eH/tV/TwBw/621M56C+4jU2qoLTZDAFgwFM4j5uVnW9/w9gqpLkxHcCTAvsASbApFVkGBPGhDFpBMKYNF7RY8KYMCaNQBiTxit6TAteR75YLyyndV0xAAAAAElFTkSuQmCC" data-latex="<" _src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAArCAYAAADFRP4AAAABtklEQVRoQ+3Wv0tWURzH8ZfiIC0OhS1Bizrk0JJTNDk1SYEQTS0VDkamkf9C/oAyNEEI1D+gliZdndwagkBajMYGbYyQC/eCgk88x+d6702+Zz7n3PN53/f3e06XGKcS6AoupxMIMC3MCDABJq1phDFhTBiTRiCMSeMVPSaMCWPSCIQxabyix4QxF9OYbgziW1q8s89ueildwgO8whAu49fZ47a/sqlgruIpZvIoK1jGfvvROpvZNDDDeIYn+IE5rOOgs5jpq5sAJjvDKF7gLnZzIJ/wJz1SOSvqBNOLccziBj5iETvlROtslzrAXMFjPEc/lvAOe51FKXd11WDGkJVINjJT1qq6ZVKxVQ0ma67vcScvmXl8rrOXtAJWNZjiHLcwhYf4jgVs4nfqnz2v+XWBKfJcx0T+gDvEG6zi53kFbnffusEU5+zDo/xBdw0f8BZf2g1S9rymgCly9eAeXmIEW3mZbeNv2eH/tV/TwBw/621M56C+4jU2qoLTZDAFgwFM4j5uVnW9/w9gqpLkxHcCTAvsASbApFVkGBPGhDFpBMKYNF7RY8KYMCaNQBiTxit6TAteR75YLyyndV0xAAAAAElFTkSuQmCC">

而在题库系统里是这样的

<img class="kfformula" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAArCAYAAADFRP4AAAABtklEQVRoQ+3Wv0tWURzH8ZfiIC0OhS1Bizrk0JJTNDk1SYEQTS0VDkamkf9C/oAyNEEI1D+gliZdndwagkBajMYGbYyQC/eCgk88x+d6702+Zz7n3PN53/f3e06XGKcS6AoupxMIMC3MCDABJq1phDFhTBiTRiCMSeMVPSaMCWPSCIQxabyix4QxF9OYbgziW1q8s89ueildwgO8whAu49fZ47a/sqlgruIpZvIoK1jGfvvROpvZNDDDeIYn+IE5rOOgs5jpq5sAJjvDKF7gLnZzIJ/wJz1SOSvqBNOLccziBj5iETvlROtslzrAXMFjPEc/lvAOe51FKXd11WDGkJVINjJT1qq6ZVKxVQ0ma67vcScvmXl8rrOXtAJWNZjiHLcwhYf4jgVs4nfqnz2v+XWBKfJcx0T+gDvEG6zi53kFbnffusEU5+zDo/xBdw0f8BZf2g1S9rymgCly9eAeXmIEW3mZbeNv2eH/tV/TwBw/621M56C+4jU2qoLTZDAFgwFM4j5uVnW9/w9gqpLkxHcCTAvsASbApFVkGBPGhDFpBMKYNF7RY8KYMCaNQBiTxit6TAteR75YLyyndV0xAAAAAElFTkSuQmCC" data-latex="<" >

区别在于处于自身业务需要,把_src字段去掉了。这样有什么问题呢?

  • 看一下ueditor的getPlainTxt方法是如何实现的
getPlainTxt: function () {
    var reg = new RegExp(domUtils.fillChar, 'g'),
        html = this.body.innerHTML.replace(/[\n\r]/g, '');//ie要先去了\n在处理
    html = html.replace(/<(p|div)[^>]*>(<br\/?>|&nbsp;)<\/\1>/gi, '\n')
        .replace(/<br\/?>/gi, '\n')
        .replace(/<[^>/]+>/g, '')
        .replace(/(\n)?<\/([^>]+)>/g, function (a, b, c) {
            return dtd.$block[c] ? '' : b ? b : '';
        });
    //取出来的空格会有c2a0会变成乱码,处理这种情况\u00a0
    return html.replace(reg, '').replace(/\u00a0/g, ' ').replace(/&nbsp;/g, ' ');
},

重点是这个.replace(/<[^>/]+>/g, ''),它是把所有<开头>结束(里面不能包含>/)里面的内容(包含括号)全部置空。

而如果公式图片的data-latex字段里包含<,会被识别,并与img的结束>(不知道为啥这个img不是以/>结束)配成一对符合上述正则表达式的内容清除掉,就会得到上面getPlainTxt的错误结果。

- 为什么没有清理img标签呢?
因为img的src里总会含有/符号。所以这个getPlainTxt有bug
  • 如何解决呢?

    • 方案1:

    把_src加回去,这样匹配的时候有/就正常了。 但是把_src加回去,base64的字符串很长啊,算了。 当然,也可以加一个别的字段,类似_src="/"只带个/,就ok了

    • 方案2:

    类似方案1的思路,把src放在data-latex的后面不就得了。 修改ueditor/kityformulaDialog.html中的

  editor.execCommand('inserthtml', '<img class="kfformula" src="'+ data.img +'" data-latex="' + latex + '"  style="zoom: 65%; max-width: 100%" />');

改为:

  editor.execCommand('inserthtml', '<img class="kfformula" data-latex="' + latex + '" src="' + data.img +'" style="zoom: 65%; max-width: 100%" />');
  • 方案3:

改造getPlainTxt中的正则表达式,识别data-latex中的<不处理