Набор кнопок для редактора BUEditor со смайлами

По просьбе читателя моего блога Олега я претворяю в жизнь свой давнишний план поделиться набором кнопок для редактора BUEditor с данного блога. В нем есть кнопка со смайлами, которые я находила сама, поэтому процесс немного осложнен, но и его можно осилить.

Хочу заметить, что способ вставлять смайлики кнопкой редактора не я придумала, поэтому не забудем указать ссылку на источник, который я редактировала под себя. У этого набора почти все кнопки сделаны с учетом того, что стоит модуль BBcode. Так как у меня его нет, мой набор работает и без этого модуля.

Итак, последовательность действий для Drupal 5.* (для Drupal6 не делала, поэтому не скажу, работает ли):

  1. Скачать и включить 2 модуля: bueditor и smileys (Smileys Import тоже включить).
  2. Скачать файл в приложении к этой записи.
  3. Распаковать Zip-архив. Вы увидите две папки: Smileys и BUEditor.
  4. В первой папке (Smileys) скопируйте папку my в директорию для наборов смайлов модуля smyleys: /sites/all/modules/smyleys/packs/.
    • Зайдите в Админка → Настройки → Смайлы и выберите вкладку Импорт, вы должны увидеть новый набор my и рядом ссылку "установить".
    • После того, как вы нажмете ее, нужно будет удалить example набор, при этом он никуда не денется, смайлики будут по-прежнему в папке packs, просто на сайте они не будут использоваться. Так что не бойтесь их удалять, вы всегда сможете вернуть все на место на этой же вкладке Импорт.
    • Далее идите на вкладку Настройки и уберите там везде флажки (по умолчанию их и нет). У нас будут смайлы только в bueditor, другие места не нужны.
  5. Потом фильтр смайлов нужно включить. Это делается на странице настроек форматов ввода /admin/settings/filters. Выберите формат и нажмите изменить. Отметьте фильтр смайлов флажком.
  6. Во второй папке (BUEditor) лежат 2 файла и набор иконок. СНАЧАЛА скопируйте папку icons (в ней есть уже папка со смайлами) в директорию модуля bueditor. Она должна быть обязательно такой: /sites/all/modules/bueditor/, иначе не будет работать. Если вы не хотите отказываться от своих иконок для bueditor, или используете старые для чего-то еще, то просто содержимое моей папки icons поместите в icons из модуля. Названия тех иконок, которые в bueditor есть по умолчанию, остались такими же и в моей поставке, а остальные изменены, поэтому если вам скажет компьютер, что файлы с таким именем уже существуют, то не обращайте внимание и выберите либо пропустить, либо заменить. Ничего не потеряется.
  7. Далее нужно создать новый редактор. Пройдите Админка → Настройка → BUEditor и создайте новый набор.
  8. Импортируйте из скаченной папки BUEditor тот набор, который вы хотите, и нажмите Сохранить. Full означает полный набор кнопок, который выглядит так:
    Скриншот полного набора кнопок для редактора Bueditor

    а Light - набор, которым могут пользоваться посетители моего сайта, отправляя комментарий (можно посмотреть вживую в низу страницы)

  9. В Full версии есть кнопки выравнивания текста по левому, правому краю, по центру и растяжения по ширине, и, чтобы они работали, нужно добавить в CSS файл вашей темы такие стили:
    .editor-right-button{text-align:right;}
    .editor-left-button{text-align:left;}
    .editor-center-button{text-align:center;}
    .editor-justify-button{text-align:justify;}
  10. Не забудьте дописать допустимые теги для ваших форматов ввода Админка → Настройка → Форматы ввода на вкладке Настроить, ведь их наличие в редакторе не означает, что они отобразятся в вашей записи. Например, для выравнивания текста нужно разрешить тег <div> (Если в формате не включен Фильтр HTML, то все теги позволяются).
  11. Еще раз повторюсь, что кнопки сделаны на основе предложенных cwer, поэтому кнопка цитирования (которая кстати работает только с модулем QUOTE → не забудьте включить его фильтр в форматах ввода) с картинкой не работает в Opera и если вы хотите сделать ее работоспособной в этом браузере, то в настройках вашего набора кнопок уберите в выпадающем списке у этой кнопки картинку и впишите в текстовое поле под этим списком любое слово, которым хотите обозначить эту кнопку.

    Эта замечательная кнопка оборачивает в теги [quote] любой выделенный на странице текст.

