четверг, 13 мая 2010 г.

Настройка стилей встроенного RTE редактора TYPO3

Если Вам захочется добавить свои (пользовательские) стили для дальнейшей работы с ними в RTE-редакторе, то сделать это довольно просто, т.к. TYPO3 замечательная и очень гибкая CMS-система.

Что это даёт? Это позволит нам форматировать целые блоки или фрагменты текста прямо в редакторе, а также задавать им специфические CSS-стили.

Без дополнительных настроек списки предустановленных стилей очень скудны:



Займемся расширением списков стилей.

1. Создадим CSS файл, который содержит наши дополнительные стили. Причем каждый стиль должен занимать только одну строку. Например:

/* Стили блоков */
.float_left { float: left; display:block; margin: 0; padding: 0;}
.float_right { float: right; display:block; margin: 0; padding: 0;}
.center { text-align:center; }
/* Стили текста */
.red_txt { color: red; font-size: 12px;}
.blue_bold_txt { color: blue; font-weight: bold;}


Назовем наш файл стилей - rte.css и скопируем его в директорию fileadmin/rtecss.

2. Теперь нужно как-то сказать TYPO3 где лежат пользовательские стили и указать какие стили можно применять к блокам, а какие к тексту.
Для этого переходим в свойства страницы (например, корневой)



и помещаем в блок Page TSConfig следующий скрипт:

RTE {
default {
showTagFreeClasses = 1
# указываем где находится файл стилей
contentCSS = fileadmin/rtecss/rte.css

# очищаем старые стили
classesAnchor >
classesLinks =
# устанавливаем классы для
# текста
classesCharacter := addToList(coding, note, important, warning, red_txt, blue_bold_txt)
# блоков
classesParagraph := addToList(coding, note, important, warning, float_left, center, float_right)
# ячеек таблиц
classesTD := addToList(sub)
# таблиц
classesTable := addToList(full, fixed)
# список всех доступных классов
proc.allowedClasses := addToList(coding, note, important, warning, float_left, center, float_right)
}
}

Это все. Теперь в редакторе текстов можно увидеть и проделать нечто подобное:

2 коммент.:

Flex комментирует...

В RTE стили появляются, их можно применять к тексту, но когда сохраняю, то форматирование не сохраняется. И соответственно в FE всё отображается так же без стилей.

Анонимный комментирует...

Потому что этот же файл стилей надо подключить и для вывода в FE. А как же иначе? ведь браузеру тоже надо отправлять этот файл стилей ))

Отправить комментарий

О себе

Моя фотография
Вадим Гиркало
Фрилансер, веб-разработчик сайтов на базе бесплатной, мощнейшей и очень гибкой CMS системы - TYPO3.
Просмотреть профиль

Позвонить мне в Skype

TOP - 3