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.

Применение:

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

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

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

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

ответить

Алексвс, 16/12/2012 - 19:20

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

ответить

Dematronвс, 16/12/2012 - 20:03

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

ответить

Алексвс, 16/12/2012 - 20:17

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

.splCont {

display: none;

border: 1px solid #cccccc;

padding: 3px 5px;

}

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

ответить

Палавойвс, 30/12/2012 - 20:34

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

ответить

Палавойвт, 15/01/2013 - 21:11

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

ответить

Dematronср, 16/01/2013 - 18:11

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

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

ответить

Dematronср, 16/01/2013 - 18:47

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

ответить

Ля-Ля-Фаср, 08/05/2013 - 11:55

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

ответить

Dematronср, 08/05/2013 - 22:20

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