Смайлики в BUEditor (BUEditor + Smilyes)

Аватар пользователя sashken sashken 15 марта 2009 в 0:33

Захотел прикрутить к своему сайту смайлики. Перерыл drupal.ru и другие ресурсы, нашел все в разных местах и все по кусочкам, но простого готового решения не нашел. Собрал все кусочки в кучу. Вот что вышло:

Используем модули

Здесь admin/settings/filters нужно настроить тот фильтр, который установлен у вас по умолчанию. В настройках вашего фильтра поставьте галочку на фильтр смайликов.

В эту папку sites/all/modules/smileys/packs распаковываем файл kolobok.zip

Идем сюда admin/settings/smileys/import и напротив kolobok жмем Установить, остальные удаляем (они останутся, потом можно будет их установить заново).

Далее два варианта:
1) либо импортировать мои прикрепленные ниже кнопки (т.е. файл icons.zip распаковать сюда sites/all/modules/bueditor и здесь admin/settings/bueditor/1 внизу страницы Импортировать CSV-файл с кнопками (он находится в прикрепленном архиве bueditor_buttons.zip))

2)либо здесь admin/settings/bueditor/1 создать свою новую кнопку:

js:
getSmile=function(txt) {
  editor.active.replaceSelection(txt,'end');
  editor.dialog.close();
}
var userForm = '';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';

userForm += '

';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
 
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
 
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';

userForm += '

';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';

userForm += '

';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';

userForm += '

';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='';
userForm +='
\':ANGEL:\');">ANGEL \':HAPPY:\');">HAPPY \':SAD:\');">SAD \':WINKING:\');">WINKING \':TONGUE:\');">TONGUE \':COOL:\');">COOL \':LAUGHING:\');">LAUGHING
\':EMBARASSED:\');">EMBARASSED \':SHOCKED:\');">SHOCKED \':KISS:\');">KISS \':CRYING:\');">CRYING \':SILENT:\');">SILENT \':ANGRY:\');">ANGRY \':DONT_UNDERSTAND:\');">DONT_UNDERSTAND
\':PENSIVE:\');">PENSIVE \':JOKINGLY:\');">JOKINGLY \':DEVIL:\');">DEVIL \':HEADPHONES:\');">HEADPHONES \':KISSED:\');">KISSED \':SICK:\');">SICK \':TIRED:\');">TIRED
\':STOP:\');">STOP \':KISSING:\');">KISSING \':ROSE:\');">ROSE \':THUMBS UP:\');">THUMBS UP \':DRINK:\');">DRINK \':IN LOVE:\');">IN LOVE \':BOMB:\');">BOMB
\':HELP:\');">HELP \':ROCK ON:\');">ROCK ON \':CONFUSED:\');">CONFUSED \':OK:\');">OK \':WASSUP:\');">WASSUP \':SORRY:\');">SORRY \':BRAVO:\');">BRAVO
\':ROFL:\');">ROFL \':PARDON:\');">PARDON \':NO:\');">NO \':CRAZY:\');">CRAZY \':DONT_KNOW:\');">DONT_KNOW \':DANCE:\');">DANCE \':YAHOO:\');">YAHOO
\':HI:\');">HI \':BYE:\');">BYE \':YES:\');">YES \':ACUTE:\');">ACUTE \':WALL:\');">WALL \':WRITE:\');">WRITE \':SCRATCH:\');">SCRATCH
'
;
editor.dialog.open('Смайлики', userForm);

а изображение кнопки можно взять из архива icons.zip

Вроде бы все:)

ВложениеРазмер
Иконка изображения smile_1.png31.8 КБ
Иконка пакета bueditor_buttons.zip2.05 КБ
Иконка пакета icons.zip15.38 КБ
Иконка пакета kolobok.zip187.89 КБ
0 Thanks

Комментарии

Аватар пользователя Atl Atl 15 марта 2009 в 3:23

А не появляется "Идем сюда admin/settings/smileys/import и напротив kolobok жмем Установить"

Аватар пользователя sashken sashken 15 марта 2009 в 9:22
Atl wrote:

А не появляется "Идем сюда admin/settings/smileys/import и напротив kolobok жмем Установить"

А вы распаковали вот так? "В эту папку sites/all/modules/smileys/packs распаковываем файл kolobok.zip"

Т.е. у вас здесь sites/all/modules/smileys/packs должна появиться папка kolobok

