Добавлять «emojis» в веб-страницу

Я увидел, что сайты как Twitter, Facebook, Bitbucket, Github, Gmail, между другими. Они добавляют emojis написав некий набор символов или какие-то добавляют их, напечатав контент. Немного как:

:D->

Я представляю, что существует слушание, запрограммированный с регулярными выражениями в JavaScript в ожидании контента, который совпадал бы с вышеупомянутым главным файлом для потом remplazar из-за изображений или unicode (как Фонт Авесоме).

Мне хотелось бы знать, что то, что он перемещает, чтобы этого добиваться. Существует какой-то главный файл рисунка, который он мог бы использовать?: я требую иметь какую-то специальную конфигурацию в моем DB (MySQL)?.

Заметь: Больше, что использовать framework (если он существует) нравилось бы мне знать, как его добиваются.

5
задан 17.12.2015, 22:54
3 ответа

AquГ - есть пример cГіmo делать то, что ты желаешь без какого-либо класса framework, sГіlo Vanilla-Script:

Замечает: он не дал мне время осуществления правильно regex, чтобы захватывать cГіdigo smile:), но общая идея функциональная:

CГіdigo:

window.onload = publicar;

function publicar(){
  
  var texto = document.getElementById('texto-origen').value;  
  var elemento_destino =  document.getElementById('elemento-destino');
  
  var emojis = [
    {codigo:':b',class:'emoji lengua'},
    {codigo:'xD',class:'emoji XD'},
    {codigo:':)',class:'emoji smile'}    
  ];   
  
  var result = findById( emojis, 45 );  
  
  for (i = 0; i < emojis.length; i++) { 
    
    var emoji = emojis[i];
    var image = '<div class="' + emoji.class + '"></div>'
        
    texto = replaceAll(texto,emoji.codigo,image);      
    
  }  
  
  elemento_destino.innerHTML = texto;
  
}


function findById(source, id) {
    return source.filter(function( obj ) {
        // coerce both obj.id and id to numbers 
        // for val & type comparison
        return +obj.id === +id;
    })[ 0 ];
}


function replaceAll(str, find, replace) {  
  try{
    return str.replace(new RegExp(find, 'g'), replace);
  }catch(ex){
    return str;
  }
}
textarea{
  width:300px;
  margin-top:25px;
  height:50px;
}

#elemento-destino{
  font-size:2em;
  padding-top:5px;
}

.emoji{  
    display:inline-block;
    vertical-align:middle;
    width: 60px;
    height: 60px;
      background: url(https://s-media-cache-ak0.pinimg.com/236x/e9/b3/13/e9b313c5bad0465c6ee1cb51b06e9e2d.jpg); 

  
}

.emoji.lengua{  
  background-position: 0px 0px;
}

.emoji.XD{
 
  background-position: 0px 180px;
}

.emoji.smile{  
  background-position: 60px 0px;
}
<strong>Prueba con xD y :b</strong><br/>
<textarea id="texto-origen" class="tarea">Hola xD mundo :b</textarea>
<button onclick="publicar()">Publicar</button>
<div id="elemento-destino"></div>
3
ответ дан 24.11.2019, 15:05
  • 1
    Это implementaci и # 243; n, которого я описал в моем ответе. и #161; Цюй и # 233; интересный! –  17.12.2015, 22:41
  • 2
    Если, ясно, что он это! – Henry Rodriguez 17.12.2015, 22:45
  • 3
    Есть формы м и # 225; s f и # 225; ciles 😥🠘 “😠• – astrojuanlu 18.12.2015, 10:31
  • 4
    @astrojuanlu, Если ты знаешь другую форму, пожалуйста достигни. Знание всегда хорошее. – Chofoteddy 22.09.2016, 05:15

Ты не нуждаешься ни в какой конфигурации базы данных, так как, чтобы избавлять от ресурсов, осуществляется в ПК клиента renderizado. Главные файлы рисунка в я не знаю, но в других языках ты сделал бы статический и публичный класс, который содержал бы таблицу (hash) всех смайлики, в случае когда это использовал бы экстенсивно.

Процедура

Ты находишь цепь в тексте, когда человек пишет, и remplazas из-за tag imágen, идеально, должно быть, используешь составляющий HTML или что-то, что не ограничивало бы тебя, чтобы вводить текст в компьютер только, как это случай input, самая легкая форма состоит в том, чтобы добавлять свойство contenteditable что позволит тебе издавать фрагмент DOM.

Здесь у тебя есть маленький пример с

$('#editor').bind("DOMSubtreeModified", function() {

  //alert($('#editor').html);
  var texto = $('#editor').html();
  var pos = texto.search('\\:\\)');
  if (pos != -1) {
    alert('hallado en ' + pos);
    var tam = 5;
    var inicio = texto.slice(0, pos);
    var url = "http://simpleicon.com/wp-content/uploads/smile.png";
    var fin = texto.slice(pos + tam, texto.length);
    $('#editor').html(inicio + '<img src="' + url + '" width="35">' + fin);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor" contenteditable="true">escribe dos puntos paréntesis que cierra aquí=></div>
2
ответ дан 24.11.2019, 15:05

Самое основное, что я могу представлять себе:

  • На твоей веб-странице существовало изображение со всеми sprites (в этом случае, emojis), который ты хочешь, например улыбающееся лицо и улыбающееся лицо с зубами
  • Использовать язык сценариев JavaScript для того, чтобы потом, что загрузил контент страницы (с jQuery был бы путем $(document).ready()) что оценил контент <p>s или <div>s, где тебе было нужно, чтобы был заменен контент символов как :) и :D с этикетками <img> или <span> что представили части изображения путь CSS, как он объясняется здесь. Чтобы облегчать работу, у тебя могли бы быть классы CSS, которого уже они содержали бы как background точный sprite, в котором ты нуждаешься главного изображения. Чтобы идентифицировать <p>s и <div>s, ты мог бы использовать класс CSS, так что ты уменьшаешь анализ текста, где было нужно применять изменение, и также уменьшаешь, что где-то произведенного HTML оно последовало за этой заменой.
0
ответ дан 24.11.2019, 15:05

Теги

Похожие вопросы