Preface:
Since the company's development project requires the use of emoticon plug-ins, it has been on Baidu for a long time. Many emoticon plug-ins need to reference many js files, and there are no ready-made demos to use. Some plug-ins refer to many pictures, and each emoticon needs to be requested again. For such a function, it is not worth the effort to introduce a lot of js and imgs...
Therefore, the blogger has coded a small "expression plug-in" for easy use in the future.
Function
Function: Pass the character format corresponding to the expression to the background, the background returns the string, and the front end parses the string into the corresponding expression to display it on the page.
How to use:
Configure the required parameters in option
var option = {emojiArray: ['angry'], //Fill in the array of emoji strings, [Note: The icon below the source file image, you only need to write the string in the red box, see the figure below for details] textareaId: 'emoji-editor', //The idloadId of the input box: 'load', //The idemojiContainer for loading emoji: 'emojiContainer', //The container object that stores emoji sendId: 'send', //The button to send information idemojiTranslateCls: 'emoji-comment', //The container class name that needs to be converted to emoji (img) is only necessary to add a class to automatically render: kissing_heart: to emoji~};/*Calling method*/var text = new Emoji(option);text.init();Screenshot of the approximate effect: (Ui can beautify according to their needs)
After clicking Send, the data sent to the background is:
Three principles of emoticon plug-in:
•How to display expressions?
CSS Sprites (picture integration technology), first set the background icon, then define the position, width, height of each small icon, and display the expression you want to display. Problems encountered during this period: How to control the size of the displayed expression? The first thing I thought of is the background-size method, but it is very "physical" to redefine its position. Later, when the future is dark, I found a property transform: scale(1.5); to control the current element scaling ratio, haha, one line of code is done~ Do you want the expression to be large or small, and you are not satisfied with the size? Get all the code done • How to display emoticons in the input box?
At first I chose the textarea of input, but when I put the emoticon "append" on the input box, the icon was not displayed. Later, I tried the div and then "append" and found that the expression could be displayed successfully, but the div could not enter text, which was fruitless...
Preliminary idea: Use input listening to add textarea value to the div in real time. Similarly, this is thankless~ Continue to explore...
Later I discovered a large number of attributes. contenteditable="true", and happily chose contenteditable.
At the beginning, you use span to host the emoticon icon, but if you place the image with div or span tags, the contenteditable will be added to the last div/span by default..., so it will cause you to enter the emoticon icon and then enter the text. The last text will be in the last div/span, resulting in no text displayed. OK... I'm so tired...
Since div/span is not possible, use the img tag to host the expression, and now you can finally enter it normally.
[Contenteditable has a problem, it supports rich text, is unsafe, and has a poor user experience. 】
For example: When users paste, they will automatically bring the format. Examples are as follows:
This is a code from the online master to remove the rich text function. For specific reference: A master blog post
•How to convert pictures and text?
At this time, you need to use powerful rules. First use html() to get the content, and then process the content. Convert to text:
1 content.replace(/<img/b[^>]*/, imgObj[j]) //Match all <img /> and replace it with the corresponding format
2 imgObj.push(format + img[i].getAttribute("alt") + format); //I use format here: So it is a format similar to this:fearful: to convert it into an image:
var keys = '//+|-||||ball|a|ab|abc|abcd|abcd|accept...' // Only some regex is listed here. regex = new RegExp(':(' + keys + '):', 'g'), // Match the format like this: $(obj[i]).html().replace(regex, emoji) //Replace function emoji() {var key = arguments[];return '<img src=""class="emoji emoji_' + key + '"//Return the corresponding img format}The code format of the entire plug-in is also a common method of encapsulation.
//Emoji object mutable attribute function Emoji(option) {this.emoji = option.emojiArray,this.textareaId = option.textareaId,this.loadId = option.loadId,this.sendId = option.sendId,this.emojiContainer = option.emojiContainer,this.emojiTranslateCls = option.emojiTranslateCls;}//Every time an instance is generated, the above attributes will be regenerated, so that for fixed methods, it will consume more memory. This is neither environmentally friendly nor efficient. Therefore, those unchanged properties and methods can be directly defined on the prototype object. At this time, all fixed methods are actually the same memory address, pointing to the prototype object, thus improving the operation efficiency.
Emoji.prototype = {init: function () { //Put some initialization methods this.toEmoji(); this.loadEmoji(); this.bindEvent();},bindEvent: function () {},toEmoji: function () {}, //Convert server data to emoticons toText: function () {} //Convert to text loadEmoji: function () {} //Load emoticons}OK, even if such an expression plug-in is completed, is it easy to be tied to it or not? Currently, you need to rely on jquery for the time being. If you have the energy, continue to tinker with O(∩_∩)O based on native js. The specific implementation code is on github. Finally, attach the github address: https://github.com/beidan/emoji
The above is the JavaScript introduction that the editor has introduced to you, starting from 0, and I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!