06.08.10

Базовая настройка редактора htmlArea RTE

текстовый редактор htmlArea RTE

В системе управления сайтами TYPO3, по сути, имеется возможность работать с двумя текстовыми редакторами на выбор – это htmlArea RTE либо TinyMCE. Тем не менее, первый из них можно назвать текстовыми редактором по умолчанию, что делает его наиболее часто используемым в сайтах на TYPO3. С каждой новой версией разработчики htmlArea RTE делают его лучше в плане работы и настройки, но не все там, к сожалению, так просто, как хотелось бы. Особенно, если сравнивать, например, с тем же TinyMCE для wordpress. В общем, дальше публикую немного информации про настройку редактора htmlArea RTE для TYPO3. Это можно сказать первая часть серии статей по данной тематике.

Вообще редактор htmlArea RTE представляет из себя вполне обычный инструмент для работы с текстами на сайте. Ничего сверх необычного в интерфейсе нет, кнопки и функции весьма стандартные. При этом разработчик может по своему желанию подправить не только вид, но и некоторую функциональность этого редактора. В этом вопросе есть несколько нюансов, сегодня расскажу про базовые настройки модуля htmlArea RTE, которые можно подправить без особого труда. Вообще я бы сконцентрировал внимание на трех важных параметрах, которые приходится настраивать (или проверять) для каждого из сайтов. Заходим в менеджер расширений Ext Manager, выбираем модуль htmlArea RTE, кликнув по его названию.

настройки редактора htmlArea RTE

Вы увидите перечень настроек для текстового редактора htmlArea RTE для TYPO3, которые можно поменять. Сначала рассмотрим те три важных, что я упоминал выше.

Default configuration settings – это набор некоторых значений по умолчанию для текстового редактора. Есть минимальный (большинство опций отключены), типичный (рекомендуется использовать на сайтах чаще всего) и демо (практически все настройки включены, но не рекомендуют включать для разрабатываемых сайтов). То есть, демо версия – это как бы для ознакомления разработчикам, если я правильно понял, хотя, в принципе, часто ставил именно этот режим, так как там действительно «все включено». В последнее время перешел на типичный (Typical).

настройка htmlArea RTE

Enable images in the RTE – разрешает вставку изображений в текстовом редакторе. По умолчанию эта опция выключена, поэтому часто иногда вы можете попасть в ситуацию, когда после добавления картинки в редакторе и сохранении текста она пропадает. Помню, в первые разы потратил пару часов на определения «глюка», а все оказалось гораздо проще. Зачем выключать вставку изображений? – спросите вы. Все очень просто, в  TYPO3 есть несколько типов элементов для добавления на сайт – кроме «Текста» имеется «Текст + картинки», где в принципе можно и добавлять изображения немного другим способом. Возможно, это сделано для того чтобы пользователь не смог разрушить «единый структурированный вид сайта» а добавлял изображения только с нужными характеристиками и оформлением. Так или иначе, лично я опцию Enable images in the RTE для всех сайтов активирую – это намного привычнее для обычного пользователя.

В самом конце настроек найдете 2 поля:

  • Maximum width of plain images – максимальная ширина изображений.
  • Maximum height of plain images – максимальная высота изображений.

Здесь нужно будет установить соответствующие значения, если вы хотите чтобы пользователь смог добавить в текст картинку, например, размерами 900×700 пикселей, по умолчанию этого сделать не удастся.

Остальные настройки экстеншена htmlArea RTE для TYPO3 практически никогда не изменял, оставляя значения по умолчанию. В первом блоке Configuration, насколько я понимаю, задаются опции для языковой проверки текста – можно указать для каких языков ее не использовать, подключаемые словари и т.п.

В разделе Enable features можно выделить:

  • Enable links accessibility icons, что, по идее, добавляет иконки для ссылок
  • Enable the DAM media browser добавляет DAM media browser, если нужный модуль установлен.
  • Enable click-enlarge on images – возможность установки увеличения картинки при клике.
  • Enable Mozilla/Firefox extension – позволяет установить модуль Firefox для доступа к буферу обмена при использовании текстового редактора.
  • Enable the RTE in Opera 9.5+ (экспериментальная функция) – насколько я помню, в ранних версиях были проблемы с использованием редактора htmlArea RTE в браузере Opera. Возможно, в новых версиях совместимость улучшилась.

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

Понравился пост? Подпишись на TYPO3 блог typo3 blog RSSRSS, RSS typo3 blogEmail или typo3 twittertwitter!
Возможности Экстеншены

