Prefacio:
Dado que el proyecto de desarrollo de la compañía requiere el uso de complementos de emoticon, ha estado en Baidu durante mucho tiempo. Muchos complementos de emoticones necesitan hacer referencia a muchos archivos JS, y no hay demostraciones preparadas para usar. Algunos complementos se refieren a muchas imágenes, y cada emoticón debe solicitarse nuevamente. Para tal función, no vale la pena introducir muchos JS e IMGS ...
Por lo tanto, el blogger ha codificado un pequeño "complemento de expresión" para su uso fácil en el futuro.
Función
Función: pase el formato de caracteres correspondiente a la expresión al fondo, el fondo devuelve la cadena y el extremo frontal analiza la cadena en la expresión correspondiente para mostrarla en la página.
Cómo usar:
Configurar los parámetros requeridos en la opción
opción var = {emOJiarray: ['Angry'], // Complete la matriz de cadenas emoji, [nota: el icono debajo de la imagen del archivo de origen, solo necesita escribir la cadena en el cuadro rojo, consulte la figura a continuación para obtener detalles] TextAREAID: 'Emoji-editor', // El idloadid del cuadro de entrada: 'Cargar', // el ideMOJiContainer para cargar emoji "EMOJI: 'emOJiContainer', // El objeto de contenedor que almacena emoji sendid: 'enviar', // el botón para enviar información ideMoJitranslateCls: 'emOJi-Comment', // El nombre de clase de contenedor que debe convertirse a emOJi (img) solo es necesario para agregar una clase a la renderización de la clase: Kissing_Heart: EMOJi ~ ~*; = nuevo emoji (opción); text.init ();Captura de pantalla del efecto aproximado: (UI puede embellecer de acuerdo con sus necesidades)
Después de hacer clic en Enviar, los datos enviados al fondo son:
Tres principios del complemento de emoticon:
• ¿Cómo mostrar expresiones?
CSS Sprites (Tecnología de integración de imágenes), primero establezca el icono de fondo, luego defina la posición, el ancho, la altura de cada pequeño icono y muestre la expresión que desea mostrar. Problemas encontrados durante este período: ¿Cómo controlar el tamaño de la expresión mostrada? Lo primero que pensé es el método de tamaño de fondo, pero es muy "físico" redefinir su posición. Más tarde, cuando el futuro está oscuro, encontré una transformación de propiedad: escala (1.5); Para controlar la relación de escala de elementos actuales, jaja, se realiza una línea de código ~ ¿Desea que la expresión sea grande o pequeña, y no está satisfecho con el tamaño? Haga todo el código • ¿Cómo mostrar emoticones en el cuadro de entrada?
Al principio elegí el TextARea de la entrada, pero cuando puse el emoticón "adjuntar" en el cuadro de entrada, el icono no se mostró. Más tarde, probé el Div y luego "agregar" y descubrí que la expresión se podía mostrar con éxito, pero el DIV no pudo ingresar al texto, que era infructuoso ...
Idea preliminar: use la entrada de entrada para agregar el valor de agregar textura al DIV en tiempo real. Del mismo modo, esto es ingrato ~ Continuar explorando ...
Más tarde descubrí una gran cantidad de atributos. contento = "verdadero", y felizmente eligió Contentedable.
Al principio, usa SPAN para alojar el icono de emoticón, pero si coloca la imagen con etiquetas Div o Span, la Contentedable se agregará al último Div/Span de forma predeterminada ..., por lo que hará que ingrese el icono Emoticon y luego ingrese el texto. El último texto estará en el último Div/Span, que no se muestra en ningún texto. Ok ... estoy tan cansado ...
Dado que Div/Span no es posible, use la etiqueta IMG para alojar la expresión, y ahora finalmente puede ingresarla normalmente.
[Contentedable tiene un problema, admite el texto rico, es inseguro y tiene una mala experiencia del usuario. 】
Por ejemplo: cuando los usuarios pegan, automáticamente traerán el formato. Los ejemplos son los siguientes:
Este es un código del maestro en línea para eliminar la función de texto rica. Para referencia específica: una publicación de blog maestro
• ¿Cómo convertir imágenes y texto?
En este momento, debe usar reglas poderosas. Primero use html () para obtener el contenido y luego procese el contenido. Convertir a texto:
1 content.replace (/<img/b [^>]*/, imgobj [j]) // coincide con todos <img/> y reemplácelo con el formato correspondiente
2 imgobj.push (formato + img [i] .getAttribute ("alt") + formato); // Uso el formato aquí: por lo que es un formato similar a este: Temeroso: convertirlo en una imagen:
var llays = '//+|-|||| Ball | A | AB | ABC | ABCD | ABCD | Aceptar ...' // Solo se enumeran algunas reglas aquí. 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 formato IMG correspondiente}El formato de código de todo el complemento también es un método común de encapsulación.
// Función de atributo mutable de objeto emoji emoji (opción) {this.emoJi = option.emOJiarray, this.texTareaId = opcion.TextAREAId, this.loadid = option.loadId, this.sendid = opcion.sendid, this.emOJiContainer = opción opción.emoJitranslateCls;}// Cada vez que se genera una instancia, los atributos anteriores se regenerarán, de modo que para los métodos fijos, consumirá más memoria. Esto no es ecológico ni eficiente. Por lo tanto, esas propiedades y métodos sin cambios se pueden definir directamente en el objeto prototipo. En este momento, todos los métodos fijos son en realidad la misma dirección de memoria, apuntando al objeto prototipo, mejorando así la eficiencia de la operación.
Emoji.prototype = {init: function () {// Pon algunos métodos de inicialización this.toemoJi (); this.loademoJi (); this.bindevent ();}, bindEvent: function () {}, toemoJi: function () {}, // Convertir datos del servidor a emoticones totext: function () {} // Convertir a text LoademoJi: function () {} // cargar emoticones}Ok, incluso si se completa dicho complemento de expresión, ¿es fácil estar atado o no? Actualmente, debe confiar en jQuery por el momento. Si tiene la energía, continúe jugando con o (∩_∩) o basado en JS nativo. El código de implementación específico está en GitHub. Finalmente, adjunte la dirección de GitHub: https://github.com/beidan/emoji
Lo anterior es la introducción de JavaScript que el editor le ha presentado, a partir de 0, y espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!