Rich Text Editor (htmlArea)

Summary of this article:

It is wise to read  full documentation of this rich text editor or to take a look at this tutorial: “ Recommended Configuration for htmlArea”.

Beware: Unless otherwise stated, TypoScript code should be entered in pageTS field, not in the Setup template’s field.

At the end of each section, a file may be downloaded as a “standard” configuration. All these files may easily be saved in the directory fileadmin and then be referenced from the pageTS thanks to the following code:

<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/rte.txt">
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/rte_buttons.txt">
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/rte_proc.txt">
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/rte_styles.txt">

Base Configuration of the Rich Text Editor

Hiding Unused Toolbar Buttons

As a best practice for this rich text editor, start by showing all toolbar buttons and then remove those that are useless or unwanted:

RTE.default {
	// Buttons to show
	showButtons = *
 
	// Buttons to hide
	hideButtons (
	  underline,strikethrough,user,acronym,inserttag,about,
	  showhelp,fontstyle,fontsize,lefttoright,righttoleft,
	  textcolor,bgcolor,textindicator
	)
 
	// Group buttons (Mozilla only)
	keepButtonGroupTogether = 1
 
	// Hide table operations
	hideTableOperationsInToolbar = 0
 
	// Show toggle borders item even if table operations are disabled
	keepToggleBordersInToolbar = 0
 
	// Display status bar
	showStatusBar = 1
}

Here is the complete list of available toolbar buttons:

Alignment
center, indent, justifyfull, left, lefttoright, outdent, right, righttoleft
Edit
chMode, copy, cut, findreplace, paste, redo, selectall, spellcheck, undo
Formating
bgcolor, bold, cleanword, italic, orderedlist, removeformat, strikethrough, subscript, superscript, textcolor, underline, unorderedlist
Insert
acronym, emoticon, image, insertcharacter, inserttag, line, link
Styles
blockstyle, blockstylelabel, fontsize, fontstyle, formatblock, splitblock, textindicator, textstyle, textstylelabel
Tables
celldelete, cellinsertafter, cellinsertbefore, cellmerge, cellproperties, cellsplit, columndelete, columninsertafter, columninsertbefore, columnsplit, rowdelete, rowinsertabove, rowinsertunder, rowproperties, rowsplit, table, tableproperties, toggleborders
Misc
about, showhelp, user

Reordering Toolbar Buttons

You only need to redefine as you wish the list of buttons in the pageTS. Keywords space, bar and linebreak allow respectively to add some space between buttons, to create a vertical (dotted line) separator or to start a new row of buttons.

RTE.default {
    toolbarOrder {
        blockstylelabel, blockstyle, space, textstylelabel,
        textstyle, bar, linebreak, fontstyle, space, fontsize,
        space, formatblock, bar, bold, italic, underline, bar,
        ...
    }
}

Ready-to-Use Configuration

Note: Content should be pasted into pageTS or be referenced as explained at the beginning of this article.

Restricting Authorized Tags

The configuration file is too big to be shown on this page. As such, please read carefully content of configuration file you may download below.

The trick to let all this stuff work fine is to well understand interactions between the RTE editor and TYPO3 when coming to generate pages. Configuring RTE in pageTS is especially not enough to gain a valid frontend output. You still need to slightly modify the configuration of extension css_styled_content, which is in charge of generating the HTML code actually sent to the browser:

	## Tags allowed
	## Please use the same list as RTE.default.proc.allowTags (pageTS)
lib.parseFunc.allowTags (
	a, abbr, acronym, address, blockquote, b, br, caption, cite,
	code, ...
)
 
	## Tags denied
 	## Make sure we can set rules on any tag listed in allowTags.
lib.parseFunc.denyTags >
 
lib.parseFunc_RTE.allowTags < lib.parseFunc.allowTags
lib.parseFunc_RTE.denyTags >

A recurring question on forums is to know how effectively show a tag address without enclosing it in a p tag. Following code does it:

	## We still want address tags being parsed to enable links
lib.parseFunc_RTE.externalBlocks.address {
	stripNL = 1
	stdWrap.parseFunc = < lib.parseFunc
}

Ready-to-Use Configuration

Beware: Content should be pasted into pageTS or be referenced as explained at the beginning of this article.

In all cases, do not hesitate to read  the documentation about transformations.

Restricting Available Styles

Please read tutorial “ Customizing RTE” from Marlies Cohen.

Hiding Unused Block Styles

Please read tutorial “ Customizing RTE” from Marlies Cohen.

Ready-to-Use Configuration

Note: Content should be pasted into pageTS or be referenced as explained at the beginning of this article.

Adding Block Styles

Please read tutorial “ Customizing RTE” from Marlies Cohen.

Flattr