UEditor's emoticon package is simple and practical, and it is very convenient to use. I will mainly record some of the problems encountered here.
1. Localization : This question has been written before, you can refer to " UEditor (2): Localization of Expression Packs and Lists ".
2. After selecting the expression, it will not be displayed : I don’t know if you have encountered it, but I have encountered it here anyway. There are 7 default emoticons in UEditor:
Recommended (jx2), baby cat (babycat), BOBO (bobo), bubble (face), mung bean frog (ldw), Tusky (tsj), and youa (youa).
These seven other than bobo can be displayed on the page after they are selected, but bobo cannot be displayed and previewed. When I checked it with F12, I found that the name was wrong. It should display B_0001.gif, but the corresponding directory under my project only has b_0001.gif . The problem that makes me unbelievable is not this directory, but: I downloaded this emoji package from the official website, and the js files used for processing are also downloaded from the official website. Others can show why this is different. Baidu cannot make such a low-level mistake. .
Of course, the solution is very simple, just change the name to the correct one.
However, I am more inclined to the solution of doubts. When I have time, I must think about what it is that this emoji pack is made of, and maybe I can get some of my own emoji packs 
.
3. The expression is displayed normally on the computer, but is stretched in the mobile browser :
The code displayed on the page is very simple: <img src="" _src=""/>, the code on both the computer and the mobile phone is the same. The computer shows that the normal mobile phone is stretched, distorted, and ugly. I didn't find the reason, that is, I added style to img to limit its width and height to ensure that it can be displayed normally on mobile phones.
Modify the code as follows:
ueditor.all.js function unhtmlData(imgCi) { method:
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);
}
The image paths returned by the emoticon package all have http, so use this to determine whether it is an emoticon or an image upload. If the image uploads, the size is limited according to the classification:
/**
* This method returns the rough size of the picture according to the folder where the expression package is located to solve the problem that the expression is stretched on the mobile phone
* **/
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("/"));//expression package folder
switch(emotion){
case "babycat"://baby猫
case "bobo"://BOBO (most are 50x50, a few are other sizes)
case "ldw"://mung bean frog
case "tsj"://Tusky
width=50;break
case "face"://bubble expression
width=25;break;
case "youa"://yes
width=60;break;
case "jx2"://recommended
var ddd = bbb.substr(bbb.indexOf("/")+3,4);//Name serial number
ddd = parseInt(ddd);
//Tusky, mung bean frog, bobo, baby cat
if(ddd<=56){width=50;
}else if(ddd>=71){//Yes
width=60;
}else{//Bubble expression
width=25;
}
break;
}
return width;
}
It stands to reason that the size of the image should be obtained according to the image, but it takes time to load the image, and splicing html is obviously faster than loading the image. It is obviously not good to wait for the image to be loaded and then display the image, so a rough assignment is used here.
As shown in the code, the three types of pictures of babaycat, ldw and tsj are all 50*50, most of the bobo are 50*50, and a few are other sizes. The default is 50, while the face is 25*25, and youa is 60. *60. It is recommended to have the above categories, and assign them according to the naming rules: 0-56 are Tusky, mung bean frog, bobo, baby cat, after 71, there are ah, the others are bubble expressions.
After this, you can simply get the image size. Then use style to splice width and height, ie
var width = getImgWidth(img_src);
widthStyle="style=\"width:"+width+"px;height:"+width+"px;\"";
str = '<img '+widthStyle+' src="' + img_src + '" ' + (ci._src ? ' _src="' + ci._src + '" ' : '') 。。。
(The context can be seen at the end of the previous article. After the previous article was posted, this one will not be posted.)
After adding these, the mobile phone will still be stretched when previewing, as if it has not been added. When you check through F12, you will find that there is no added style attribute at all, but the test data from the alert does.
This is because the style is filtered out by UEditor . There are a lot of ways to modify it on the Internet, but it doesn't work for me. Finally, I modified one place:
Find whitList----"img of ueditor.config.js, and add style to it, ie: img: ['style','src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],
This is to add style to the whitelist of img, so that everything in img will not be filtered out . This is more efficient than removing code that filters styles later.
Good luck everyone!