JavaScript从0构思表情插件

前言：

因为公司的开发项目需要使用表情插件，百度在互联网上已经有很长时间了。很多表达式插件需要引用很多js文件，没有现成的演示可以使用。有些插件引用了很多图片，每个表情都需要重新请求。对于这样的功能，引入大量的js和img是不值得的.

因此，博主们编写了一个小的“表情插件”，以方便将来项目的直接使用。

功能

功能：将表达式对应的字符格式转移到后台，在后台返回字符串，前端将字符串解析显示成对应的表达式并显示在页面上。

用法：

在选项中配置所需的参数

Var option={emojiarray: ['愤怒']，//填充表达式字符串数组，【注意：源文件图像下的图标只需要将字符串写在红框中，具体见下图】TextArea ID :' emoji-editor '，//idloadId: 'load '在输入框中，//load idemicontainer : ' emojicontainer '的表情，//store container object sendid 3360 ' send '的表情，//sendtext . init()；

一般效果截图：(ui可以根据自己的需要进行美化)

点击发送后，发送到后台的数据为：

表情插件的三个原则：

如何显示表达式？

CSS Sprites(图片集成技术)，首先设置背景图标，然后定义每个小图标的位置、宽度和高度，然后就可以显示想要显示的表情了。期间遇到的问题：如何控制显示表情的大小？背景尺寸的方法首先出现在脑海中，但它需要大量的“体力”来重新定义它的位置。后来发现一个属性transform:比例尺(1.5)；控制当前元素的缩放比例，哈哈，一行代码就搞定了~要大表达式还是小表达式，大小不满意？如何用一行代码在输入框中显示表情符号？

起初，我选择了输入的文本区域，但是我把表达式img“append”放在这个输入框后面，但是这个图标没有显示。后来我尝试了div，在“追加”后发现可以成功显示表达式，但是div无法输入文本，也是无果.

初步想法：使用输入实时监控并向div添加textarea值。同样，这也是吃力不讨好~继续探索…

后来发现了一个很流行的属性。Contenteditable='true '，并愉快地选择了Contenteditable。

起初，表情加载了span，但是当图像放置了div或span标签时，默认情况下contenteditable将被添加到最后一个div/span.因此会导致输入表情符号，然后输入文本，最后一个文本将在最后一个div/span中，导致不显示任何文本。行.我真的累了.

由于无法使用div/span，所以使用img标签来携带表达式，最后可以正常输入。

【contenteditable有问题，支持富文本，不安全，用户体验不好。】

例如，当用户粘贴时，格式将被自动带入。例子如下：

这里有一段代码，使用在线大神移除了富文本功能。具体参考：大神博文

如何转换图片和文字？

这时候就需要使用强大的正则化，首先使用html()来获取内容，然后对内容进行处理。转换为文本：

1内容。替换(/img \ b [] */，imgobj[j])//匹配所有img/并用相应的格式替换它

2 imgObj.push(格式img[i])。getAttribute('alt ')格式)；//我这里用的格式：原来是这样的，fearful:的格式转换成图片：

varkeys=' \ \ |-| | | | ball | a | ab | ABC | ABCD | accept . '//这里只列出了部分regex=new regexp(' :(' key '): '，' g ')。//匹配格式如下：$ (obj [I])。html()。replace (regex，emoji)//replace函数emo Ji(){ var key=arguments[]；return ' img src=' http : ' alt=' key ' ' class=' emo Ji emo Ji _ ' key ' '/'；//返回对应的img格式}整个插件的代码格式也是常用的打包方式

//Emoji对象变量属性函数Emoji(option){ this . Emoji=option . emojiarray，this . textareid=option . textareid，this.loadid=option.loadid，this.sendId=option.sendId，this . emojicontainer=option . emojicontainer，this . emojitranslatecls=option . emojitranslatecls；}//每次生成一个实例，都会重新生成上面的属性，对于固定的方法会占用更多的内存。这既不环保也不高效。因此，您可以直接在原型对象上定义不变的属性和方法。此时所有的固定方法实际上都是同一个内存地址，指向原型对象，从而提高了运行效率。

emoji . prototype={ init : function(){//放一些初始化方法this . toe moji()；this . loademoji()；this . BindEvent()；}，bind event:function () {}，toemoji3360function () {}，//服务器数据转换成表情图totext 3360 function(){ }//转换成文字loademoji 3360 function(){ }//load表情图}好了，这样的表情图插件就算完成了，是不是很简单？目前暂时需要依赖jquery，有精力的话再继续在原生js的基础上修补一个O(_)O。具体实现代码在github上。最后附上github地址：https://github.com/beidan/emoji

以上是边肖介绍的JavaScript，从0构思表情插件，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！