This page is still a beta!

1.2. Interface configuration

Interface configuration through Page TSconfig

This is the 'Page TSconfig' options of the RTE:

Property:

Description:

classes.[classname]

Defines the classes available in the RTE. classname is the actual name of the style-class you're configuring. Notice you must specifically assign the classes to the various facilities also. See later.

Properties:

.name = Label of the class (language-splitted)

.value = The style for the class

.noShow = Boolean; if set, the style of the class is not used to render it in the pop-up selector.

Example:

# General configuration of the available classes:

RTE.classes {

  mainBodyText {

    name = Body Text (Primary)

    value = font:bold; color:blue;

  }

}

# Specific configuration for the Character Style menu:

RTE.default.classesCharacter = mainBodyText

The class might be configured to show up like this:

colors.[id-string]

Defines the colors available in the RTE.

Properties:

.name = Label of the color in menu (language-splitted)

.value = The HTML-color value

Example:

# 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

This results in a color picker like this:

fonts.[id-string]

Defines the fonts available in the RTE.

Properties:

.name = Label of the font in menu (language-splitted)

.value = The font face value

Example:

# General configuration of the available fonts:

RTE.fonts {

  face1 {

    name = Verdana

    value = verdana, arial

  }

  face2 {

    name = Comic Sans

    value = Comic Sans MS

  }

  noFace {

    name = No font

    value =

  }

}

# Specific setting for the fontstyle selector:

RTE.default.fontFace = face2 , face1, noFace

This results in a font menu like this:

default.[...]

config.[tablename].[field].[...]

config.[tablename].[field].types.[type].[...]

These objects contain the actual configuration of the RTE interface.  For the properties available, refer to the table below. This is a description of how you can customize in general and override for specific fields/types.

'RTE.default'  configures the RTE for all tables/fields/types

'RTE.config.[tablename].[field]' configures a specific field. The values inherit the values from 'RTE.default' in fact this is overriding values.

'RTE.config.[tablename].[field].types.[type]' configures a specific field in case the 'type'-value of the field matches type. Again this overrides the former settings.

Example:

Lets imaging we would like to disable the color picker matrix for the RTE in general. Then we would set this option:

RTE.default.disableColorPicker = 1

and this would be the result:

However we might like the color picker to appear for all use of the RTE with the bodytext field ('Text'-field) of content elements. Then we would set this value:

RTE.config.tt_content.bodytext.disableColorPicker = 0

and this would be the result:

Finally we might like to remove the color picker again in case the user has selected the type 'Text' or 'Text w/Image' of the content element:

RTE.config.tt_content.bodytext.types {

  text.disableColorPicker = 1

  textpic.disableColorPicker = 1

}

and we're back to this:

(Only little thing here is that the color picker is not used anywhere with the 'text' and 'textpic' types, but in principle this is how it works... :-))

[page:RTE]

Configuration of the RTE editor interface

These options are designed to let you customize the RTE interface. The RTE interface does not automatically reflect the styles defined in your frontend template. However you might like to get as close as possible to the actual layout of your website in the editor. Therefore you must configure the RTE to reflect the design of the frontend template.

Property:

Data type:

Description:

disabled

boolean

If set, the editor is disabled.

disableColorPicker

boolean

Disables the color picker matrix in all color dialogs. The color picker lets you select web-colors. See examples above.

classesParagraph

list of id-strings

Classes available in the Paragraph Style selector.

The Paragraph Style selector lets you format a block of content also known typographically as a paragraph (the section between two linebreaks). The content of the paragraph is wrapped in block-tags and by default you can select between <Hx>, <P> and <PRE> formatting (you can disable any or all of these default values by the 'hidePStyleItems', see later).

The classes defined in the 'classesParagraph' value will be prepended to these options as you see in this example. They are inserted as <DIV>-tags with a class-parameter.

Example:

This configuration would result in this Paragraph style selector (provided that the classes 'mainBodyText' and 'header2' are found in the RTE.classes definition, see above):

RTE.default {

  classesParagraph = mainBodyText, header2

}

classesCharacter

list of id-strings

Classes available (by default) in the Character Style selector.

