Préface:
Étant donné que le projet de développement de l'entreprise nécessite l'utilisation de plug-ins d'émoticône, il est sur Baidu depuis longtemps. De nombreux plug-ins émoticône doivent référencer de nombreux fichiers JS, et il n'y a pas de démos prêtes à utiliser. Certains plug-ins font référence à de nombreuses images et chaque émoticône doit être demandée à nouveau. Pour une telle fonction, cela ne vaut pas l'effort d'introduire beaucoup de JS et d'IMG ...
Par conséquent, le blogueur a codé un petit "plug-in d'expression" pour une utilisation facile à l'avenir.
Fonction
Fonction: Passez le format de caractères correspondant à l'expression à l'arrière-plan, l'arrière-plan renvoie la chaîne et l'extrémité frontale analyse la chaîne dans l'expression correspondante pour l'afficher sur la page.
Comment utiliser:
Configurez les paramètres requis dans l'option
Var Option = {emojiarray: ['en colère'], // Remplissez le tableau des chaînes emoji, [Remarque: L'icône ci-dessous l'image du fichier source, vous n'avez qu'à écrire la chaîne dans la boîte rouge, voir la figure ci-dessous pour les détails] TextAreaid: 'emoji-editor 'emojiContainer', // L'objet conteneur qui stocke emoji sendId: 'Send', // le bouton pour envoyer des informations idemojitranslatecls: 'emoji-coment', // le nom de classe de conteneur qui doit être converti en emoji (img) est unique = nouveau emoji (option); text.init ();Capture d'écran de l'effet approximatif: (l'interface utilisateur peut embellir en fonction de leurs besoins)
Après avoir cliqué sur Send, les données envoyées à l'arrière-plan sont:
Trois principes d'émoticône Plug-in:
• Comment afficher les expressions?
Sprites CSS (technologie d'intégration d'image), définissez d'abord l'icône d'arrière-plan, puis définissez la position, la largeur, la hauteur de chaque petite icône et affichez l'expression que vous souhaitez afficher. Problèmes rencontrés au cours de cette période: comment contrôler la taille de l'expression affichée? La première chose à laquelle j'ai pensé est la méthode de la taille d'un arrière-plan, mais il est très "physique" de redéfinir sa position. Plus tard, lorsque l'avenir est sombre, j'ai trouvé une transformation de propriété: échelle (1.5); Pour contrôler le rapport de mise à l'échelle actuel, haha, une ligne de code est effectuée ~ Voulez-vous que l'expression soit grande ou petite, et vous n'êtes pas satisfait de la taille? Faites tout le code • Comment afficher les émoticônes dans la zone d'entrée?
Au début, j'ai choisi la TextArea de l'entrée, mais lorsque je mets l'émoticône "ajouter" sur la boîte d'entrée, l'icône n'a pas été affichée. Plus tard, j'ai essayé le div puis "ajouter" et j'ai constaté que l'expression pouvait être affichée avec succès, mais la div ne pouvait pas entrer de texte, qui était infructueuse ...
Idée préliminaire: utilisez l'écoute d'entrée pour ajouter de la valeur de TextArea au div en temps réel. De même, c'est ingrat ~ continuez d'explorer ...
Plus tard, j'ai découvert un grand nombre d'attributs. ContentEditable = "true" et a heureusement choisi le contenu.
Au début, vous utilisez Span pour héberger l'icône d'émoticône, mais si vous placez l'image avec des balises DIV ou SPAN, le contenu est ajouté au dernier div / span par défaut ..., donc cela vous amènera à entrer l'icône d'émoticône puis entrera le texte. Le dernier texte sera dans le dernier div / span, ce qui n'a donné aucun texte affiché. Ok ... je suis tellement fatigué ...
Étant donné que Div / Span n'est pas possible, utilisez la balise IMG pour héberger l'expression, et maintenant vous pouvez enfin l'entrer normalement.
[ContentEditable a un problème, il prend en charge le texte riche, est dangereux et a une mauvaise expérience utilisateur. 】
Par exemple: lorsque les utilisateurs colleront, ils apporteront automatiquement le format. Les exemples sont les suivants:
Il s'agit d'un code du maître en ligne pour supprimer la fonction de texte riche. Pour une référence spécifique: un article de blog Master
• Comment convertir des images et des textes?
Pour le moment, vous devez utiliser des règles puissantes. Utilisez d'abord HTML () pour obtenir le contenu, puis traitez le contenu. Convertir en texte:
1 content.replace (/ <img / b [^>] * /, imgobj [j]) // correspond à tout <img /> et remplacez-le par le format correspondant
2 imgobj.push (format + img [i] .getAttribute ("alt") + format); // J'utilise le format ici: il s'agit donc d'un format similaire à ceci: craintif: le convertir en une image:
var keys = '// + | - |||| ball | a | ab | ABC | ABCD | ABCD | Accepter ...' // Seul un regex est répertorié ici. regex = new regexp (':(' + keys + '):', 'g'), // corresponde au format comme ceci: $ (obj [i]). html (). Remplace (regex, emoji) // remplacer la fonction emoji () {var key = arguments []; return '<img src = "" class = "emoji emoji_' ' Format IMG correspondant}Le format de code de l'ensemble du plug-in est également une méthode courante d'encapsulation.
// fonction d'attribut mutable d'objet emoji eMoji (option) {this.emoji = option.emojiarray, this.textAreAid = option.TextAreAid, this.lolodId = option.loadId, this.sendid = option.sendid, this.emojicontainer = option.emojitranslatecls;}// Chaque fois qu'une instance est générée, les attributs ci-dessus seront régénérés, de sorte que pour les méthodes fixes, elle consommera plus de mémoire. Ce n'est ni respectueux de l'environnement ni efficace. Par conséquent, ces propriétés et méthodes inchangées peuvent être définies directement sur l'objet prototype. À l'heure actuelle, toutes les méthodes fixes sont en fait la même adresse mémoire, pointant vers l'objet Prototype, améliorant ainsi l'efficacité du fonctionnement.
Emoji.prototype = {init: function () {// Mettez quelques méthodes d'initialisation this.toemoji (); this.loademoji (); this.bindEvent ();}, binketEvent: function () {}, toEmoji: function () {}, // convertir les données du serveur en émoticons totext: function () {} // converti en texton welemoji: function () {} // charge émoticons}OK, même si un tel plug-in d'expression est terminé, est-il facile d'être lié ou non? Actuellement, vous devez compter sur jQuery pour le moment. Si vous avez l'énergie, continuez à bricoler avec O (∩_∩) O basé sur JS natif. Le code d'implémentation spécifique est sur GitHub. Enfin, joignez l'adresse GitHub: https://github.com/beidan/emoji
Ce qui précède est l'introduction JavaScript que l'éditeur vous a présenté, à partir de 0, et j'espère que cela sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!