комментария 2 к статье “Базовая настройка редактора htmlArea RTE”

  1. Василий   17.02.11

    Всем привет!
    ***********
    Еще раз спасибо за интересный материал. И все же: Как настроить этот редактор, htmlArea RTE, версию 2.0.5? Установка галочек и выбор режима Typical не прибивала дополнительных иконок и функций. Надо менять еще и TSConfig.

    у меня установлено:
    Win7
    Версия сервера: 4.1.22 Apache
    Версия PHP: 5.2.6
    Рабочая версия из пакета introductionpackage-4.4.6a.zip
    Настройка только localhost.

    Эмоции такие. Typo3 работает отлично по всем функциям. Но редактор?! Первое впечатление, что такого убожества еще не встречал. Потом возникли сомнения, что не может быть, чтобы для такой крутой системы как Typo3, поставили такой слабый редактор. Как оказалось, все дело в настройках.
    Ведь не секрет, что он всем нужен нормальный, а не укороченный и глюкованный. После чтения и поисков пришел к такой настройке TSConfig, но и ее так и не сумел грамотно настроить. Далеко до Dreamweave. Вот скрипт:

    # Show only the chosen columns in the page module
    # 0=normal, 1=left, 2=right, 3=border
    mod.SHARED.colPos_list = 1,0,2

    # Set the default label and flag
    mod.SHARED.defaultLanguageLabel = English
    mod.SHARED.defaultLanguageFlag = gb.gif

    # Show the content element wizard with tabs (for consistency)
    mod.wizards.newContentElement.renderMode = tabs

    TCEFORM {
    pages {
    layout {
    # Rename the default options for the layout field in table pages
    altLabels.0 = Standard 3 columns
    altLabels.1 = Columns left & main
    altLabels.2 = Columns main & right
    altLabels.3 = Column main only
    }
    # There is no need for the Alias field in page properties when we use RealURL
    alias.disabled = 1
    }

    tt_content {
    # Remove the ‘border’ option from selectbox ‘column’ in content records
    colPos.keepItems = 1,0,2
    }
    }
    /*
    ##frames
    TCEFORM.tt_content.section_frame{
    addItems {
    30 = Frame 3, width 2/3
    31 = Frame 4, width 1/3
    }
    }
    */

    // If an editor creates a page it should be visible to all editors and admins
    TCEMAIN {
    // group «all users»
    permissions.groupid = 5

    user = show,edit,delete,new,editcontent
    group = show,edit,delete,new,editcontent
    everybody =
    }
    RTE >
    RTE.default.enableWordClean = 1
    RTE.default.disableEnterParagraphs = 1
    RTE.config.tt_content.bodytext.showButtons = *
    RTE.default.showButtons = *
    TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 100%
    RTE.default.useCSS = 1
    RTE.default.showTagFreeClasses = 1
    RTE.default.contentCSS = fileadmin/templates/style.css
    RTE.default.blindImageOptions = magic
    RTE.default.proc {
    allowTags = b,i,strong,em,table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, pre, blockquote, strong, em, a, img, hr, tt, q, cite, abbr, acronym, address, center, sub, sup
    overruleMode = ts_css
    dontConvBRtoParagraph = 1
    internalizeFontTags = 1
    allowTagsOutside = img,hr,address,sub,sup
    denyTags = strike,font
    entryHTMLparser_db = 1
    entryHTMLparser_db {
    allowTags < RTE.default.proc.allowTags
    xhtml_cleaning = 1
    htmlSpecialChars = 0
    noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
    tags.hr.allowedAttribs = class
    tags.span.allowedAttribs = class
    tags.div.allowedAttribs = align
    tags.b.remap = strong
    tags.i.remap = em
    removeTags = sdfield
    keepNonMatchedTags = protect
    # General configuration of the available colors:
    RTE.colors {
    color1 {
    name = Background color
    value = blue
    }
    color2 {
    name = Another color I like!
    value = #775533
    }
    noColor {
    name = No color
    value =
    }
    }
    # Specific setting for the font color selector:
    RTE.default.colors = color1, color2, noColor
    }
    }

    Что не так? Буду очень благодарен. Василий.

  2. Tod   18.02.11

    Василий, тут так просто, увы, не получится, то есть я не разберусь в этом множестве строк. Что могу посоветовать. Во-первых, для «всех» функций нужно брать Demo режим, во-вторых, можно вообще попробовать поставить редактор TinyRTE, который должен быть намного круче (по крайней мере он таким был всегда).
    Последний вариант поискать готовые настройки как приведены вами — просто это общий код, там много всего намешано. Часто приходится решать какую-то одну задачу по редактору (отступы не ставятся или еще что-то), тогда изучаю код, а так в целом он и не нужен для настройки редактора — он работает без этих строк в TSConfig. Что именно вам нужно сделать для редактора? Больше кнопок? — ставьте Demo в настройках и будут они все.

Оставить комментарий к статье Базовая настройка редактора htmlArea RTE

Полезные блоги

  • для блоггеров и вебмастеров