ueditor 特殊符号转义

2019-01-08 14:35:50

几个月前,就有同事跟我反馈,说磨途歌的留言板有问题。当时看了一下,她用的是谷歌浏览器,确实打不出中文,才按下一个字母,英文字母就从输入法的输入框中直接跳出来了,更换火狐浏览器就没这个问题。很奇怪的是,在我电脑上的火狐浏览器跟谷歌浏览器都没有问题,一开始还以为是她电脑的问题,就没在意了。

最近在家里用谷歌浏览器写博客,也出现了上述的情况,才开始重视起来。检查了一遍,初步锁定问题出在ueditor编辑器本身,于是上ueditor官网看看有没有更新或者说明。果然,ueditor已经更新了好几个版本了,磨途歌用的是1.2.5.0版本,最新版本为1.2.6.1。

浏览了一下更新日志,发现ueditor官网确实提到有这个bug,并且已经修复了,小激动,看来选择有大公司背景的开源软件,是明智的。

因为磨途歌使用的ueditor编辑器做过调整,所以新版本的ueditor还得再修改一下才能用。

在调试阶段,磨途歌发现新版本的ueditor编辑器有个问题,转义单引号(')出错了!

例如下边的内容,用旧版本的js文件可以正常显示

1
2
<?php
$blog 'mo2g.com';

新版本的js显示如下

1
2
<?php
$blog = &#039;mo2g.com&#039;;

经过分析,很快就找到问题的根源,接下来就给大家讲解。

在html里,很多符号都有其他的表示方法,给大家列出常用的符号:

显示结果
html代码
简单描述

&nbsp;空格
&&amp;指明有字符存在(特殊字符)的默认符号
"&quot;双引号
'&#039;单引号
<&lt;小于号
>&gt;大于号
®&reg;注册标志
©&copy;版权标志
&trade;商标标志

问题就出在新版本的ueditor把单引号(')转义成了&#39;,完全忽略了&#039;也是单引号(')的事实,至少PHP还是把单引号(')转义成了&#039;的。

这个问题也很容易修复,打开ueditor.all.js文件,往里边添加一些代码就好了。找到398行,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    /**
     * 将str中的html符号转义,默认将转义''&<">''四个字符,可自定义reg来确定需要转义的字符
     * @name unhtml
     * @grammar UE.utils.unhtml(str);  => String
     * @grammar UE.utils.unhtml(str,reg)  => String
     * @example
     * var html = '<body>You say:"你好!Baidu & UEditor!"</body>';
     * UE.utils.unhtml(html);   ==>  &lt;body&gt;You say:&quot;你好!Baidu &amp; UEditor!&quot;&lt;/body&gt;
     * UE.utils.unhtml(html,/[<>]/g)  ==>  &lt;body&gt;You say:"你好!Baidu & UEditor!"&lt;/body&gt;
     */
    unhtml:function (str, reg) {
            return str ? str.replace(reg || /[&<">'](?:(amp|lt|quot|gt|#39|nbsp);)?/g, function (a, b) {
                if (b) {
                    return a;
                } else {
                    return {
                        '<':'&lt;',
                        '&':'&amp;',
                        '"':'&quot;',
                        '>':'&gt;',
                        "'":'&#39;'
                    }[a]
                }
     
            }) : '';
        },

把其中的(?:(amp|lt|quot|gt|#39|nbsp);)改成(?:(amp|lt|quot|gt|#39|#039|nbsp);),问题解决。

  • 2018-12-01 00:27:12

    批量kill mysql processlist进程

    如果大批量的操作能够通过一系列的select语句产生,那么理论上就能对这些结果批量处理。 但是mysql并没用提供eval这样的对结果集进行分析操作的功能。所以只能现将select结果保存到临时文件中,然后再执行临时文件中的指令。

  • 2018-12-02 10:54:14

    HTTP长连接、短连接究竟是什么?

    HTTP的长连接和短连接本质上是TCP长连接和短连接。HTTP属于应用层协议,在传输层使用TCP协议,在网络层使用IP协议。 IP协议主要解决网络路由和寻址问题,TCP协议主要解决如何在IP层之上可靠地传递数据包,使得网络上接收端收到发送端所发出的所有包,并且顺序与发送顺序一致。TCP协议是可靠的、面向连接的。

  • 2018-12-04 15:30:01

    如何在Mac OS X上安装 Ruby运行环境

    ​ 对于新入门的开发者,如何安装 Ruby和Ruby Gems 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境。 此安装方法同样适用于产品环境!

  • 2018-12-04 15:31:15

    iOS--Pod install && Pod update

    许多人在最初接触CocoaPods时认为pod install只是在第一次为项目设置CocoaPods时使用,之后都应该使用pod update.看起来是这样,但也不是(But that's not the case at all.)。 这篇文章的目的就是教你啥时候用pod install,啥时候用pod update

  • 2018-12-04 15:33:19

    CocoaPods安装和使用教程

    当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等。可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其他类库又用到其他类库,“子子孙孙无穷尽也”,这也许是比较特殊的情况。总之小编的意思就是,手动一个个去下载所需类库十分麻烦。另外一种常见情况是,你项目中用到的类库有更新,你必须得重新下载新版本,重新加入到项目中,十分麻烦。如果能有什么工具能解决这些恼人的问题,那将“善莫大焉”。所以,你需要 CocoaPods。

  • 2018-12-04 23:37:37

    pod install 和 pod update

    当我们新建一个Podfile文件运行后,会自动生成一个Podfile.lock文件,Podfile.lock文件里存储着我们已经安装的依赖库(pods)的版本。 当我们第一次运行Podfile时,如果对依赖库不指定版本的话,cocoapods会安装最新的版本,同时将pods的版本记录在Podfile.lock文件中。这个文件会保持对每个pod已安装版本的跟踪,并且锁定这些版本。