关于ueditor公式编辑器的小bug

小于号<的问题

http://ueditor.baidu.com/website/kityformula.html

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

1	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>"

而输入

1	ue.getPlainTxt()

获取内容出错

1
2

"<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%" />');
```  

  改为：

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

方案3：

改造getPlainTxt中的正则表达式，把.replace(/<[^>/]+>/g, '')改为.replace(/<(?!\/>)(?!">).+>/g, '')即可