The Character Style selector is used to format any string of text inside a paragraph, tablecell. So this formatting relates to the selected piece of text in opposition to the Paragraph Styles which always formats the current paragraph no matter the selection.

Although the Character Style selector is aimed at text-formatting, it will also apply classes to other elements, for instance tables or images if selected as well as links and table-cells. The allowed classes for these operations may be configured separately by listing the classes with the options, you find below.

Example:

This configuration will display these options in the Character Style dialog:

RTE.default {

  classesCharacter = mainBodyText, header1

}

classesImage

list of id-strings

Classes available for images. See description of 'classesCharacter'.

classesTable

list of id-strings

Classes available for tables. See description of 'classesCharacter'.

classesLinks

list of id-strings

Classes available for links. See description of 'classesCharacter'.

classesTD

list of id-strings

Classes available for tablecells. See description of 'classesCharacter'.

colors

list of id-strings

Defines the specific colors generally available in the color selectors. The id-strings must be configured in the RTE.colors array (see description earlier):

Example:

RTE.default {

  colors = color1, color2,noColor

}

fontFace

list of id-strings

Define

hidePStyleItems

list of tag names,

* removes all

Lets you disable any of the default Paragraph Style options.

Possible values are:

H1, H2, H3, H4, H5, H6, P, PRE

hideFontFaces

list of id-numbers,

* removes all

Lets you disable any of the default font faces in the Font Style selector. These are the possible values you can set:

1: Arial

2: Arial Black

3: Verdana

4: Times New Roman

5: Garamond

6: Lucida Handwriting

7: Courier

8: Webdings

9: Wingdings

hideFontSizes

list of size-numbers,

* removes all

Lets you disable any of the default font sizes available in the Font Size selector. Values are ranging from 1-7.

showButtons

hideButtons

list of id-strings

showButtons: Any keys entered here is added to the keylist configured in TCA. Thus you can add buttons to the default set. However any keys entered here are subject to be removed by the .hideButtons or any per-user defined limitations of buttons in the RTE.

hideButtons: The options in the toolbar are configured through the settings in the $TCA. However certain options may be blinded on user level. This option allows you to further blind toolbar options on a general level.

This is the keylist: cut,copy,paste,formatblock,class,fontstyle,fontsize, textcolor,bold,italic,underline,left,center,right,orderedlist,unorderedlist,outdent, indent,link,table,bgcolor,image,emoticon,line,user,chMode

The keylist for the buttons is also displayed later in this documentation.

Example:

This will remove the buttons for Bold, Italics and Underline from the toolbar:

RTE.default {

  hideButtons = bold, underline, italic

}

proc

->PROC

Customization of the server processing of the content - also called 'transformations'. See table below.

The transformations are only initialized, if they are configured (“rte_transform” must be set for the field in the types-definition in TCA.)

mainStyleOverride

string

By default the editor style section is set with the CSS-code below. However you may override this by this option.

Default:

BODY {

  border: 1px black solid;

  border-top: none;

  margin : 2 2 2 2;

  font-family:Verdana;

  font-size:10px;

  color:black;

  background-color:white;

}

TD {font-family:Verdana; font-size:10px;}

P {margin-top:0px; margin-bottom:5px;}

DIV {margin-top:0px; margin-bottom:5px;}

OL {margin: 5px 10px 5px;}

UL {margin: 5px 10px 5px;}

BLOCKQUOTE {margin-top:0px; margin-bottom:0px;}

mainStyleOverride_add.[key]

string (css-style)

Allows to add style configuration to the values above (for .mainStyleOverride above)

Keys are:

.P / .DIV / .TD /.BODY / .BLOCKQUOTE /.OL / .UL / .PRE / .Hx will all take values which are prepended to the above settings.

Example:

mainStyle_font

mainStyle_size

mainStyle_color

mainStyle_bgcolor

string

Setting the default font-family (verdana) , font-size (10px), font-color (black) and background color (white)

The default is shown in “.mainStyleOverride” above.

inlineStyle.[any keysting]

string

CSS code to be included in the editor style section. This will be included after the default code.

defaultLinkTarget

string

This sets the default target for new links in the RTE

blindLinkOptions

list of strings

List of menu items in the link selector to remove. Keylist is page,file,url,mail,spec

