Prefácio:
Como o projeto de desenvolvimento da empresa exige o uso de plug-ins de emoticon, ele está no Baidu há muito tempo. Muitos plug-ins de emoticon precisam fazer referência a muitos arquivos JS, e não há demos prontos para usar. Alguns plug-ins se referem a muitas fotos e cada emoticon precisa ser solicitado novamente. Para tal função, não vale a pena o esforço de introduzir muitos JS e IMGs ...
Portanto, o blogueiro codificou um pequeno "plug-in de expressão" para facilitar o uso no futuro.
Função
Função: Passe o formato do caractere correspondente à expressão para o plano de fundo, o plano de fundo retorna a string e o front -end analisa a string na expressão correspondente para exibi -la na página.
Como usar:
Configure os parâmetros necessários na opção
var option = {emojiarray: ['Angry'], // Preencha a matriz de strings emoji, [Nota: o ícone abaixo da imagem do arquivo de origem, você só precisa escrever a string na caixa vermelha, consulte a figura abaixo para obter detalhes] textareaid: 'emoji-editor', // a caixa de entrada da caixa de entrada: 'carga 'emojicontainer', // o objeto de contêiner que armazena emoji sendid: 'send', // o botão para enviar informações idemojitranslatecls: 'emoji-comment', // o nome da classe de contêiner que precisa ser convertido para emoji (iMg) é necessário apenas para adicionar para adicionar automaticamente render novo emoji (opção); text.init ();Captura de tela do efeito aproximado: (a interface do usuário pode embelezar de acordo com suas necessidades)
Depois de clicar em Enviar, os dados enviados para o fundo são:
Três princípios de plug-in emoticon:
• Como exibir expressões?
CSS Sprites (tecnologia de integração de imagens), primeiro defina o ícone de fundo e depois defina a posição, largura, altura de cada ícone pequeno e exiba a expressão que você deseja exibir. Problemas encontrados durante esse período: como controlar o tamanho da expressão exibida? A primeira coisa que pensei é o método de tamanho de fundo, mas é muito "físico" redefinir sua posição. Mais tarde, quando o futuro estiver escuro, encontrei uma transformação de propriedade: escala (1.5); Para controlar a taxa de escala de elemento atual, haha, uma linha de código é feita ~ você deseja que a expressão seja grande ou pequena e não está satisfeito com o tamanho? Faça todo o código • Como exibir emoticons na caixa de entrada?
No começo, escolhi a textarea de entrada, mas quando coloco o emoticon "append" na caixa de entrada, o ícone não foi exibido. Mais tarde, tentei o Div e depois "acrescentar" e descobri que a expressão poderia ser exibida com sucesso, mas a div não pôde entrar no texto, o que era infrutífero ...
Ideia preliminar: use a entrada de entrada para adicionar valor de textarea à div em tempo real. Da mesma forma, isso é ingrato ~ continue a explorar ...
Mais tarde, descobri um grande número de atributos. contentedável = "true", e felizmente escolheu o conteúdo.
No início, você usa o Span para hospedar o ícone do emoticon, mas se você colocar a imagem com tags Div ou Span, o conteúdo será adicionado ao último div/span por padrão ..., para que você insira o ícone do emoticon e depois digite o texto. O último texto estará no último div/span, resultando em nenhum texto exibido. Ok ... estou tão cansado ...
Como o DIV/SPAN não é possível, use a tag IMG para hospedar a expressão e agora você pode finalmente inseri -la normalmente.
[O contenteDeable tem um problema, ele suporta texto rico, não é seguro e tem uma má experiência do usuário. 】
Por exemplo: quando os usuários coletam, eles trazem automaticamente o formato. Exemplos são os seguintes:
Este é um código do mestre on -line para remover a função de texto rico. Para referência específica: uma postagem de blog mestre
• Como converter fotos e texto?
Neste momento, você precisa usar regras poderosas. Primeiro, use html () para obter o conteúdo e depois processe o conteúdo. Converter em texto:
1 Content.Place (/<img/b [^>]*/, imgobj [j]) // corresponde a todos <img/> e substitua -o pelo formato correspondente
2 imgobj.push (formato + img [i] .getAttribute ("alt") + formato); // eu uso o formato aqui: por isso é um formato semelhante a isso: temeroso: convertê -lo em uma imagem:
var keys = '//+|-|||| bola | a | abc | abc | abcd | abcd | aceitar ...' // apenas algum regex está listado aqui. regex = new regexp (':(' + keys + '):', 'g'), // corresponde ao formato como este: $ (obj [i]). html (). substituir (regex, emoji) // substituir função emoji () {var key = argument []; retorn '' <iMg Src) formato img correspondente}O formato de código de todo o plug-in também é um método comum de encapsulamento.
// emoji objeto de atributo mutável função emoji (option) {this.emoji = option.emojiarray, this.texTareaid = option.textareAid, this.loadId = option.loadId, this.sendID = option.sendid, thisMemojicontainer = option.emojicontainer option.emojitranslatecls;}// Toda vez que uma instância é gerada, os atributos acima serão regenerados, de modo que, para métodos fixos, ela consumirá mais memória. Isso não é ambientalmente amigável nem eficiente. Portanto, essas propriedades e métodos inalterados podem ser definidos diretamente no objeto de protótipo. No momento, todos os métodos fixos são realmente o mesmo endereço de memória, apontando para o objeto de protótipo, melhorando assim a eficiência da operação.
Emoji.prototype = {init: function () {// Coloque alguns métodos de inicialização this.toemoji (); this.loademoji (); this.bindevent ();}, bindEvent: function () {}, toemoji: function () {}, // Converte os dados do servidor em emoticons Totext: function () {} // convertem em text loademoji: function () {} // Load Otilicons}OK, mesmo que esse plug-in de expressão seja concluído, é fácil estar ligado a ele ou não? Atualmente, você precisa confiar no jQuery por enquanto. Se você tiver energia, continue mexendo com o (∩_∩) o com base no JS nativo. O código de implementação específico está no GitHub. Finalmente, anexe o endereço do github: https://github.com/beidan/emoji
O exposto acima é a introdução do JavaScript que o editor apresentou a você, a partir de 0, e espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!