Для корректного отображения сайта вам необходима поддержка 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...

Комментарии

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

Приобрести диплом о высшем образовании!
Мы изготавливаем дипломы любой профессии по приятным тарифам. Вы заказываете диплом в надежной и проверенной временем компании. : raidan.in/получите-диплом-своей-мечты-СѓР¶Рµ-сегод

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

Наша компания предлагает выгодно приобрести диплом, который выполнен на бланке ГОЗНАКа и заверен мокрыми печатями, штампами, подписями. Наш документ способен пройти любые проверки, даже с применением профессиональных приборов. fanoosalinarah.com/textstat/kupit-diplom-bystro-i-nadezhno-luchshie-19-3

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

лечение запоя смоленск
vivod-iz-zapoya-smolensk002.ru
экстренный вывод из запоя

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

Robert AI
Robert AI

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

вывод из запоя цена
vivod-iz-zapoya-smolensk003.ru
вывод из запоя

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

Заказать документ института вы сможете в нашем сервисе. Заказать диплом института по доступной стоимости возможно, обращаясь к проверенной специализированной компании. amedaychats.com/read-blog/4024_kupit-attestat-za-9-klassov.html

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

Коли я вперше побачив PJ Katty на сцені, я зрозумів, чому її шоу називають унікальними. Її танці додають музиці нового виміру, а кожен трек звучить як історія. У момент, коли весь зал почав рухатися в одному ритмі з нею, я зрозумів, що це справжня магія. Дізнайся більше про її шоу тут.

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

Name That Term
Other Ways to Say Thank You for Your Generosity

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

Кракен ссылка : сайт, зеркало, вход https://kraken-mirror-sait.com

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

вывод из запоя тула
vivod-iz-zapoya-tula001.ru
экстренный вывод из запоя

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

Диплом любого ВУЗа России!
Без наличия диплома трудно было продвигаться по карьере. Купить диплом под заказ в столице возможно через официальный портал компании: quality-lab.net/employer/premialnie-diplom-24

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

Гидроизоляция объектов usileniekonstrukcij1.ru .

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

Заказать диплом можно через сайт компании. orikdok-3v-gorode-kazan-16.online

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

вывод из запоя
vivod-iz-zapoya-tula002.ru
вывод из запоя круглосуточно

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

Приобрести диплом ВУЗа по выгодной цене можно, обращаясь к надежной специализированной фирме. Заказать документ о получении высшего образования можно в нашем сервисе. orikdok-5v-gorode-cheboksary-21.online

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

Цена: 950 рублей / час https://autoslana.ru/nash-autopark/mikroavtobusy/mikroavtobusy-na-19-che...

Класс: Школьный https://autoslana.ru/uslugi/transfer-v-ajeroport-i-vokzal/king-long/

Наша транспортная компания – это не просто очередной представитель сферы автомобильных перевозок пассажиров https://autoslana.ru/blog/kakie-pravila-perevozki-detej-v-avtobuse/
Мы верный помощник в любых ситуациях!
Цена: 7000 рублей / час https://autoslana.ru/otzyvy/

Пассажирские перевозки в Москве https://autoslana.ru/uslugi/korporativnye-zakazy/?str=2

Цена: 900 рублей / час https://autoslana.ru/uslugi/perevozki-sotrudnikov/jutong-3/

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

Адрес электронной почты защищен от спам-ботов https://nblift.ru/product/samohodnye-shtabelery-pse10l-c-3500
Для просмотра адреса в вашем браузере должен быть включен Javascript https://nblift.ru/product/gidravlicheskie-telezhki-hp-esr20-l

Солнечногорск https://nblift.ru/product/samokhodnye-shtabelery-ps13-rm30-plus

Умение находить решение в нестандартных ситуациях https://nblift.ru/product/elektropogruzchiki-fe4p30q

Артикул: 188557 Страна происхождения: Финляндия Цена по запросу https://nblift.ru/podborshchiki-zakazov

