ViJu
TinyMCE template плагин в Drupal
Очень часто возникает такая задачка, когда пользователям нужно дать возможность вставлять
некоторые готовые HTML сниппеты. Даже если пользователи знакомы с html - это довольно долго каждый раз писать HTML код вручную, тем более это неудобно при использовании WYSIWYG редактора,
такого как tinyMCE.
Для таких случаев в tinyMCE есть плагин templates (документация по нему тут http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template),
остается только подружить его с Drupal.
В качестве примера возьмем пожалуй самый распространенный вариант - вставка картинок с подписями,
с выравниванием по правой или по левой стороне содержания.
Модули
Модули, которые нужны:
http://drupal.org/project/wysiwyg
http://drupal.org/project/wysiwyg_template
Сам TinyMCE нужно будет скачать с сайта http://tinymce.moxiecode.com/download.php
инструкции по установке редакторов на странице настроек модуля wysiwyg
После включения модуля wysiwyg_template, в настройках tinyMCE (admin/settings/wysiwyg/profile)
в разделе Buttons and Plugins
появится кнопочка для вставки шаблонов - Insert templates,
ее нужно включить, чтобы шаблоны стали доступны пользователям.
Добавление шаблона
Вот так будет выглядеть наша разметка с картинкой и подписью
с выравниванием по правой стороне:
<p class="icaption_right">
<span class="tpl_image"><img src="/files/.....jpg"></span>
<strong>Подпись к картинке</strong>
</p>В css добавляем:
p.icaption_left { float:left; display:inline; margin:0 1em 0.15em 0; }
p.icaption_right { float:right; display:inline; margin:0 0 0.15em 1em; }
p.icaption_left img,
p.icaption_right img { padding:0; border:1px #888 solid; }
p.icaption_left b, p.icaption_left strong,
p.icaption_right b, p.icaption_right strong { display:block; overflow:hidden; margin-top:2px; padding:0.3em 0.5em; background:#eee; font-weight:normal; font-size:91.667%; }
.float_left { float:left; display:inline; margin-right:1em; margin-bottom:0.15em; }
.float_right { float:right; display:inline; margin-left:1em; margin-bottom:0.15em; }
.center { display:block; text-align:center; margin:0.5em auto; }
Теперь нужно написать сами шаблоны для tinyMCE.
В настройках модуля указываем названием и путь к файлу со списком шаблонов для tiny -
/admin/settings/wysiwyg_template.
В этом js файле (по умолчанию templates.js) пишем:
var tinyMCETemplateList = [
// Name, URL, Description
["Картинка (слева)", "sites/all/templates/imageleft.html", "Картинка с выравниванием по левой стороне"],
["Картинка (справа)", "sites/all/templates/imageright.html", "Картинка с выравниванием по правой стороне"]
]; Добавляем соответствующие html файлы:
sites/all/templates/imageleft.html
sites/all/templates/imageright.html
Для варианта с выравниванием по правой стороне (imageright.html):
<div class="mceTmpl">
<p class="icaption_right">
<span class="tpl_image"><img src="/sites/all/templates/snippet.jpg"/></span>
<b>Подпись к картинке</b>
</p>
</div>Выделение и замена
Для использования этих шаблонов удобнее всего сначала вставить картинку, используя соответствующую кнопку редактора tinyMCE, затем, выделив эту картинку, добавить шаблон.
Для этого в настройках модуля wysiwyg_template (/admin/settings/wysiwyg_template)
в поле Selected content classes нужно указать соответствующий класс,
в нашем случае tpl_image.
На момент написания поста эта настройка не интегрирована с самим модулем,
я только написала об этом разработчику -
измененный модуль тут вы найдете тут http://drupal.org/node/774792
UPDATE (июнь 2011):
Сейчас модуль http://drupal.org/project/wysiwyg_template позволяет добавлять шаблоны непосредственно в настройках модуля. Проверено на редакторе CK Editor, работает.
Подписи к картинке в lightbox
Для того, чтобы в окошке lightbox показывались подписи к картинке (при обработке фильтром image_resize)
их нужно добавить в аттрибут title тега img.
Так, например, в редакторе CKEditor соответствующее поле находится на вкладке Расширенные:
Здравствуйте Julia. Передо мной стоит другая задача. Как начинающему друпаллисту создать отдельную страницу на которой бы была размещена отдельная фотогалерея в виде превьюшек. Когда щёлкаешь по ним появляется полноразмерная картинка с надписью.
Добавлять картинки в фотогалерею буду только я, другие пользователи могут только их просматривать и комментировать.
Из довольно скудных сведений о Drupal я знаю, что для этих целей нужны два модуля Image и Lightbox2. Image собственно создаёт фотогалерею, а Lightbox2
отвечает за красивый JQUERI эффект, когда щёлкаешь по превьюшке и картинка красиво раскрывается.
Скачал с официального сайта drupal.org оба этих модуля. Установил, включил.
Но фотогалерея почему то не работает. В настройках Друпала появляется надпись что некоторые приложения работают неверно. К тому же во вновь открывшейся фотогалерее сначала появляется не превьюшка, а полноразмерная картинка.
Правда затем она уменьшается до размера превьюшки, если щёлкнуть по кнопке миниатюра. Мне же как Вы понимаете нужно совсем наоборот:-)
Помогите мне пожалуйста. Буду очень благодарен.
С уважением С.Кондулуков
Здравствуйте,
можно вобщем-то сделать и с этими модулями Image и Lightbox2, но лучше и проще без Image.
Вам понадобятся следующие модули включенные:
- CCK
- filefield http://drupal.org/project/filefield
- imagefield http://drupal.org/project/imagefield
- imagecache http://drupal.org/project/imagecache
- lightbox2
Создаете отдельный тип контента, в который добавляете поле типа file (image)
с возможностью загрузки несколько картинок.
С помощью Imagecache создаете пресет для превьшки нужного размера.
В настройках полей (/admin/content/node-type/[ваш тип контента]/display) выбираете созданный пресет.
Ну и вобщем-то всё.
Возможно захотите поправить внешний вид, чтобы превьюшки показывались не в столбик,
а мозаикой, тогда залезте в css и для нужного класса добавьте float:left ну и еще что-то в зависимости от вашей темы.
Спасибо за статью! Мне очень помогла она!
Отправить новый комментарий