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);),问题解决。

  • 2017-05-25 23:18:23

    webpack图片的路径与打包

    刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle)。下面我们就来分析下在webpack项目中图片的应用场景。

  • 2017-06-17 18:33:17

    NodeJs使用asyncAwait两法

    async/await使用同步的方式来书写异步代码,将异步调用的难度降低到接近于0,未来必将大放异彩。然而在当下,由于标准化的缓存步伐,async/await尚在ES7的草案中。为了尝先,特试用了下面两种方式:

  • 2017-06-18 02:26:17

    Incorrect string value: '\xF0\x9F\x98\x84\xF0\x9F

    我们可以看到错误提示中的字符0xF0 0x9F 0x98 0x84 ,这对应UTF-8编码格式中的4字节编码(UTF-8编码规范)。正常的汉字一般不会超过3个字节,为什么为出现4个字节呢?实际上是它对应的是智能手机输入法中的表情。那为什么会报错呢?

  • 2017-06-18 02:34:22

    谈mysql中utf8和utf8mb4区别

    MySQL在5.5.3之后增加了这个utf8mb4的编码,mb4就是most bytes 4的意思,专门用来兼容四字节的unicode。好在utf8mb4是utf8的超集,除了将编码改为utf8mb4外不需要做其他转换。当然,为了节省空间,一般情况下使用utf8也就够了。

  • 2017-07-05 09:48:51

    CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。

  • 2017-07-06 10:02:18

    大白话讲解Promise(一)

    去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。