Смайлики для комментариев. iCMS2

+31
5.56K
Бесплатный хак для instantCMS 2, который добавить в форму комментарий, множество видов смайликов. Сама картинка в виде спрайта в формате png, т.е. все смайлики объединены в один файл, по этому загружается, кэшируется и отображаются.
Иллюстрация

Установка

Скачаем архив и загрузим в корень сайта.
Откроем файл \templates\default\controllers\comments\list.tpl.php в строку 6 добавим
  1. <!--START smiles-->
  2. <?php $this->addCSS('templates/default/assets/ui/smiles/css/emojione.sprites.css'); ?>
  3. <?php $this->addCSS('templates/default/assets/ui/smiles/css/emojionearea.min.css'); ?>
  4. <?php $this->addJS('templates/default/assets/ui/smiles/js/emojione.min.js'); ?>
  5. <?php $this->addJS('templates/default/assets/ui/smiles/js/emojionearea.min.js'); ?>
  6. <!--END smiles-->
В строке 99 находим
  1. <?php echo $user->is_logged ? html_editor('content') : html_textarea('content'); ?>
После добавим
  1. <div id="smiles_container"></div>
В конце файла найти
  1. <script>
  2. <?php echo $this->getLangJS('LANG_SEND', 'LANG_SAVE', 'LANG_COMMENT_DELETED', 'LANG_COMMENT_DELETE_CONFIRM'); ?>
  3. <?php if ($is_highlight_new){ ?>icms.commments.showFirstSelected();<?php } ?>
  4. </script>
и заменить на
  1. <script>
  2. <?php echo $this->getLangJS('LANG_SEND', 'LANG_SAVE', 'LANG_COMMENT_DELETED', 'LANG_COMMENT_DELETE_CONFIRM'); ?>
  3. <?php if ($is_highlight_new){ ?>icms.commments.showFirstSelected();<?php } ?>
  4. $(document).ready(function() {
  5. emojione.imageType = 'png';
  6. emojione.ascii = true;
  7. emojione.sprites = true;
  8. $("#comments_add_form .textarea").emojioneArea({container: "#smiles_container",hideSource: true});
  9. });
  10. </script>
После этого у вас на форме комментирования, должны появиться смайлики, но при добавлении мы видим просто текст а не смайлик.

Что бы это исправить, откроем файл \templates\default\controllers\comments\comment.tpl.php и в строку 2 добавим
  1. <?php $this->addCSS('templates/default/assets/ui/smiles/css/emojione.sprites.css'); ?>
  2. <?php $this->addJS('templates/default/assets/ui/smiles/js/emojione.min.js'); ?>
И в конце, перед <?php } ?> добавим
  1. <script>
  2. $(document).ready(function() {
  3. emojione.imageType = 'png';
  4. emojione.ascii = true;
  5. emojione.sprites = true;
  6. $(".comment .text").each(function() {$(this).html(emojione.shortnameToImage($(this).html()));});
  7. });
  8. </script>
Теперь в место текстов, на комментариях отображаться смайлики, но при нажатии Предпросмотр всё ровно отображается текст и кнопка Редактировать не работает.

Что бы это исправить, откроем файл \templates\default\js\comments.js и в строку 60 после
  1. $('textarea', form).val('').focus();
добавим
  1. $('.emojionearea-editor', form).text('');
Строку 134 заменим на
  1. $('.preview_box', form).html( emojione.shortnameToImage(result.html) ).slideDown();
В строке 238 находим
  1. if (result.html){
  2. this.append(result);
  3. }
и заменим на
  1. if (result.html){
  2. result.html = emojione.shortnameToImage(result.html);
  3. this.append(result);
  4. }
Строку 257 заменим на
  1. $('#comments_list #comment_'+result.id+' .text').html( emojione.shortnameToImage(result.html) );
В строку 297 добавим
  1. $('.emojionearea-editor', form).text(result.html).focus();
в строке 447 находим
  1. $('textarea', form).val('');
и после добавим
  1. $('.emojionearea-editor', form).text('');

Виджеты

Что бы смайлики отображались в виджетах комментарии, откройте файл:
\templates\default\controllers\comments\widgets\list\list.tpl.php и в строку 2 добавить
  1. <?php $this->addCSS('templates/default/assets/ui/smiles/css/emojione.sprites.css'); ?>
  2. <?php $this->addJS('templates/default/assets/ui/smiles/js/emojione.min.js'); ?>
И в конце, перед <?php } ?> добавим
  1. <script>
  2. $(document).ready(function() {
  3. emojione.imageType = 'png';
  4. emojione.ascii = true;
  5. emojione.sprites = true;
  6. $(".widget_comments_list .text").each(function() {$(this).html(emojione.shortnameToImage($(this).html()));});
  7. });
  8. </script>
Вот и всё :)

Плагин взял от сюда: github.com/mervick/emojionearea

Внимание: обнаружили баг, после данного хака, перестают работать bb-кнопки

Скачать

Вы можете скачать только файлы и настроить сами (код выше) либо скачать готовые файлы и загрузить с заменой.

Демо здесь | demo@demo.ru — 123456
+1
Melon Melon 9 лет назад #
За разработку плюс, но сделайте кто-нибудь вот эти смайлы