Примечание: Помните, что здесь у кнопки "Вставить изображение" нет возможности загрузки. Только поставив модуль IMCE, можно включить загрузку картинок при нажатии на Обзор.... Для того, чтобы работало с моим набором, отредактируйте содержимое этой кнопки, опираясь на этот код.

После того, как я проделала описанные мной выше операции, я (во-первых, ощутила кайф: как здорово делать по инструкции - не боишься ничего забыть и все получается) наткнулась на то обстоятельство, что модуль позволяет только 20 кнопок в ряд, что делает набор full не эстетичным. От проблемы можно уйти, закомментировав 105 строчку файла bueditor.js в папке bueditor. А если вам нужно поставить перенос строки в другом месте, то этот код поможет решить эту проблему.

Вот так выглядит процесс установки редактора Bueditor для моего сайта. Если для вас оказались лишними какие-то кнопки из наборов, удаляйте их и помните - чем больше неопытному пользователю дать кнопок, тем быстрее он в них запутается. Подмигивающий

Прикрепленный файлРазмер
bueditor_knopki_so_smailami_ot_SaBoNim.zip172.32 кб
mauz

Спасибо за решение, я как-то искал выход, но не нашел.

Jack

cпасибо. а для 6-ой версии есть решение?

Гость

при закачке bueditor_кнопки_со_смайлами_от_Sa_Bo_Nim.zip - качалка говорит что файл удален. Немогли бы поновить его? Спасибо.

sa_bo_nim

Наконец нашла его на своем компьютере. При переезде на новый хостинг архив с кириллицей в названии повредился и не копировался. Спасибо что заметили! Можете пользоваться Цветочек

Hitman

Спасибо, поставил на шестую версию, почти всё работает.
Не работает только вставка ссылки и превью, но это решается простой заменой кода кнопки из редактора по умолчанию.

Гость

классная статья! спасибо!

Николай

Может кому пригодится... Drupal 6.13
Делал все по инструкции, но при нажатии на иконку со смайликами выскакивает popup с пустыми квадратиками вместо смайлов... так как я в скриптах не силен - погуглил немного и нашел иное решение

php:
$L = drupal_to_js(_smileys_list());
$P = base_path();
drupal_add_js("
var smlyList = $L, smlyPath = '$P';
var smlyWrap = \$('<div style=\"width:200px\"></div>');
\$.each(smlyList, function(i, s) {\$('<a href=\"#\" title=\"'+ s.description +'\"><img src=\"$P'+ s.image +'\" alt=\" '+ s.acronyms.split(' ')[0] +' \" /></a>').css('margin', '0.5em').appendTo(smlyWrap)});
", 'inline');
return 'js:
editor.dialog.open("Smileys");
$("tr.body>td", editor.dialog.popup).empty().append(smlyWrap);
$("a", smlyWrap).each(function(){this.onclick=function(){editor.dialog.close();editor.active.replaceSelection(this.firstChild.alt, "end"); return false;};});';

Источник - http://youweb.ru/node/105

Заменил код кнопки на этот и все заработало)))
Скрипт берет смайлики прямо из модуля Smiyles

Спасибо за статью) Мне, чайнику, она пришлась как раз кстати)
Теперь любуюсь на смайлики и вспоминаю автора Цветочек

RemaGe

Спасибо, многое заюзал-)

а не проще вместо вставки доп. стилей сразу проставлять выравнивание как

<div style="text-align:left;">%TEXT%</div>
sa_bo_nim

Сейчас такое время, когда все стараются полностью, насколько это возможно, отделить визуальное оформление (с помощью CSS) от контента. Поэтому писать стили непосредственно в тексте считается неприемлемым.

RemaGe

Я думаю это немного не тот случай) Да и проще так Показывающий язык

musicd

