JavaScript starts with the 0 concept of expression plugin _javascript tips

Preface:

Because the company development projects need to use the expression Plug-ins, Baidu for a long time on the internet, a lot of expression plug-ins, are required to cite a lot of JS files, there is no ready-made demo can be used, and some plug-ins are cited a lot of pictures, every expression to be asked again. For such a function, to introduce a lot of js,img, but also outweigh the gains ...

Therefore, Bo master their own code a small "expression plug-in" to facilitate the direct use of the project later.

Function

Function: Convey the character format of the expression to the background, back to the background string, the front end of the string resolution to display the corresponding expression on the page.

How to use:

Configure the required parameters in option

var option = {
Emojiarray: [' angry '],//fill in an array of expression strings, "Note: the icon below the source file image, just write the string in the red box, as detailed in the following figure"
Textareaid: " Emoji-editor ',//input box ID
loadid: ' Load ',//load expression ID
emojicontainer: ' Emojicontainer ',///Storage expression of container object
Sendid : ' Send ',//Send a message button ID
emojitranslatecls: ' emoji-comment ',///need to convert to expression (IMG) container class name, just add a class, you can automatically: Kissing_heart: Render into Expression ~
};
/* Call method * *
var text = new emoji (option);
Text.init ();

General Effect screenshot: (UI aspects can be beautified according to their needs)

After clicking Send, the data sent to the backstage is:

Three principles of the expression plugin:

• How do i show the expression?

CSS Sprites (Image integration technology), first set the background icon, and then define the position,width,height of each small icon, you can show the expression you want to show. Problems encountered during: How to control the size of the display expression? The first thought is background-size this method, but to redefine its position, very time-consuming "physical", later, the way out, found a property transform:scale (1.5); Control the current element scaling ratio, haha, a line of code is done ~ Want to look big, or small, size is not satisfied? All in one line of code. • How do i show an emoticon in an input box?

The first is to select the textarea of input, but, will expression img "append" To this input box, also did not show this icon, later tried Div, then "append", found that the expression can be successfully displayed, but Div can not enter text, no fruit ...

Preliminary idea: Use Input monitor, will textarea value real-time add to Div, the same, this is also thankless ~ continue to explore ...

Later found a very popular attribute. Contenteditable= "true", and happy to choose the contenteditable.

The first is to use span to host emoticons, but with div or span tags to place the image, then contenteditable will default to the final div/span ..., so it will result in the input emoticons, then enter the text, the last text will be in the last Div/span , causing no text to appear. All right...... What a tired heart ...

Since Div/span can not, the use of IMG tag bearing expression, this is finally able to enter the normal.

"Contenteditable has a problem, it supports rich text, unsafe, and bad user experience." 】

For example: When the user pastes, will automatically bring the format, examples are as follows:

This is the use of the Internet a section of the code, to remove Rich text features, specific reference: a big God Blog

• How to convert pictures and text?

This is the time to use a strong regular, first with HTML () to obtain content, and then to deal with the content. Convert to Text:

1 Content.replace (/]*/, imgobj[j])//Match all , replace with the corresponding format

2 Imgobj.push (format + img[i].getattribute ("alt") + format); The format I use here is: so it's like this: fearful: The format is converted to a picture:

var keys = ' \\+|-| | | Ball|a|ab|abc|abcd|accept ... '//here is only
a partial regex = new RegExp (':(' + keys + '): ', ' g '),//matching format such as:
$ (Obj[i]). h TML (). Replace (regex, emoji)//replace
function emoji () {
var key = arguments[];
Return '  
 

The entire plug-in code format, but also a more common way of encapsulation

Emoji object Variable property
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;
}

Each time an instance is generated, the properties above are regenerated once, which consumes a bit more memory for a fixed method. This is neither environmental protection nor efficiency. So the invariant properties and methods can be defined directly on the prototype object. At this point all fixed methods, in fact, are the same memory address, pointing to the prototype object, thus improving the efficiency of the operation.

Emoji.prototype = {
init:function () {//Put some initialization method
This.toemoji ();
This.loademoji ();
This.bindevent ();}
,
bindevent:function () {},
toemoji:function () {},//server data converted to emoticons
Totext: function () {}//Convert to Text
loademoji:function () {}//load Expression
}

OK, such an expression plug-in even if completed, the department is not very simple? Now you need to rely on jquery, then if you have the energy to continue to work on a native JS based O (∩_∩) O, the specific implementation code on the GitHub. Finally, attach GitHub address: Https://github.com/beidan/emoji

The above is a small set to introduce JavaScript from 0 began to conceive of expression Plug-ins, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!