Компания «Грузовая механика» - надежный производитель и поставщик грузоподъемного оборудования и складской техники https://nblift.ru/product/samokhodnye-telezhki-pte15n
Работает на федеральном уровне, имея 9 филиалов по России: Москва, Санкт-Петербург, Екатеринбург, Ростов-на-Дону, Нижний Новгород https://nblift.ru/product/polomoechnye-mashiny-nr1060

Мебельный маркетплейс - это великолепная площадка, где люди могут находить и приобретать широкий ассортимент мебели для своего дома, офиса или других пространств https://nblift.ru/product/samohodnye-shtabelery-ps13rm16plus
Уникальность мебельных маркетплейсов заключается в их способности предоставлять богатый https://nblift.ru/product/shtabelery-s-elektropodemom-esfh1016

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

Платья оптом https://norsy.ru/otzyvy

Какая минимальная партия на пошив одежды?
Внесите этот номер в адресную книгу своего телефона:
Если вы ищете пошив одежды оптом, то наш Дизайнерский дом – именно то, что требуется https://norsy.ru/poshiv-hudi

Пошив одежды оптом ПО ИНДИВИДУАЛЬНОМУ ДИЗАЙНУ https://norsy.ru/o-nas

Наш основной швейный цех находится в Москве рядом с метро Бабушкинская https://norsy.ru/poshiv-hudi
Вы можете приехать к нам в любое рабочее время https://norsy.ru/voprosy-otvety
Для этого достаточно заранее договориться с нами о вашем визите https://norsy.ru/kontakty
Мы шьем как трикотажные, так и текстильные изделия https://norsy.ru/pochemu-my
Используем в работе самые разные материалы и фурнитуру https://norsy.ru/
Также шьем дизайнерскую одежду любой сложности: изысканные платья, сарафаны, костюмы, юбки, блузы, ветровки и многое другое!

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

от 10 дней https://www.perof.ru/portfolio/ofisnye-peregorodki/ofisnye-peregorodki-l...

Высота перегородки https://www.perof.ru/portfolio/ofisnye-peregorodki/ofisnye-peregorodki-l...

— Классические Mobile Standart — Лёгкие перегородки Mobile Light — Экраны на столы Mobile Screen https://www.perof.ru/articles/legkovozvodimye-peregorodki-dlya-ofisa/

Мобильная версия сайта https://www.perof.ru/catalog/ofisnye-peregorodki/karkasnye-ofisnye-pereg...

Компания Oki-Doki осуществляла возведение стационарных стеклянных перегородок в офисе международной электронной коммуникационной сети https://www.perof.ru/articles/ofisnaya-peregorodka-eto-roskosh-ili-neobk...

Предлагаем типовые и индивидуальные решения, разрабатываем на заказ перегородки по эксклюзивным проектам https://www.perof.ru/catalog/ofisnye-peregorodki/
Производство перегородок сертифицировано по стандарту ISO 9001:2015 https://www.perof.ru/catalog/ofisnye-peregorodki/diema-lux-shumoizolyats...

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

Комментарий Сломался холодильник https://zapchasti-remont.ru/shop/zajiganie/
Место нахождения: 30 км https://zapchasti-remont.ru/pages/about/
от города https://zapchasti-remont.ru/shop/elementyi_krepeja_rama_i_korpus/
Мастер Владимир Денисов перезвонил в день обращения, на следующий день приехал, несмотря на удаленность от города https://zapchasti-remont.ru/shop/katushki_zajiganiya_magneto_3/
Причина поломки-вентилятор в холодильном отделении https://zapchasti-remont.ru/shop/motornaya_chast/
Спустя 3 дня мастер приехал и произвел замену https://zapchasti-remont.ru/shop/detali_bloka_tsilindrov/
Итог: холодильник работает, лишних деталей, работы и услуг не навязано, ремонт выполнен качественно и оперативно https://zapchasti-remont.ru/shop/reduktoryi1/
Спасибо, Владимир https://zapchasti-remont.ru/shop/prokladki3/
Данного мастера рекомендую https://zapchasti-remont.ru/shop/dvigateli_i_zapchasti_k_nim/

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