а как на счет добавления других смайлов а не смайлов автора? Каким образом это можно сделать?

sa_bo_nim

Вы можете воспользоваться другим набором, например, отсюда - http://forum.drupal.ru/node/26203.
А вообще, идея в том, что пути к смайлам прописаны в коде кнопки и в файле вручную. Поэтому либо вам нужно заменить картинки для смайлов непосредственно в папке со смайлами, либо изменять код.

musicd

Я уже понял что нужно прописывать для каждого отдельно, заглянув в ваш файл.
От сюда голова начала работать. есть идея которую по моему легко для програмиста привести в жизнь.
Названия смайлов вещь в принципе не нужная. Можно написать програмку, в которую ты загружаешь какие угодно картинки смайлов жмешь "Вперед!" и она тебе на выходе дает готовый файл с кнопками.
Тогда точно не будет никакой зависимости от определенного вида смайлов.

sa_bo_nim

Если вы напишите такой скрипт и поделитесь им со всеми, будет здорово!

musicd

к сожалению, или к радости я не программист. у меня другая специальность...
Я только поделился идеей.

Пейнтболист

Как вовремя попалась эта статейка, теперь не придется изобретать велосипед, спасибо Подмигивающий

JustLike

Обновлённый код работает с новой версией Bueditor 6.x-2.0-beta1

php:
$L = drupal_to_js(_smileys_list());
$P = base_path();
drupal_add_js("(function($){
var click = function() {
  BUE.active.replaceSelection(this.firstChild.alt, 'end');
  return false;
};
var map = function(s) {
return $('<a href=\"#\" title=\"'+ s.description +'\"><img src=\"$P'+ s.image +'\" alt=\" '+ s.acronyms.split(' ')[0] +' \" /></a>').css('margin', '0.5em').click(click)[0];
};
var links = $.map($L, map);
BUE.smlyWrap = function() {
  return $('<div style=\"width:200px\"></div>').append(links);
};
})(jQuery);", 'inline');
return 'js: E.quickPop.open(BUE.smlyWrap());';

Источник: http://youweb.ru/node/106

Гость

Не появляются иконки, когда пытается дать комментарий зарегистрированный пользователь, я ему включил все разрешения и все равно иконок нет. Почему?
Заранее благодарен за ответ.

Sergey1

BuEditor - прекрасная вещь для тех кто понимает, что означают символы в значках <>. Однако, многих это просто пугает. Поэтому, пекрасным выбором под drupal будет редактор FCKEditor.

MaX0s

Когда начинаю делать новый сайт, то по настроению ставлю либо BUEditor, либо FCKEditor. И там и там есть много плюсов, а минусы - это плюсы в противоположном модуле, а точнее их отсутствие в этом. Вот кнопочка, которая делает из простого изображения изображение с эффектом HighSlide (с наличием пакета скриптов такогого)

js:
var reg = /src="(.*)"/ ;
var code = editor.active.getSelection();
var arr = reg.exec(code)
if (arr) {
        var ahref1 = '<a href="';
        var ahref2 = '.jpg" class="highslide" onclick="return hs.expand(this)">';
        var ahref3 = '</a>';
        var result = arr[1].replace("_thumb", "")
        editor.active.replaceSelection(ahref1 + result + ahref2 + code + ahref3);
}

З.Ы.
не модуль HighSlide, а именно набор скриптов скачанных с офф-сайта HighSlide - http://highslide.com/

инфа от сюда - http://www.drupalka.ru/node/62

Никита

sa_bo_nim , спасибо за статью! Жаль что она очень давно написана, и мне помогла лишь отчасти. Сам долго мучился пока настроил эти смайлики. Вот, я написал обновленную версию руководства, со скриншотами, надеюсь оно кому-нибудь облегчит жизнь: http://nikita-petrov.com/drupal/qip-smayliki-v-drupal-cherez-modul-smiles-i-knopka-dlya-nih-v-bueditor

sa_bo_nim

Никита, пожалуйста! Очень здорово, что вы сделали такой набор кнопок и выложили для всех. Спасибо!

Denis

Кнопки классные поставлю на свой сайт