Аватар пользователя Geldora Geldora 15 марта 2009 в 16:00

У меня тоже не появляется "Идем сюда admin/settings/smileys/import и напротив kolobok жмем Установить"

Сравнением папок колобок и экзампл думаю, что не хватает файла .пак, в вашей папке какие-то файлы трумб и плист

Я скачала набор иконок Сабоним, у неё тоже есть файл .пак, сделайте его пож-ста

Аватар пользователя sashken sashken 15 марта 2009 в 17:22
Geldora wrote:

У меня тоже не появляется "Идем сюда admin/settings/smileys/import и напротив kolobok жмем Установить"

Сравнением папок колобок и экзампл думаю, что не хватает файла .пак, в вашей папке какие-то файлы трумб и плист...

Возможно это из-за того что у меня Друпал 6, а у вас скорее всего Друпал 5?

Аватар пользователя Geldora Geldora 15 марта 2009 в 17:30

Установила набор от Сабоним - Спасибо! - но продолжаю интересоваться набором смайликов Колобок (он более привычный :)

Так что перезалейте архив, пож-ста!

ПС. Добавьте в Книгу, пож-ста!

Аватар пользователя sashken sashken 15 марта 2009 в 22:32
Geldora wrote:

...
Так что перезалейте архив, пож-ста!
...

Перезалил архив (kolobok.zip) со смайлами и файлом .pak
Надеюсь сейчас все заработает:)

Аватар пользователя Dariel Dariel 22 марта 2009 в 2:47
"Atl" wrote:

А не появляется "Идем сюда admin/settings/smileys/import и напротив kolobok жмем Установить"

просто надо в модулях включить "Smileys Import"(управление-> конструкция сайта-> модули). И тогда все появиться :-)

Аватар пользователя Dariel Dariel 22 марта 2009 в 2:51

А еще хорошо бы в настройках "Smileys" убрать все галочки с "Smileys select-box settings"
Это избавит от стандартного меню в материалах.

Аватар пользователя alex M alex M 10 ноября 2015 в 11:46

Смайлики
Чё за хрень уже три часа долблюсь - что я упустил?
И по этой статье тоже делал которая на сабониме - не выходит =(

Аватар пользователя SteelRat SteelRat 10 июля 2009 в 1:27

Как видно по картинке, то у тебя ссылки битые. Вероятно у тебя модули стоят в папке /modules/, а кнопочки, которые выложили в этой теме ссылаются на папку модулей /sites/all/modules/. Ты в браузере в свойства этих картинок зайди и посмотри куда они ссылаются;)

Аватар пользователя Brun Brun 10 июля 2009 в 12:15

Сделал всё по инструкции. Drupal 6.13
Смайлики показываются, но не показываются в статье. Ни при предпросмотре, ни при буликацци.
Установлены модули: BUEditor, Smileys, BBCode

При сохраннии смайлов выбрасывает ошибку:
«An error occurred while requesting the server. Be sure that you have proper permission(s), and the server is responding properly.»

В чем может быть проблема?

Аватар пользователя Brun Brun 10 июля 2009 в 13:28

Решил.
В admin/settings/filters/1 поставил птичку использовать BBCode и Smileys.

Думаю комуто точно будет полезно =)

Аватар пользователя Psixo Psixo 1 августа 2009 в 5:18

Мои настройки,попытался сделать коды смайлов наиболее близкими к QIPовским, проблема только со смайлом :'( он не вставляется из-за одинарной кавычки,экранирование не помогает. Кто знает как можно исправить проблему с экранированием кавычек?

