Для корректного отображения сайта вам необходима поддержка Javascript и Cookies.

jQuery cпойлер для Drupal 7 + CKEditor 3.x

Опубликовал Dematron в ср, 05/10/2011 - 21:20

Обновлено в вт, 30/10/2012 - 22:04

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

Перед тем как получить то что хотелось, перепробовал несколько модулей для Drupal и парочку плагинов для CKEditor (а именно в этом редакторе я предпочитаю работать), но ничего не нравилось. Модули либо были слишком громоздкие, либо не находилась интеграция в CKEditor в виде кнопки, либо код, в который оборачивался спойлер оказывался на столько объемным, что просмотр «Источника» в редакторе приводил просто в ужас. Ряд модулей для Drupal и отдельных плагинов для CKEditor, генерировали исключительно отвратительного вида спойлеры, и использовать их у себя в блоге я просто не захотел.

После всех поисков была поставлена нетривиальная задача:

  • найти простую и элегантную реализацию спойлера
  • интегрировать ее в CKEditor в виде кнопки, которая каким-то образом прятала бы нужный нам текст под спойлер

Путем сложения и вычитания было найдено следующее решение.

За основу была взята эта реализация спойлера. Выглядит красиво и элегантно, что и требовалось. Оставалось только прикрутить это творение к CKEditor.

Поиск выдал несколько вариантов, но выбран был этот.

Выбор был сделан в ползу этого решение по нескольким простым причинам:

  • плагин без проблем подцеплялся через модуль CKEditor,
  • корректно работал с редактором версии 3.6.2 (на данный момент последняя версия)
  • по нажатию кнопки на панели CKEditor вызывалось окошко, где можно было вводить заголовок спойлера и текст под спойлером.

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

Теперь мы имеем вариант, который:

  • прост как все гениальное
  • может быть использован без лишних манипуляций  в CKEditor
  • выглядит достаточно красиво, но без всяких там ненужных «рюшечек» и т.п.

Вот собственно сам

спойлер
а вот что он за собой скрывает

В этом файле найдутся все исходники spl.tar.gz

p.s. Пользуюсь преимущственно Linux, посему и формать архива такой, нужно будит кому в *.zip, отпишите, добавлю.

UPD: В связи с изменениями в модуле CKEditor, для удобства активации спойлера я написал простенький модуль ckeditor_spoiler.

Применение:

  1. Копируем папку с модулем туда же куда и все модули.
  2. Активируем модули CKEditor и ckeditor_spoiler.
  3. В настройках CKEditor в нужном профиле (например Full) в блоке EDITOR APPEARANCE находим кнопки.
  4. Перетаскиваем кнопку Spoiler (четвертая строка в All buttons "синий квадратик с текстом") туда куда нам нужно в Used buttons.
  5. Отмечаем галочкой - Plugin for inserting text under spoiler (buttons: Spoiler).
  6. Сохраняем профиль.
  7. Очищаем все кэши.
  8. Теперь во всех случаях когда используется профиль Full будит отображаться кнопка спойлер.

TODO: Сделать так, чтобы при наведение на спойлер появлялась подсказка, типа "Нажмите чтобы развернуть". Где-то попадалось решение на базе CSS3...

Комментарии

Аватар пользователя Барабашка Артурик

Вот за это огромное спасибо

Аватар пользователя Dematron

Пожалуйста smiley Заодно сам в памяти восстановил и до ума довел.

Аватар пользователя Leslie

Хорошее описание, спасибо! А когда TODO будет? В смысле, чтобы при наведении высвечивалось "тыкните именно сюда, чтобы открыть" : )

Аватар пользователя Dematron

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

Аватар пользователя Алекс

Dematron спасибо за хорошую инструкцию и за модуль ckeditor_spoiler. Но вот не задача, спойлер изначально открыт, возможно где то можно настроить что бы он был закрытым, или это у меня какой то баг?

Аватар пользователя Dematron

Это скорее на Вашей стороне что-то. У себя такое несколько раз во время тестирования замечал, возникало если js файл спойлера не подтягивался. Проверьте в Firefox'е через Firebug все ли файлы с сайта подтягиваются при загрузке страницы. Попробую еще потестировать, может что-то выявится.

Аватар пользователя Алекс

Разобрался
почему то друпал не видит что в файле spoiler.css, скопировал из него

.splCont {

  display: none;

  border: 1px solid #cccccc;

  padding: 3px 5px;

}

и вставил в style.css своей темы. Все заработало

Аватар пользователя Палавой

Спасибо Алекс у меня то же самое было.

Аватар пользователя Палавой

А как вставить кнопку для такого спойлера или хотябы название спойлера по центру сделать?

Аватар пользователя Dematron

На том функционале что есть скорее всего ни то ни то не получится. По крайней мере я только что попробовал простыми методами и ничего не вышло.

Данный вариант спойлера подбирался исходя из минимализма. На drupal.org есть много модулей спойлеров возможно какой-то из них Вам подойдет больше. Возможно этот http://drupal.org/project/collapse_text

Аватар пользователя Dematron

Обновил модуль. Хотя у меня и до этого нормально все отображалось, постарался скорректировать так чтобы css файл более корректно подтягивался. Кому не лениво потестите.

Аватар пользователя Ля-Ля-Фа

Почти бесполезный спойлер, т.к. может хранить в себе только текст...

Аватар пользователя Dematron

А других задач и не ставилось. Сможете расширить возможности, общественность будит вам благодарна smiley Хотя попробовал засунут картинку, нормально засунулась только рамка по контуру не растягивается, а так вполне нормально

Добавить комментарий