http://rghost.ru/6VPSvKDDy
0
Melon Melon 9 лет назад #
Как на этом форуме, чтобы были gif файлы с анимацией и смайлы от квипа
HostelB HostelB 9 лет назад #
Комментарий удален
+2
My-InstantCMS.Ru My-InstantCMS.Ru 9 лет назад #
Спасибо)
HostelB:
Не хотите объединить усилия и сделать крутой компонент для вставки ваших смайлов в мой компонент
Конечно, что от меня требуется?
HostelB HostelB 9 лет назад #
Комментарий удален
0
My-InstantCMS.Ru My-InstantCMS.Ru 9 лет назад #
есть демо компонента? хотелось бы посмотреть на форму
HostelB HostelB 9 лет назад #
Комментарий удален
0
My-InstantCMS.Ru My-InstantCMS.Ru 9 лет назад #
хорошо, отправьте пакет сюда my-instantcms@mail.ru
+2
Shuma Shuma 9 лет назад #
Ваши не то что курят в стороне, ваши не работают:)
0
DenzeL DenzeL 9 лет назад #
Работает! Ура! Спасибо плюсанул! Долой скучные коменты dance
0
Birles Birles 9 лет назад #
Не смог установить ваши готовые файлы в сторонний шаблон, не посоветуете что можно сделать? Готовые файлы закачал в корень дефолтного шаблона, затем их же закачал в корень стороннего шаблона, ничего не получилось, может я что то делаю не так?
0
My-InstantCMS.Ru My-InstantCMS.Ru 9 лет назад #
ошибку выдает или что?
Если можно, ссылку на сайт дайте.
0
Birles Birles 9 лет назад #
Нет, ошибку не выдает, просто ничего нету. Вот тестовый сайт на поддомене, http://test.akziaplus.kz/ мой испытательный полигон компонентов и виджетов. Здесь проверяю их работоспособность и только потом переношу в основной сайт. Так вот на этом поддомене смайлы и не работают.
0
My-InstantCMS.Ru My-InstantCMS.Ru 9 лет назад #
В исходном коде сайта, не вижу подключенные js файлы.
Вы точно загружаете файлы из архива, из папки /templates/default/ в папку вашего сайта /templates/news/ ?
Либо их нет, либо права неправильно установлены http://test.akziaplus.kz/templates/news/assets/ui/smiles/css/emojione.sprites.css
0
Birles Birles 9 лет назад #
Кстати, забыл написать. С дефолтным шаблоном все работает, смайлики есть и вставляются в комментарии без проблем. А эти смайлики можно заменить самому и как это сделать, а то они какие то невзрачные и не привлекательные)
0
My-InstantCMS.Ru My-InstantCMS.Ru 9 лет назад #
Если знаете фотошоп, то можете заменить какие то смайлики на свои, но не советую изменить позицию смайлика.
Вот файл /templates/default/assets/ui/smiles/css/emojione.sprites.png
0
Birles Birles 9 лет назад #
Спасибо дорогой, что подсказали. Теперь все работает!
0
Birles Birles 9 лет назад #
Подскажите пожалуйста. Ваш хак может повлиять на работу биллинга? У меня в объявлениях есть оплата за выделение цветом и поднятие в поиске. При отмеченных галочках все работает, выделяется цветом и поднимается в поиске. Но перестала работать система оплаты взимаемая за эти действия, баллы с биллинга не списываются.
0
My-InstantCMS.Ru My-InstantCMS.Ru 9 лет назад #
Система оплаты находится на странице добавления, а хак находиться на странице просмотр материала и влияет только на java script, к биллингу не имеет никакого отношения.
В любом случаи можете отключить Комментарий в объявлениях и проверить будет ли работать...
0
Birles Birles 9 лет назад #
Спасибо, понял. Возможно проблема в чем то другом .
+1
Андрей Андрей 9 лет назад #
Смотрю демо. Смайлики работают, а всё остальное (цитата, картинка, ссылка...) работать перестало. Браузер Файрфокс.
0
My-InstantCMS.Ru My-InstantCMS.Ru 9 лет назад #
Да, есть такой баг, попробую исправить.
0
Игорь Lu Игорь Lu 9 лет назад #
Не исправили ещё баг который заблокировал добавление цитат картинок и ссылок?
0
My-InstantCMS.Ru My-InstantCMS.Ru 9 лет назад #
Исправили, соединил со скриптом, который дал Андрей, пока времени нету редактировать пост, если хотите, дам готовый архив.
Как будет свободное время, обновлю пост
+1
Андрей Андрей 9 лет назад #
Вот мой вариант этих же смайликов:
http://instantcms.ru/users/files/download5507.html
Может не так красиво как задумано, зато всё работает. Хак только в одном файле.
0
My-InstantCMS.Ru My-InstantCMS.Ru 9 лет назад #
Спасибо, работает только одним файлом не обойтись, так как на страницах http://сайт/comments и в виджетах смайлики не будут отображаться.
+1
Андрей Андрей 9 лет назад #
Да, в таком списке не работает. Если хотите, можете сделать что-то среднее из двух вариантов и выложить. Моих авторских прав учитывать не нужно :)
0
Александр Александр 9 лет назад #
А такое можно сделать для первого InstantCMS или просто как сделать дополнительную панель смайликов для первой. заранее благодарю и спасибо!
0
Александр Александр 9 лет назад #
Вот, что то типа такого http://instantcms.ru/blogs/masterskaja-jashi/dopolnitelnaja-smail-panel-v2.html для первой.
0
ivanish ivanish 8 лет назад #
Доброй ночи! А реально добавить смайлики не только в комменты, но и в текст?
Чтобы при написании статьи или поста в группу тоже можно было бы шалить?

Еще от автора

Компонент Находки и потеряшки
С помощью данного компонента можете организовать на сайте Бюро находок, где пользователи пишут о своих находках или потерянных вещах.
Разработка компонента Справочник
Анонс разработки компонента Справочник для InstantCMS2
Разработка компонента Викторина
Обсуждение разработки нового компонента Викторина или Тесты
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.