js:
getSmile=function(txt) {
  editor.active.replaceSelection(txt,'end');
  editor.dialog.close();
}
var userForm = '<table><tr>';
userForm += '<td><a href="javascript:getSmile(\'O:-)\');"><img src="/sites/all/modules/smileys/packs/kolobki/aa.gif" alt="ANGEL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':-)\');"><img src="/sites/all/modules/smileys/packs/kolobki/ab.gif" alt="HAPPY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':(\');"><img src="/sites/all/modules/smileys/packs/kolobki/ac.gif" alt="SAD" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\';-)\');"><img src="/sites/all/modules/smileys/packs/kolobki/ad.gif" alt="WINKING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':-P\');"><img src="/sites/all/modules/smileys/packs/kolobki/ae.gif" alt="TONGUE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\'8-)\');"><img src="/sites/all/modules/smileys/packs/kolobki/af.gif" alt="COOL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':-D\');"><img src="/sites/all/modules/smileys/packs/kolobki/ag.gif" alt="LAUGHING" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':-[\');"><img src="/sites/all/modules/smileys/packs/kolobki/ah.gif" alt="EMBARASSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\'O_O\');"><img src="/sites/all/modules/smileys/packs/kolobki/ai.gif" alt="SHOCKED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\'^.^\');"><img src="/sites/all/modules/smileys/packs/kolobki/aj.gif" alt="KISS" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CRY:\');"><img src="/sites/all/modules/smileys/packs/kolobki/ak.gif" alt="CRYING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':-X\');"><img src="/sites/all/modules/smileys/packs/kolobki/al.gif" alt="SILENT" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':-@\');"><img src="/sites/all/modules/smileys/packs/kolobki/am.gif" alt="ANGRY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':-|\');"><img src="/sites/all/modules/smileys/packs/kolobki/an.gif" alt="DONT_UNDERSTAND" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':-/\');"><img src="/sites/all/modules/smileys/packs/kolobki/ao.gif" alt="PENSIVE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':JOKINGLY:\');"><img src="/sites/all/modules/smileys/packs/kolobki/ap.gif" alt="JOKINGLY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DIABLO:\');"><img src="/sites/all/modules/smileys/packs/kolobki/aq.gif" alt="DEVIL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\'[:-}\');"><img src="/sites/all/modules/smileys/packs/kolobki/ar.gif" alt="HEADPHONES" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISSED:\');"><img src="/sites/all/modules/smileys/packs/kolobki/as.gif" alt="KISSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':-!\');"><img src="/sites/all/modules/smileys/packs/kolobki/at.gif" alt="SICK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':TIRED:\');"><img src="/sites/all/modules/smileys/packs/kolobki/au.gif" alt="TIRED" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':STOP:\');"><img src="/sites/all/modules/smileys/packs/kolobki/av.gif" alt="STOP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISSING:\');"><img src="/sites/all/modules/smileys/packs/kolobki/aw.gif" alt="KISSING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\'@}-:--\');"><img src="/sites/all/modules/smileys/packs/kolobki/ax.gif" alt="ROSE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':THUMBS UP:\');"><img src="/sites/all/modules/smileys/packs/kolobki/ay.gif" alt="THUMBS UP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DRINK:\');"><img src="/sites/all/modules/smileys/packs/kolobki/az.gif" alt="DRINK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':IN LOVE:\');"><img src="/sites/all/modules/smileys/packs/kolobki/ba.gif" alt="IN LOVE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\'@=\');"><img src="/sites/all/modules/smileys/packs/kolobki/bb.gif" alt="BOMB" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':HELP:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bc.gif" alt="HELP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ROCK_ON:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bd.gif" alt="ROCK ON" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\'%)\');"><img src="/sites/all/modules/smileys/packs/kolobki/be.gif" alt="CONFUSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':OK:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bf.gif" alt="OK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WASSUP:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bg.gif" alt="WASSUP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SORRY:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bh.gif" alt="SORRY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BRAVO:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bi.gif" alt="BRAVO" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':ROFL:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bj.gif" alt="ROFL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':PARDON:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bk.gif" alt="PARDON" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':NO:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bl.gif" alt="NO" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CRAZY:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bm.gif" alt="CRAZY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DONT_KNOW:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bn.gif" alt="DONT_KNOW" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DANCE:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bo.gif" alt="DANCE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':YAHOO:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bp.gif" alt="YAHOO" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':HI:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bq.gif" alt="HI" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BYE:\');"><img src="/sites/all/modules/smileys/packs/kolobki/br.gif" alt="BYE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':YES:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bs.gif" alt="YES" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ACUTE:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bt.gif" alt="ACUTE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WALL:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bu.gif" alt="WALL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WRITE:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bv.gif" alt="WRITE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SCRATCH:\');"><img src="/sites/all/modules/smileys/packs/kolobki/bw.gif" alt="SCRATCH" /></a></td>';
userForm += '</tr></table>';
editor.dialog.open('Смайлики', userForm);
Аватар пользователя Atomix Atomix 3 октября 2009 в 2:34

Да, дублируются, всё из-за пробелов в акронимах, надо их заменить например на "_" (нижнее подчеркивание) и внести соответствующие изменения в BUEditor.

Аватар пользователя ShadOR ShadOR 19 октября 2009 в 17:15

Не обязательно кидать смайлики в : /sites/all/modules/smileys/packs.

Я положил туда где у меня и все остальные модули, в: /modules/smileys/packs - и все прекрасно работает, главное не провтыкать ссылки поправить везде)

Аватар пользователя ikistol ikistol 22 октября 2009 в 22:13
"ShadOR" wrote:

Я положил туда где у меня и все остальные модули, в: /modules/smileys/packs

Правильная установка модулей и тем подразумевает их установку в папки sites/all/modules и sites/all/themes

Аватар пользователя ShadOR ShadOR 23 октября 2009 в 12:51
"ikistol" wrote:

Правильная установка модулей и тем подразумевает их установку в папки sites/all/modules и sites/all/themes

Классно)
Но я уверен, что я не один такой шланг)
И, кстати, можно тогда уж почитать про правильную? Лучше поздно, чем никогда.

Аватар пользователя ska1n ska1n 10 октября 2010 в 4:04

в архиве со смайлами присутствует файл .plist, не знаю, как поведет себя никсовая система (под рукой нет), а на винде этот макосовский файл вредит: на странице импорта смайлов появляется две строчки kolobok и обе не ставяца, ссылаясь на синтаксическую ошибку в plist.inc, лечица простым удалением этого файла из папки со смайлами.
зы: пасиба за колобков

Аватар пользователя Chupzzz Chupzzz 22 октября 2010 в 2:11

sashken, спасибо за проделанную работу и то что поделились трудом с нами.

НО: у вас указаны неверные инструкции по установке и прикручиванию всего этого к Bueditor, отсюда и множество комментариев с вопросами. Не буду голословным, разберу все по пунктам.

Первая неточность: папка импорта

Странно, что никто не задумался и не заикнулся о главном: в ядро Друпала и модулей лезть нельзя. Что вы и делаете, добавляя папку kolobok в подпапку sites/all/modules/smileys/packs (это папка модуля и писать туда свои файлы все равно что дописывать код модуля). Хотя даже на странице импорта смайлов явно говорится:
To import new Smileys, download smiley packs for phpBB or Adium and extract them in smileys folder under website's files directory.

А это значит, что папку kolobok надо распаковать в sites/default/files/smileys (или если у вас мульти-домен, то в соответствующую папку файлов нужного домена). После распаковки туда смайлики беспроблемно импортируются.

Вторая неточность: абсолютные пути в коде для bueditor

Указанный путь для отображения смайликов в Bueditor неверен, т.к. "абсолютно" ссылается на папку, где лежат смайлы. Даже если импортировать смайлы в подпапку модуля (что, конечно, неверно) то указанный путь /sites/all/modules/smileys/packs/kolobok/ неверен в случае установки модуля в нестандартном месте (хотя бы по причине мультидоменности). Я предлагаю дать разработчику возможность указать явно и в одном месте папку, где лежат файлы смайликов.

В представленном мной коде для кнопки Bueditor путь к смайлам вынесен в переменную imgDir:

js:
getSmile=function(txt) {
  editor.active.replaceSelection(txt,'end');
  editor.dialog.close();
}
var imgDir = '/sites/default/files/smileys/kolobok/';
var userForm = '<table class="smiles-tab"><tr>';
userForm += '<td><a href="javascript:getSmile(\':ANGEL:\');"><img src="' + imgDir + 'aa.gif" alt="ANGEL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':HAPPY:\');"><img src="' + imgDir + 'ab.gif" alt="HAPPY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SAD:\');"><img src="' + imgDir + 'ac.gif" alt="SAD" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WINKING:\');"><img src="' + imgDir + 'ad.gif" alt="WINKING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':TONGUE:\');"><img src="' + imgDir + 'ae.gif" alt="TONGUE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':COOL:\');"><img src="' + imgDir + 'af.gif" alt="COOL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':LAUGHING:\');"><img src="' + imgDir + 'ag.gif" alt="LAUGHING" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':EMBARASSED:\');"><img src="' + imgDir + 'ah.gif" alt="EMBARASSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SHOCKED:\');"><img src="' + imgDir + 'ai.gif" alt="SHOCKED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISS:\');"><img src="' + imgDir + 'aj.gif" alt="KISS" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CRYING:\');"><img src="' + imgDir + 'ak.gif" alt="CRYING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SILENT:\');"><img src="' + imgDir + 'al.gif" alt="SILENT" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ANGRY:\');"><img src="' + imgDir + 'am.gif" alt="ANGRY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DONT_UNDERSTAND:\');"><img src="' + imgDir + 'an.gif" alt="DONT_UNDERSTAND" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':PENSIVE:\');"><img src="' + imgDir + 'ao.gif" alt="PENSIVE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':JOKINGLY:\');"><img src="' + imgDir + 'ap.gif" alt="JOKINGLY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DEVIL:\');"><img src="' + imgDir + 'aq.gif" alt="DEVIL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':HEADPHONES:\');"><img src="' + imgDir + 'ar.gif" alt="HEADPHONES" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISSED:\');"><img src="' + imgDir + 'as.gif" alt="KISSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SICK:\');"><img src="' + imgDir + 'at.gif" alt="SICK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':TIRED:\');"><img src="' + imgDir + 'au.gif" alt="TIRED" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':STOP:\');"><img src="' + imgDir + 'av.gif" alt="STOP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISSING:\');"><img src="' + imgDir + 'aw.gif" alt="KISSING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ROSE:\');"><img src="' + imgDir + 'ax.gif" alt="ROSE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':THUMBS UP:\');"><img src="' + imgDir + 'ay.gif" alt="THUMBS UP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DRINK:\');"><img src="' + imgDir + 'az.gif" alt="DRINK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':IN LOVE:\');"><img src="' + imgDir + 'ba.gif" alt="IN LOVE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BOMB:\');"><img src="' + imgDir + 'bb.gif" alt="BOMB" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':HELP:\');"><img src="' + imgDir + 'bc.gif" alt="HELP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ROCK ON:\');"><img src="' + imgDir + 'bd.gif" alt="ROCK ON" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CONFUSED:\');"><img src="' + imgDir + 'be.gif" alt="CONFUSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':OK:\');"><img src="' + imgDir + 'bf.gif" alt="OK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WASSUP:\');"><img src="' + imgDir + 'bg.gif" alt="WASSUP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SORRY:\');"><img src="' + imgDir + 'bh.gif" alt="SORRY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BRAVO:\');"><img src="' + imgDir + 'bi.gif" alt="BRAVO" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':ROFL:\');"><img src="' + imgDir + 'bj.gif" alt="ROFL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':PARDON:\');"><img src="' + imgDir + 'bk.gif" alt="PARDON" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':NO:\');"><img src="' + imgDir + 'bl.gif" alt="NO" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CRAZY:\');"><img src="' + imgDir + 'bm.gif" alt="CRAZY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DONT_KNOW:\');"><img src="' + imgDir + 'bn.gif" alt="DONT_KNOW" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DANCE:\');"><img src="' + imgDir + 'bo.gif" alt="DANCE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':YAHOO:\');"><img src="' + imgDir + 'bp.gif" alt="YAHOO" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':HI:\');"><img src="' + imgDir + 'bq.gif" alt="HI" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BYE:\');"><img src="' + imgDir + 'br.gif" alt="BYE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':YES:\');"><img src="' + imgDir + 'bs.gif" alt="YES" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ACUTE:\');"><img src="' + imgDir + 'bt.gif" alt="ACUTE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WALL:\');"><img src="' + imgDir + 'bu.gif" alt="WALL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WRITE:\');"><img src="' + imgDir + 'bv.gif" alt="WRITE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SCRATCH:\');"><img src="' + imgDir + 'bw.gif" alt="SCRATCH" /></a></td>';
userForm += '</tr></table>';

userForm += '<style>.smiles-tab td {width: 50px;text-align: center;}</style>';

editor.dialog.open('Смайлики', userForm);

БОНУС: ровная сетка выбора смайликов

После этого все работает отлично, но бросается в глаза хаотичный порядок, в котором выстраиваются смайлики при выборе. Это происходит из-за разной ширины картинок смайликов и выравнивания по левому краю ячейки. Предложенный мной код учитывает и исправляет этот недостаток путем добавления родительской таблице класса smiles-tab и прописания инлайновых стилей для дочерних ячеек. Теперь ряды смайликов становятся ровными и глаза не разбегаются при их выборе :)

В остальном sashken предложил отличное решение. Спасибо ему за это!

Аватар пользователя kpv_dnepr@drupal.org kpv_dnepr@drupal.org 10 ноября 2015 в 11:47

У меня все отлично стало за исключением иконок

не скажете что это такое?

P.S. Криво создался sprites!!! А кто его создает?