Свинцовый Пепелац

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>

Результат:

Итоги

Доступный для скачивания архив с плагином вы найдёте в прикреплённых к статье файлах. Плагин, повторюсь, получился простой и надёжный. Буду рад если он поможет кому-нибудь немного оживить ленту комментариев на своём сайте 😊.

Прикреплённые файлы:

    jquery.litesmileys.zip

    Очень простой и надёжный jQuery плагин для вставки смайлов в текстовое поле (TEXTAREA).
    Дата публикации: 13 августа 2021
    Расширение: ZIP
    Размер файла: 2.34 Кб
    Сканиваний: 75

Комментарии посетителей (14):

tester
1 февраля 2022 04:40
Здравствуйте ,как это в бд записать ? тексты пишет смайлы нет, пробовали решить это? 👏👏👏👏👏
1 февраля 2022 06:53
Здравствуйте, tester! Если у Вас смайлы не сохраняются в БД, то подозреваю что это может быть связано с кодировкой базы или поля в таблице. Нужно понимать что эти смайлы — юникодовские символы, так что кодировка должна быть UTF-8 например.
tester
1 февраля 2022 20:08
Да нет, проверял это сразу же и UTF8 и UTF8bm4 не сохраняет.. возможно с аяксом как то по другому надо выводить их..😵
1 февраля 2022 20:31
Вообще, проблемы с сохранением смайлов в БД быть не должно (проверено этим блогом 😁), так что поглядите внимательнее свои скрипты ☝️.
tester
1 февраля 2022 21:08
да я вижу сам ен пойму в чем дело. кодировка ютф8., аяксы пробовал разные и чз json и post и get . отправку onclick и чз id , не хочет... проверял на почту отправку там приходят ,в html тексты выводит.. а в базу не пишет.. у вас тут тоже аякс ?как передали значение ? можете показать пример? спасибо) 👽
1 февраля 2022 21:25
Вы проверьте что у вас приходит с формы на сервер (не важно аяксом или каким другим образом отправляете данные). Если с формы смайлы нормально прилетают, то тогда уже нужно будет смотреть как Вы в БД это всё дело отправляете и как перед этим обрабатываете строку со смайлами. Я использую PDO, и как видите проблем с сохранением смайлов в базу не имею 👐. В самих смайлах вообще никакой магии нет, это просто символы, такие же как и все остальные, так что базе должно быть пофигу на них.
tester
4 февраля 2022 00:16
мож кому пригодится , решил вопрос при подключении базы задал кодировку - mysql_query("SET NAMES 'utf8mb4_unicode_ci'"); или mysqli_query($connect, 'SET NAMES="utf8mb4_unicode_ci"'); и поле вывода где запись изменил кодировку на utf8mb4_unicode_ci 😁💪 PS с utf8 записывало только некоторые смайлы, в остальных писало - ??????????? удачи))) 🎸
4 апреля 2022 10:46
У меня PDO на запрос "SET NAMES 'utf8mb4_unicode_ci'" ругается: SQLSTATE[42000]: Syntax error or access violation: 1115 Unknown character set: 'utf8mb4_unicode_ci' а вот "SET NAMES utf8mb4" проглотил нормально 😊
Аноним
4 апреля 2022 16:30
😇
Анонимоус
31 мая 2022 21:04
Добрый день. Помогите разобраться в проблеме - если строку "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-языках, заранее спасибо.😂
1 июня 2022 10:41
Анонимоус, если вы подключаете локальный jquery в приложенном к статье примере, то удалите у тега SCRIPT атрибуты `integrity`и `crossorigin`: <script src="jquery-1.12.4.min.js"></script> Так будет работать 😉
Аноним
10 июня 2022 18:44
Спасибо, будем дальше осваивать сие нелегкое ремесло 😄😄
Дмитрий
21 июля 2022 22:51
Спасибо! Отличный скрипт и главное легкий. Добавил в форму комментариев Wordpress, работает отлично.
lion
5 февраля 2023 12:47
Нужно в config сайта сделать кодировку SET NAMES utf8mb4 и поле в БД, где будут записываться смайлы тоже выбрать SET NAMES utf8mb4 и все будет работать👍

Написать комментарий:


Максимальный размер файла загружаемого изображения 10 Мб