Блог / jQuery плагин для вставки смайлов в TEXTAREA
13 августа 2021
На днях решил немного оживить форму добавления комментариев у себя на сайте, добавив посетителям возможность удобной вставки смайлов в текст комментария. Не долго думая, написал для этого простенький jQuery плагин, которым и хочу здесь поделиться.
Плагин очень простой, но со своей задачей справляется на ура. Не буду толочь воду в ступе и сразу перейду к демонстрации его возможностей.
Demo #1:
Код:
<script type="text/javascript">
$(document).ready(function() {
$('textarea#demo1').litesmileys();
});
</script>
<textarea id="demo1"></textarea>Результат:
Demo #2:
По-умолчанию плагин имеет ограниченный набор смайлов, но его можно легко переопределить при инициализации плагина (больше смайлов/эмоджи можно подсмотреть тут).
Код:
<script type="text/javascript">
$(document).ready(function() {
$('textarea#demo2').litesmileys({
'smileys': [
' :) ',
' :( ',
' :D ',
'😃',
'😄'
]
});
});
</script>
<textarea id="demo2"></textarea>Результат:
Demo #3:
Из предыдущего примера видно, что в набор смайлов можно включать не только отдельные символы, но и целые строковые выражения, что позволяет использовать этот плагин для формирования списка предустановленных ответов.
Код:
<style type="text/css">
div[unselectable="on"] > span {
display: block;
margin: 0 0 6px 35px;
}
div[unselectable="on"]::before {
content: "Быстрый ответ:";
font-weight: bold;
}
<style>
<script type="text/javascript">
$(document).ready(function() {
$('textarea#demo3').litesmileys({
'smileys': [
'Здравствуйте!',
'С уважением.'
]
});
});
</script>
<textarea id="demo3"></textarea>Результат:
Итоги
Доступный для скачивания архив с плагином вы найдёте в прикреплённых к статье файлах. Плагин, повторюсь, получился простой и надёжный. Буду рад если он поможет кому-нибудь немного оживить ленту комментариев на своём сайте 😊.
Читайте также:
Комментарии посетителей (22):
- 2
- 1
Да нет, проверял это сразу же и UTF8 и UTF8bm4 не сохраняет.. возможно с аяксом как то по другому надо выводить их..😵
Вообще, проблемы с сохранением смайлов в БД быть не должно (проверено этим блогом 😁), так что поглядите внимательнее свои скрипты ☝️.
да я вижу сам ен пойму в чем дело. кодировка ютф8., аяксы пробовал разные и чз json и post и get . отправку onclick и чз id , не хочет... проверял на почту отправку там приходят ,в html тексты выводит.. а в базу не пишет.. у вас тут тоже аякс ?как передали значение ? можете показать пример? спасибо) 👽
Вы проверьте что у вас приходит с формы на сервер (не важно аяксом или каким другим образом отправляете данные). Если с формы смайлы нормально прилетают, то тогда уже нужно будет смотреть как Вы в БД это всё дело отправляете и как перед этим обрабатываете строку со смайлами. Я использую PDO, и как видите проблем с сохранением смайлов в базу не имею 👐. В самих смайлах вообще никакой магии нет, это просто символы, такие же как и все остальные, так что базе должно быть пофигу на них.
мож кому пригодится , решил вопрос при подключении базы задал кодировку -
mysql_query("SET NAMES 'utf8mb4_unicode_ci'");
или
mysqli_query($connect, 'SET NAMES="utf8mb4_unicode_ci"');
и поле вывода где запись изменил кодировку на utf8mb4_unicode_ci
😁💪 PS с utf8 записывало только некоторые смайлы, в остальных писало - ??????????? удачи))) 🎸
У меня PDO на запрос "SET NAMES 'utf8mb4_unicode_ci'" ругается:
SQLSTATE[42000]: Syntax error or access violation: 1115 Unknown character set: 'utf8mb4_unicode_ci'
а вот "SET NAMES utf8mb4" проглотил нормально 😊
😇
Как сделать картинки заместо кодов? И что бы открывалось и закрывалось
Добрый день. Помогите разобраться в проблеме - если строку "https://code.jquery.com/jquery-1.12.4.min.js............" комментирую и файл jquery-1.12.4.min.js подключаю локально (очень не хочется от гугля зависеть), то получаю ошибку "Failed to find a valid digest in the 'integrity' attribute for resource "https://............................" with computed SHA-256 integrity 'OuXYtaKAa4ETeBBzE7GfCwW6rksrvoXhnpzSIzkaD+M='. The resource has been blocked. Можно ли решить эту проблему. Если да, то скиньте ответ на почту. Я не очень силен в web-языках, заранее спасибо.😂
Анонимоус, если вы подключаете локальный jquery в приложенном к статье примере, то удалите у тега SCRIPT атрибуты `integrity`и `crossorigin`:
<script src="jquery-1.12.4.min.js"></script>
Так будет работать 😉
Спасибо, будем дальше осваивать сие нелегкое ремесло 😄😄
Спасибо! Отличный скрипт и главное легкий. Добавил в форму комментариев Wordpress, работает отлично.
Нужно в config сайта сделать кодировку SET NAMES utf8mb4 и поле в БД, где будут записываться смайлы тоже выбрать SET NAMES utf8mb4 и все будет работать👍
Добрый день! Не работает с jQuery v3.7.1 , как исправить? Как добавить свой смайл jpg (например) в БД и вывести через этот скрипт?
Виталий, приветствую!
Пу-пу-пу... Я попробую плагин с указанной Вами версией jQuery, поправлю и отпишусь здесь в течении 2-3 часов. Спасибо за инфу!
Виталий!
Я протестил плагин с jQuery v3.7.1 (https://code.jquery.com/jquery-3.7.1.min.js) — всё работает норм если у тега SCRIPT где подключается либа jQuery убрать атрибуты integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" (тестил в FF). Приложенный к заметке файл плагина на всякий случай обновил (убрал указанные атрибуты).
Отпишитесь, плиз, получилось ли у вас.
А что касается вашего, Виталий, вопроса касательно JPG смайлов, то можете попробовать реализовать это на базе Demo #2 и Demo #3, хотя, по большому счёту, плагин писался не для этого 😊 Ну, а по части сохранения в БД и подобного, это к jQuery плагинам мало отношения имеет, так что здесь нет смысла обсуждать 😊
Спасибо за ответ. Если не получиться реализовать jpg смайлы и так далее, попробуем эти стандартные... Еще не тестил ваши исправления...
Хотел бы еще уточнить... Выборка из скрипта, а точнее конкретная функция которая вставляет объект в div или текстареа, в моём случае это div и мне нужна просто функция которая будет вставлять смайлы в текст последовательно и после пробела... У меня просто апендит в область блока, а не в строчку с текстом.. Заранее спасибо за ответ.
Виталий, почитайте тут https://learn.javascript.ru/selection-range - там всё расписано с примерами (см. "Пример: вставка на месте курсора"). Как я понимаю, это то, что Вам нужно.
- 2
- 1