UEditor（四）——表情包

UEditor的表情包简单实用，用起来也很方便，我这里主要记录一下碰到的一些问题。

1、本地化：这个问题以前有写过，可以参考“UEditor（二）：表情包和列表的本地化”。

 

2、选了表情之后不显示：不知道大家有没有碰到，反正我这里是碰到了。UEditor默认的表情包有7个：

推荐(jx2)、baby猫(babycat)、BOBO(bobo)、泡泡(face)、绿豆蛙(ldw)、兔斯基(tsj)、有啊(youa)。

这七个除了bobo其他的选完之后都能在页面上显示出来，唯独bobo显示不出来预览也预览不出来。用F12查看的时候，发现是名称不对，应该显示B_0001.gif，可我的项目下对应目录只有b_0001.gif。让我不可思议的问题不是这个目录，而是：这个表情包我是从官网下的，处理用的js文件也是官网下的，其他的能显示出来为什么这个偏偏不同，百度不可能犯这么低级的错误。

当然解决办法很简单，将名称改正确就好啦。

不过我个人更倾向于疑问的解决办法，有时间了一定要琢磨下它这个表情包到底是什么弄的，没准还可以弄些自己的表情包，。

 

3、表情在电脑端显示正常，在手机浏览器中被拉伸了：

页面上显示的代码很简单:<img src="" _src=""/>，电脑端和手机端代码都如此，电脑端显示正常手机端被拉伸了，还失真，很难看。没找到原因，就是在img上加了style来限制它的宽高，保证在手机上能正常显示。

修改代码如下：

ueditor.all.js的function unhtmlData(imgCi) {方法：

var img_src = ci.src;
var widthStyle = "";
if(img_src.indexOf("http://")!=-1 || img_src.indexOf("https://")!=-1){//表情符号
       var width = getImgWidth(img_src);
       widthStyle="style=\"width:"+width+"px;height:"+width+"px;\"";
}else{
        img_src = formatImgSrc(img_src);
}

使用表情包返回的图片路径都带有http，所以使用这个来判断是表情还是图片上传，若是图片上传根据分类限制大小：

/**
 * 该方法根据表情包所在文件夹分类返回图片的粗略大小以解决表情在手机上出现拉伸的问题
 * **/
function getImgWidth(img_src){
	var width = 0;
	var bbb = img_src.substr(img_src.lastIndexOf('/', img_src.lastIndexOf('/') - 1) + 1);
	var emotion = bbb.substr(0,bbb.indexOf("/"));//表情包文件夹
	switch(emotion){
		case "babycat"://baby猫
		case "bobo"://BOBO（大部分是50x50，少数为其他大小）
		case "ldw"://绿豆蛙
		case "tsj"://兔斯基
			width=50;break
		case "face"://泡泡 表情
			width=25;break;
		case "youa"://有啊
			width=60;break;
		case "jx2"://推荐
			var ddd = bbb.substr(bbb.indexOf("/")+3,4);//名称序号
			ddd = parseInt(ddd);
			//兔斯基、绿豆蛙、bobo、baby猫
			if(ddd<=56){width=50;
			}else if(ddd>=71){//有啊
				width=60;
			}else{//泡泡表情
				width=25;
			}
			break;
	}
	return width;
}

按道理应该根据图片来获取图片的大小，但是图片加载需要时间而拼接html明显比加载图片快，等着图片加载完再显示图片明显不太好，所以这里使用粗略赋值。

如代码所示，babaycat、ldw和tsj这三类图片都是50*50，bobo大部分是50*50有少数是其他的尺寸这里默认给50，而face都是25*25，youa都是60*60。推荐里边有以上的各种类，根据命名规则进行赋值：0-56是兔斯基、绿豆蛙、bobo、baby猫，71以后是有啊，其他的是泡泡表情。

如此之后，就可以简单获取图片大小。之后再使用style拼接width和height，即

var width = getImgWidth(img_src);
widthStyle="style=\"width:"+width+"px;height:"+width+"px;\"";

str = '<img '+widthStyle+' src="' + img_src + '" ' + (ci._src ? ' _src="' + ci._src + '" ' : '') 。。。

（上下文环境可以看前一篇的末尾哈，上一篇贴过了这一篇就不贴了）

添加这些之后，手机预览时还是会被拉伸，就好像没添加一样，通过F12查看会发现，根本没有添加的style属性，而alert出来的测试数据却有。

这是因为style被UEditor过滤掉了，修改的方法吧网上一搜一大堆，但是对我来说都没有用，最后就修改了一个地方：

找到ueditor.config.js的whitList----》img，在其中添加上style，即：img:    ['style','src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],

这个是将style添加到img的白名单里边，这样子凡是在img中的就不会被过滤掉了。这比去后续删除过滤style的代码更有效。

 

祝大家好运！