blindImageOptions

list of strings

List of menu items in the image selector to remove. Keylist is magic,plain,dragdrop

userElements.[#]

string/->userCategory

Configuration of the categories of user elements

The string value sets the name of the category. Value is language-splitted (by  |) to allow for multiple languages.

userLinks.[#]

string/->userLinks

Configuration of user defined links.

The string value sets the name of the category. Value is language-splitted (by  |) to allow for multiple languages.

disableRightClick

boolean

If set, the right click (context) menu of the RTE is disabled.

disablePCexamples

boolean

If set, the examples of classes in Paragraph and Character selectors are disabled.

[page:RTE.default/RTE.config.(table).(field)/RTE.config.(table).(field).types.(type)]

userCategory:

Properties of each user element category.

Property:

Data type:

Description:

load

string

If set, the a predefined set of user element is loaded into this category. They are always loaded in the key starting with 100 and then forward in steps of 10.

Current options are:

“images_from_folder”: Loads gif,jpg,jpeg,png images from the specified folder (defined by the .path property)

merge

Boolean

If set, then any manually configured user elements are merged onto the ones loaded by the .load operation.

path

String

(Applies for load=images_from_folder only)

Sets the path of the folder from which to fetch the images (gif,jpg,jpeg,png)

Example:

.path = fileadmin/istate/

[#]

string/->userElements

Configuration of the user elements.

The string value is the name of the user element. Language-splitted.

Example:

RTE.default.userElements {

    # Category with various elements

  10 = Various elements | Diverse elements

  10 {

      # An image is inserted

    1 = Logo 1 | Bomærke 1

    1.description = This is the logo number 1. | Dette er logo nummer 1

    1.content = <img src="###_URL###fileadmin/istate/curro.png">

      # The text-selection is wrapped with <sup> tags.

    2 = Subscript

    2.description = Selected text is wrapped in <sup>-tags.

    2.mode = wrap

    2.content = <sup>|</sup>

      # This submits the selected text content to the script, rte_cleaner.php

    5 = Strip all tags

    5.description = All HTML-codes are removed from selection.

    5.mode = processor

    5.submitToScript = typo3/rte_cleaner.php

  }

    # Category with images from the fileadmin/istate/ folder

  2.load = images_from_folder

  2.merge = 1

  2.path = fileadmin/istate/

    # here the logo from “Various elements” is included as well

  2.1 < .10.1

}

  # Show the user-button, if not existing

RTE.default.showButtons = user

[page:->userCategory]

userElements:

Properties of each user elements setup.

Property:

Data type:

Description:

mode

string

Which kind of object it is.

Options:

“wrap”: If a wrap, then the content is exploded by “|” and wrapped around the current text selection.

“processor”: The content is submitted to the php-script defined by .submitToScript. GPvar(“processContent”) carries the selection content of the RTE and GPvar(“returnUrl”) contains the return url. (The “content” property is not used here!)

default: The content is just inserted (pasted into) at the cursor or substituting any current selection.

description

string

A short description shown beneath the user element title (which is in bold)

content

string

The content inserted/wrapped into the RTE

submitToScript

string

(Applies only to mode=processor)

PHP to which the current text selection of the RTE is submitted. The script must be relative to the site-url or a full url starting with http://...

Example:

.submitToScript = typo3/rte_cleaner.php

or

.submitToScript = http://www.domain.org/some_extenal_script.php

dontInsertSiteUrl

boolean

If set, the marker ###_URL### in the content property's content IS NOT substituted by the current site url. Normally you wish to do this for all  image-references which must be prepended with the absolute url in order to display correctly in the RTE!

[page:->userElements]

userLinks:

Properties of user links

Property:

Data type:

Description:

url

string

The url.

If set, the marker ###_URL### in the content property's content is substituted by the current site url.

description

string

A short description shown beneath the link  title (which is in bold)

target

string

Default target (if isset())

[page:->userLinks]

Toolbar keylist

This is the complete list of keys for the toolbar:

cut copy paste formatblock class fontstyle fontsize textcolor bold italic underline left center right orderedlist unorderedlist outdent indent link table bgcolor image emoticon line user chMode

And this is how the keys relate to the buttons: