Категория:
Опубликовано:

Смайлы в BUEditor

Смайлы

Добавляем кнопку вставки смайлов в BUEditor.

Помимо самого BUEditor'а нам понадобится модуль Smiley (не путать со Smileys!)

Установка стандартная, из папки sites/all/modules.

Включаем Smiley на странице модулей. При необходимости вносим настройки на странице admin/config/content/smiley

able.png

Обязательно включаем фильтр смайлов в настройках необходимых текстовых форматов (admin/config/content/formats)

button.png

Далее идем в настройки BUEditor'а (admin/config/content/bueditor), выбираем необходимый профиль и нажимаем напротив него "Правка".

Добавляем кнопку со следующим кодом:

php:
if (!module_exists('smiley')) return;
$L = json_encode(db_query('SELECT uri, acronyms, description FROM {smiley} WHERE status=1')->fetchAll());
$P = base_path() . variable_get('smiley_path', drupal_get_path('module', 'smiley') . '/packs') . '/';
drupal_add_js("(function($){
var click = function() {
  BUE.active.replaceSelection(this.firstChild.alt, 'end');
  return false;
};
var map = function(s) {
return $('<a href="#" title="'+ Drupal.checkPlain(s.description) +'"><img src="$P'+ escape(s.uri) +'" alt=" '+ Drupal.checkPlain(s.acronyms.split(' ')[0]) +' " /></a>').css('margin', '0.5em').click(click)[0];
};
BUE.smlyWrap = function() {
  if (!BUE.\$smlyWrap) {
    var links = $.map($L, map);
    BUE.\$smlyWrap = $('<div style="width:200px" class="bue-smiley-wrapper"></div>').append(links);
  }
  return BUE.\$smlyWrap.clone(true);
};
})(jQuery);", 'inline');
return 'js: E.quickPop.open(BUE.smlyWrap());';

И немного CSS в свою тему оформления (если необходимо добавлять смайлы при редактировании ноды, и для этого используется административная тема - нужно продублировать стиль и туда):

.bue-smiley-wrapper {
  width: 364px !important;
}
.bue-smiley-wrapper a {
  display: inline-block;
  margin: 2px !important;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ccc;
  background-color: #eee;
  text-decoration: none;
}
.bue-smiley-wrapper a:hover {
  background-color: #fff;
}
.bue-smiley-wrapper a:after {
  content: "|";
  visibility: hidden;
  letter-spacing: -1em;
}
.bue-smiley-wrapper a img {
  vertical-align: middle;
}
Собственно все. Вот что у меня получилось:
smiles bueditor

Теперь в BUEditor'е есть кнопочка со смайликами.

Теги: 
Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.
Добавить комментарий