Смайлики у тексті використовуються на веб-сайтах у коментарях, чатах і т.п. для яскравого відображення емоцій.
#1 Заміна символів на спрайти
Кожен смайл (основні смайлики) мають свої текстові варіанти. Для прикладу усмішка це: :-).
Цей спосіб полягає в замінні текстового значення смайлика на зображення, а зазвичай це CSS-спрайт.
<div><span onclick="insertSmile(':-)');" title=":-)" style="cursor:pointer;" class="sm1"><span class="smile"></span></span><span onclick="insertSmile(';-)');" title=";-)" style="cursor:pointer;" class="sm2"><span class="smile"></span></span><span onclick="insertSmile(':-D');" title=":-D" style="cursor:pointer;" class="sm3"><span class="smile"></span></span></div>
.smile{margin:0 1px 0 1px;background: url("/_css/default/smile.png") no-repeat center center; width:22px; height:22px;display:inline-block;}
.sm1 .smile{background-position: 0 0;}
.sm2 .smile{background-position: -22px 0;}
.sm3 .smile{background-position: -44px 0;}
textToSmile=function(s){
//масив з смайликами. [RegExp для пошуку і заміни смайлика, назва CSS-спрайта, текстовий варіант смайлика]
var smile=[[/\:\-\)/g,'sm1',':-)'], [/\;\-\)/g,'sm2',';-)'], [/\:\-D/g,'sm3',':-D']];
for(var si=0;si<smile.length;si++){
s=s.replace(smile[si][0],'<span class="'+smile[si][1]+'"><span class="smile"></span></span>');
}
return s;
}
insertSmile=function(s){
var el=document.getElementById('text');
el.focus();
if(el.selectionStart!=undefined){
var p=el.selectionStart;
el.value=el.value.substring(0,el.selectionStart)+s+el.value.substring(el.selectionEnd,el.value.length);
el.selectionStart=p+s.length;
el.selectionEnd=el.selectionStart;
}else el.value+=s;
}
- Переваги:
- можливість створювати власний стиль смайликів
- смайлики на усіх пристроях виглядають так само
- користувач може самостійно набрати текстову версію смайлика
- Недоліки:
- при набирані тексту смайлик не відображається а лише його текстова версія
- необхідно зберігати перетворений текст у форматі HTML (тоді перевіряти на не дозволені теги) або кожного разу змінювати символи на смайлики
#2 Вставка зображення у WYSIWYG
Вказавшши атрибут Element.contentEditable true - елемент можна редагувати у браузері. Це дозволяє створювати редактор WYSIWYG.
За допомогою метода document.execCommand() виконуємо камонду вставити HTML код з тегом img.
тест
addSmile=function(src){
var el=document.getElementById('test2');
el.focus();
document.execCommand("insertHTML", false, '<img src="'+src+'">');
}
- Переваги:
- можливість створювати власний стиль смайликів
- смайлики на усіх пристроях виглядають так само
- редактор WYSIWYG для написання тексту
- Недоліки:
- необхідно на сервері перевіряти (видаляти) не дозволені теги HTML типу script
#3 Вставка Emoji (Емодзі)
Вставка символів Емодзі (смайлів) у текст за допомогою Unicode.
Символи з Unicode можна глянути тут у таблиці.
Функція addUnicode() приймає десятковий код символа та додає його до елемента textarea.
Вигляд смайлика залежить від CSS стилю: font-family.
<textarea id="text3" style="width:100%;"></textarea>
<div id="smile3">
<a onclick="addUnicode(9200);">⏰</a><a onclick="addUnicode(9201);">⏱</a><a onclick="addUnicode(9202);">⏲</a><a onclick="addUnicode(9203);">⏳</a><a onclick="addUnicode(9917);">⚽</a><a onclick="addUnicode(9918);">⚾</a><a onclick="addUnicode(9925);">⛅</a><a onclick="addUnicode(9928);">⛈</a><a onclick="addUnicode(128512);">😀</a><a onclick="addUnicode(128513);">😁</a><a onclick="addUnicode(128514);">😂</a><a onclick="addUnicode(128515);">😃</a>
</div>
#smile3{font-family: 'Apple Color Emoji', 'Android Emoji', 'Segoe UI', 'EmojiSymbols', 'Symbola', 'Arial';}
addUnicode=function(n){
var text=document.getElementById('text3');
var s=String.fromCodePoint(n);
text.focus();
if(text.selectionStart!=undefined){
var p=text.selectionStart;
text.value=text.value.substring(0,text.selectionStart)+s+text.value.substring(text.selectionEnd,text.value.length);
text.selectionStart=p+s.length;
text.selectionEnd=text.selectionStart;
}
else text.value+=s;
}
<textarea id="text3" style="width:100%;"></textarea>
<div id="smile3">
<a onclick="addUnicode(9200);">⏰</a><a onclick="addUnicode(9201);">⏱</a><a onclick="addUnicode(9202);">⏲</a><a onclick="addUnicode(9203);">⏳</a><a onclick="addUnicode(9917);">⚽</a><a onclick="addUnicode(9918);">⚾</a><a onclick="addUnicode(9925);">⛅</a><a onclick="addUnicode(9928);">⛈</a><a onclick="addUnicode(128512);">😀</a><a onclick="addUnicode(128513);">😁</a><a onclick="addUnicode(128514);">😂</a><a onclick="addUnicode(128515);">😃</a>
</div>
- Переваги:
- великий вибір смайликів Unicode
- простота використання, так як посуті використовуються Unicode символи
- Недоліки:
- кожен браузер або ОС по різному відображає смайлик
- на деяких пристроях (зазвичай смартфонах) смайлики можуть відображатися не корекно: чорно-білі або ще гірше квадрат замість смайлика.