Porn star engaged in a shootout with robbers and put them to flight https://x.com/MKids3447/status/1928357870908678202

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

Арка из воздушных шаров (желтый и черный).
Стоимость зависит от метража, сложности узора, монтажа и доставки https://zeelsharik.ru/catalog/product/shar-figura-oblako-rozovoe/

В стоимость включены трудоемкость, оригинальность и масштаб композиции, доставка https://zeelsharik.ru/rekvizity/
Кроме того, важен и срок годности гелиевых шариков — сколько они будут находится в воздухе https://zeelsharik.ru/catalog/product/shar-pastelnyy-35-sm-goluboy/
10—15 часов летают стандартные воздушные шары https://zeelsharik.ru/catalog/product/nabor-158-s-rusalochkoy/
Цена обработки специальным составом Hi-float, который продлевает летательные способности до 3 недель, относительно невысока https://zeelsharik.ru/catalog/product/shar-sfera-metallik-gold/
Однако гости, унесшие гелиевый шар домой, не разочаруются, увидев его лежащим на полу на следующее утро https://zeelsharik.ru/catalog/product/nabor-144-s-mashinkoy/
Они будут долго с улыбкой наблюдать за сувениром торжества, уткнувшимся в потолок комнаты https://zeelsharik.ru/catalog/product/shar-k-figura-sobaka-haski/

Что входит в комплект:цифра "7" (золото); 4 золотых звездочки (каждая на отдельном грузике); два одинаковых фонтана из шариков https://zeelsharik.ru/catalog/product/shar-pastel-zheltyy/
Состав каждого:5 шариков (золото), 5 шариков (черные), лента тассел золотая https://zeelsharik.ru/catalog/product/igrushka-spyashchiy-edinorog/

Оформление шарами https://zeelsharik.ru/catalog/product/shary-36sm-s-risunkom-zabavnyj-tra...

Воздушные шары - классическое украшение праздника https://zeelsharik.ru/catalog/product/shar-figura-delfin-s-babochkoy/

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

вывод из запоя цена
vivod-iz-zapoya-tula003.ru
вывод из запоя цена

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

Name That Term
Other Ways to Say “Thank You for Confirming”

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

1 win официальный регистрация 1 win официальный регистрация .

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

Заказать диплом любого ВУЗа!
Наша компания предлагаетвыгодно и быстро купить диплом, который выполняется на бланке ГОЗНАКа и заверен печатями, водяными знаками, подписями должностных лиц. Документ пройдет лубую проверку, даже с применением специальных приборов. Решайте свои задачи быстро и просто с нашей компанией- igehub.org/forums/forum/test-new-forum

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

лечение запоя владимир
vivod-iz-zapoya-vladimir002.ru
вывод из запоя круглосуточно владимир

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

1win bog‘lanish uz http://1win14008.ru .

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

Name That Term
Words for Wanting Something You Can't Have

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

Гидроизоляция объектов http://www.legostart.ru/kak-vosstanovit-nesuschuyu-sposobnost-konstruktsiy-iz-betona-i-kirpicha/ .

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

лечение запоя
vivod-iz-zapoya-vladimir003.ru
вывод из запоя

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

1win texnik yordam https://1win14007.ru .

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

Гидроизоляция материал Гидроизоляция материал .

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

вывод из запоя круглосуточно
vivod-iz-zapoya-cherepovec001.ru
вывод из запоя круглосуточно

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

Name That Term
Robert AI

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

Гидроизоляция инъектированием http://roofor.ru/stroytelstvo/gidroizolyaciya-zdaniy-i-sooruzheniy/ .

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

вывод из запоя
vivod-iz-zapoya-cherepovec002.ru
лечение запоя

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

1вин мобильное приложение уз https://www.1win14007.ru .

Страницы

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