EXT: htmlArea RTE

Table of Contents

Copyright	2

Credits	2

License	2

Sponsors	2

Introduction	3

What does it do?	3

Requirements	3

What's new in TYPO3 4.4	3

Support	4

Users Manual	5

Text formating with inline elements	5

List of inline elements	5

Labels in the text formating drop-down list	5

Behavior of the text formating drop-down list and of the buttons	5

Text styling with classes on inline elements	6

List of inline elements	6

Labels in the text styling drop-down list	7

Behavior of the text styling drop-down list	7

Using definition lists	8

Buttons	8

Creating a definition list	8

Creating and remapping dt/dd elements	9

Nesting definition lists (Indent/TAB)	9

Marking language	12

Drop-down list and button	12

Editing language marks	13

FAQ: How do I insert a line break instead of a paragraph?	15

FAQ: How do I remove a link?	15

FAQ: How do I delete a table?	15

FAQ: How do I configure the editor to use my CSS styles?	15

FAQ: Why does the text style selection list remain empty?	16

FAQ: How can I define custom bullet images?	16

FAQ: Is it possible to style the appearance of links in the RTE itself?	16

FAQ: How can I use a Bengali Open Type font in the editor?	16

FAQ: How do I configure the RTE to keep my custom tag?	17

FAQ: Why is the class attribute on table tags always rendered as contenttable in the front end?	17

FAQ: Why are abbr and acronym tags not correctly rendered in the front end?	17

FAQ: Why are popup windows too small when they open?	17

FAQ: Why is the editor not displayed with full width when I use the full window wizard?	17

FAQ: Is it possible to disable the “New magic image”?	18

FAQ: Why are images not displayed in the RTE?	18

FAQ: Why do style selector boxes remain disabled in IE?	18

FAQ: Why can't I get all buttons to be displayed?	18

FAQ: Why does it take so long to load the editor in Internet Explorer?	18

FAQ: What hotkeys are available in htmlArea RTE?	18

Configuration	20

Installing the RTE	20

Extension configuration variables	20

User TSConfig	21

Page TSConfig	22

Static Template: Clickenlarge Rendering	46

Default Website Language	46

Server Configuration	46

Installing multiple RTE's	47

Clearing the RTE Cache	47

Using htmlArea RTE in a front end plugin	47

Configuring the anchor accessibility feature	47

Default Configurations	48

Default configuration of RTE content transformation	48

Typical default configuration	50

Minimal default configuration	53

Demo default configuration	54

Image default configuration	58

Tutorial	59

Working around Internet Explorer caching problem	59

Known Problems	61

Internet Explorer and HTML tag abbr	61

Internet Explorer and mod_gzip	61

“All-in-One Gestures” Firefox extension and the context menu	61

Change Log	62

Copyright

Extension Key: rtehtmlarea

Copyright 2004-2010, Stanislas Rolland, <typo3(arobas)sjbr.ca>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

a GNU/GPL CMS/Framework available from www.typo3.com

Credits

The open source htmlArea editor was originally developed by Mihai Bazon and sponsored by interactivetools.com. A number of htmlArea extensions were contributed by various authors. Both the base editor and the extensions have been substantially modified for the purpose of this extension.

This extension is a continuation of the work initiated by Kasper Skårhøj and Philipp Borgmann who realized the initial integration using the RTE API introduced in TYPO3 3.6.0 as well as the initial integration of the TYPO3 image insertion and link insertion wizards.

Thanks to Ursula Renziehausen from Universität Erfurt for her great ideas, advice and patient support in improving multiple aspects or the RTE.

The editor uses an adaptation of open source Base script authored by Dean Edwards.

Thanks to Jan Wulff for analyzing the issues related to Internet Explorer and mod_gzip on Apache servers.

The icons of the anchor accessibility feature are provided by creator and copyright-owner Cornelia Lange (http://www.clkm.de/).

Thanks to Pierre-Yves Gadina for the improved icons of the Insert Image button and of the Table Operations tool bar and Ursula Renziehausen has further improved many of the icons.

The initial toggleborders button logic and the automatic url and email recognition logic originate from Xinha, http://xinha.gogo.co.nz/, a fork of htmlArea.

Thanks to the people at http:www.cablan.net for their help and support in understanding and debugging the interfaces and configuration issues of the various versions of Aspell.

When performing copy/cut/paste operations with Mozilla/Firefox, the extension may trigger the installation of Mozilla/Firefox extension AllowClipboard Helper developed by Petr Simek.

License

The original htmlArea editor was released under so-called “modified BSD” license. The original code was substantially modified. As permitted by the modified-BSD license, and with the permission of the original copyright holders, the modified version included in this extension is released, like all TYPO3 components, under the GNU General Public License.

Sponsors

Development of this extension was sponsored in part by the TYPO3 Association, by Universität Erfurt and Technische Universität Ilmenau, as well as by: Carla Froitzheim, Matthias Kappenberg, Ute Luft, Ralf Mertes, Peter Niederlag, Jost Reckmann, Pierre Rouwens, Krystian Szymukowicz, Veldhuizen Interactive, Sacha Vorbeck, Jan Wischnat.

You may sponsor further development of this extension by sending your contribution to stanislas.rolland(at)sjbr.ca through moneybookers.com or PayPal, or by contacting the author.

Introduction

What does it do?

The extension offers a Rich Text Editor or RTE with the following features:

Support for Firefox 1.5+, SeaMonkey 1.0+, Safari 3.0.4+, Google Chrome 1.0+ and Opera 9.62+ on all platforms, and for IE6.0+ on Windows platforms;

Based on the ExtJS JavaScript framework;

Integration of TYPO3 image insertion and link insertion browsers, configurable color selector and user element insertion dialog;

Configuration through TYPO3 Extension Manager, Page and User TSConfig RTE properties; three default sets of Page and User TSConfig configuration settings for typical situations, advanced users or demo environments;

Integration with the translation facilities of TYPO3;

Block and inline CSS style selector boxes with style descriptors imported from an external CSS file;

Integration of a spell checking feature providing server-side spell checking in many languages, with optional personal dictionaries for backend users;

Integration of ContextMenu, TableOperations, InsertSmiley, FindReplace, RemoveFormat, CharacterMap, QuickTag and Acronym htmlArea extensions;

Anchor accessibility feature;

Hook on Lorem Ipsum wizard so that dummy content may be inserted when the editor is in wysiwyg mode;

Optional configurable server-side HTML cleaning when content is pasted into the editor;

A class that may be used in front end extensions to enable rich text editing of text fields.

Requirements

Version 2.0 requires TYPO3 4.4.

Version 1.8.* requires TYPO3 4.3.

Version 1.7.* requires TYPO3 4.2.

Version 1.5.* requires TYPO3 4.1.

Version 1.3.* requires TYPO3 4.0.

Version 1.2.2 is the last version of this extension that will run with TYPO3 3.8.

Version 1.1.6 is the last version of this extension that will run with TYPO3 3.7.

Version 1.0.1 is the last version of this extension that will run with TYPO3 3.6.

In TYPO3 4.0, the extension is included as system extension.

If spell checker feature is enabled in version 1.4.2+, then Static Info Tables version 2.0.0+ is required. If spell checker feature is enabled in versions before 1.4.2, version 1.1.0 (or more recent) of the Static Info Library extension (sr_static_info) is required.

The spell checker feature requires GNU Aspell 0.60+ to be installed on the server.

The spell checker requires PHP to be compiled with pspell. If PHP is not compiled with pspell, the spell checker will function in shell_exec mode, if safe_mode is not enabled. However, the personal dictionaries feature is available only if safe_mode is not enabled.

The hook on the Lorem Ipsum wizard requires version 1.1.0+ of the Lorem Ipsum extension (lorem_ipsum).

What's new in TYPO3 4.4

The RTE underwent a major restructuration. A substantial part of the RTE has been rewritten with the use of ExtJS.

For RTE users, this means:

When textareas are resizable, the RTE framework comprising the toolbar, the editing area and the status bar, is resizable as a whole.

The toolbar buttons and dropdowns are now ExtJS widgets and will look somewhat different.

The context menu becomes a ExtJS menu and is configurable.

Color palettes become ExtJS ColorPalettes.

All dialogues have been transformed into nicer ExtJS windows.

As a consequence of the use of ExtJS, support of the following older browsers is discontinued:

IE 5.5

Mozilla before SeaMonkey 1.0

Firefox before 1.5,

WamCom Mozilla for Mac OS 9

Netscape.

For developers, this means:

The toolbar dropdowns become Ext ComboBox objects. Therefore, any existing extension that would add a dropdown to the RTE toolbar will fail and must be converted to the use of ExtJS.

Support

You may get support in the use of this extension by subscribing to news://news.netfielders.de/typo3.projects.rte.

Users Manual

Text formating with inline elements

The overall idea behind this is to make it as comfortable as possible to write semantic inline markup without having to code. Buttons in general are very easy to access, but if there are too many of them, they are confusing.

Now, which elements you need most often depends on the type of text you are writing.

If your site is about literature, you need a lot of q, cite, samp, dfn.

If your site is about typo3, what you need is a lot of code, var, kbd, samp, dfn and and ocassionally q and cite.

On a university website you have both subjects in different parts of the pagetree.

Therefore the idea is to have those elements as buttons you need most often, and the complete list in a drop-down list. Which buttons are shown and which elements are shown are configurable via Page and/or User TSConfig.

List of inline elements

b, bdo, big, cite, code, del, dfn, em, i, ins, kbd, q, samp, small, span, strike, strong, sub, sup, tt, u, var

Labels in the text formating drop-down list

In the drop-down list, depending on RTE configuration, both, the label and the tagname may be shown.

The label is important for those authors that do not know HTML, the tagname is convenient for the coders and also for the HTML novices, because this way they can learn their meanings and be enabled to use the status bar.

For example, depending on configuration, we may have:

q – Quotation

or

Quotation – q

or

Quotation

Labels are always shown in the author's language regardless of the content's language

The default order is alphabetical but may be configured otherwise.

Behavior of the text formating drop-down list and of the buttons

While in case of nested inline markup all buttons may be highlighted, only one of the options will be pre-selected in the drop-down list and therefore be shown in the collapsed drop-down list.

Legend:

highlighted (selected) string:This is the string inside the textarea the author has selected using the mouse or keyboard.

| = cursor position inside the textarea.

Case 1: No string is highlighted and the cursor is outside any inline element:

a) the option shown in the collapsed drop-down list is 'No text format';

b) the drop-down list and all buttons are disabled.

Case 2: No string is highlighted and the cursor is inside an inline element:

Example: <code>wor|d</code>

a) the option shown in the collapsed drop-down list is the type of the inner inline element in which the cursor is positioned;

b) the drop-down list and all buttons are enabled;

c) the button corresponding to the type of the inner inline element in which the cursor is positioned is highlighted by means of a white background; if the cursor is positioned inside nested inline elements, all corresponding buttons are highlighted by means of a white background;

d) if the author chooses a different markup in the drop-down list or clicks on a button that is not highlighted, the markup of the inner inline element is remapped;

e) if the author chooses 'Remove text format', the markup of the inner inline element is removed;

f) if the author clicks on an highlighted button, the markup of the innermost inline element of the corresponding type is removed;

g) the position of the cursor is unchanged.

Case 3: A string is highlighted and crosses multiple elements:

a) the option shown in the collapsed drop-down list is 'No text format' (first option);

b) if the string crosses multiple block elements:

the drop-down list is disabled;

c) if the string crosses multiple inline elements:

the option shown in the collapsed drop-down list is 'No text format';

the drop-down list is enabled;

if the author chooses a markup, the highlighted string is wrapped with the chosen markup;

the resulting marked up string is not highlighted;

the cursor is positioned at the end of the marked up string.

Case 4: The highlighted string is not contained in any inline element:

a) the option shown in the collapsed drop-down list is 'No text format';

b) if the author chooses a markup, the highlighted string is wrapped with the chosen markup;

c) the resulting marked up string is not highlighted;

d) the cursor is positioned at the end of the marked up string, so that This is great! becomes <strong> This is great!|</strong>.

Case 5: The highlighted string is contained in an inline element:

a) the option shown in the collapsed drop-down list is 'No text format';

b) if the author chooses a markup, the highlighted string is wrapped with the chosen markup;

c) the resulting marked up string is not highlighted;

d) the cursor is positioned at the end of the marked up string.

Example 1:

<q>This is a very good question.</q>

becomes

<q>This is a <strong> very|</strong>question.</q>.

Example 2:

<q>This is great!</q>, he shouted.

becomes

<q><strong>This is great!|</strong></q>, he shouted.

Case 6: The highlighted string contains exactly the complete inline element:

Example of highlighted string: <code>word</code>

a) The option shown in the collapsed drop-down list is the type of inline element corresponding to the highlighted string;

b) if the author chooses 'Remove text format', the inline markup gets removed: <code>word</code> becomes word|;

c) if the author chooses another markup, e.g. <var>, the markup wraps the highlighted node, so that <code>word</code> becomes <var><code>word|</code></var>.

Text styling with classes on inline elements

The text styling drop-down list makes it possible to add a class to an inline element:

whenever the cursor is put somewhere inside the element;

when the element is completely selected.

The classes allowed for each type of inline element are configurable.

List of inline elements

In addition to the inline elements listed under text formating above, classes may be assigned to abbr and acronym elements:

abbr, acronym, b, bdo, big, cite, code, del, dfn, em, i, ins, kbd, q, samp, small, span, strike, strong, sub, sup, tt, u, var

Labels in the text styling drop-down list

In the selectlist, both, the label and the class selector or class name may be shown:

label

class name - label

label - class name

Labels are always shown in the author's language regardless of the content's language.

The order is alphabetical.

Behavior of the text styling drop-down list

Only one of the classes is pre-selected in the Text Style selectlist and therefore shown in the collapsed selectlist. At all times, only classes allowed by the configuration settings are presented in the selectlist.

Legend:

highlighted (selected) string:This is the string inside the textarea the user has selected using the mouse or keyboard.

| = cursor position inside the textarea.

Case 1: No string is highlighted and the cursor is outside any inline element:

a) the option shown in the collapsed selectlist is 'No text style';

b) the selectlist is disabled.

Case 2: No string is highlighted and the cursor is inside an inline element:

Example: <code>wor|d</code>

a) the option shown in the collapsed selectlist is the current value of the element's class attribute, or 'No text style' when the inline element bears no class attribute;

b) the selectlist is enabled and contains the classes allowed for the type of inline element;

c) if the author chooses a different class, the class attribute gets updated; the position of the cursor is unchanged;

d) if the author chooses 'No text style', the current class is removed; if the element has no more class, the class attribute gets removed; if the element is a span element and it has no more attribute, the span element is removed; the position of the cursor is unchanged.

Case 3: A string is highlighted and crosses multiple elements:

a) the option shown in the collapsed selectlist is 'No text style';

b) if the string crosses multiple block elements:

the selectlist is disabled;

c) if the string crosses multiple inline elements:

the selectlist is enabled and contains the classes allowed for the 'span' element;

if the author chooses a class, the highlighted string is wrapped with a 'span' element with the chosen class as value of its class attribute;

the resulting marked up string is not highlighted;

the cursor is positioned at the end of the string.

Case 4: The highlighted string is not contained in any inline element:

a) the option shown in the collapsed selectlist is 'No text style';

b) if the author chooses a class, the highlighted string is wrapped with a 'span' element with the chosen class as value of its class attribute;

c) the resulting marked up string is not highlighted;

d) the cursor is positioned at the end of the highlighted string.

Case 5: The highlighted string is contained in an inline element:

a) the option shown in the collapsed selectlist is 'No text style';

b) if the author chooses a class, the highlighted string is wrapped with a 'span' element with the chosen class as value of its class attribute;

c) the resulting marked up string is not highlighted;

d) the cursor is positioned at the end of the highlighted string.

Case 6: The hightlighted string contains exactly the complete inline element:

Example of hightlighted string: <code>word</code>

a) the option shown in the collapsed selectlist is the current value of the element's class attribute, or 'No style' when the inline element bears no class attribute;

b) the selectlist is enabled and contains the classes allowed for the type of inline element;

c) if the author chooses a different class, the class attribute gets updated; the cursor is moved at the end of the highlighted string which gets de-highlighted;

d) if the author chooses 'No style', the current class is removed; if the element has no more class, the class attribute gets removed; if the element is a span element and it has no more attribute, the span element is removed; the cursor is moved at the end of the highlighted string which gets de-highlighted.

Using definition lists

Buttons

The following buttons are used:

a button allowing to create definition lists (dl);

a button allowing to toggle between term (dt) and definition (dd) elements;

indenting and outdenting of definition lists is done using the indent/outdent buttons or the TAB/SHIFT-TAB keys.

In the toolbar, the definition list and definition item buttons are usually placed right after the unordered list (ul) and the ordered list (ol) buttons.

Creating a definition list

Case 1: Nothing is highlighted, cursor is inside p or hx.

Example:

<p>Definition term|</p>

If dl-button is clicked, this becomes:

<dl>

<dt>Some Text|</dt>

</dl>

Case 2: Nothing is highlighted, cursor is inside a block element other than p or hx.

Example:

<div>Definition term|</div>

If dl-button is clicked, this becomes:

<div>

<dl>

<dt>Definition term|</dt>

</dl>

</div>

Case 3: Creating a dl from multiple highlighted paragraphs

Let us say, we have the following code highlighted:

<p>Definition term 1</p>

<p>Definition text 1</p>

<p>Definition term 2</p>

<p>Definition text 2</p>

Klicking the dl-button results in alternating dt/dd elements wrapped by dl:

<dl>

<dt>Definition term 1</dt>

<dd>Definition text 1</dd>

<dt>Definition term 2</dt>

<dd>Definition text 2|</dd>

</dl>

Case 4: Creating a dl from a highlighted combination of hx and p

<h4>headline 1</h4>

<p>paragraph 1.1</p>

<p>paragraph 1.2</p>

<h4>headline 2</h4>

<p>paragraph 2.1</p>

In this case

every hx would become dt, and

every p would become dd.

<dl>

<dt>headline 1</dt>

<dd>paragraph 1.1</dd>

<dd>paragraph 1.2</dd>

<dt>headline 2</dt>

<dd>paragraph 2.1|</dd>

</dl>

Creating and remapping dt/dd elements

Case 1: Behaviour of Enter key if the cursor is at the end of dt/dd

If the cursor is at the end of a dt-element and Enter is pressed, a new dd-Element will be created as next sibling.

If the cursor is at the end of a dd-element and Enter is pressed, a new dt-Element will be created as next sibling.

Case 2: Behaviour of Enter key if the cursor is at the beginning of dt/dd

If the cursor is at the beginning of a dt-Element and Enter is pressed, a new dt will be created as previous sibling.

If the cursor is at the beginning of a dd-Element and Enter is pressed, a new dd will be created.

Case 3: Remapping dd to dt

In order to remap the dt to dd, the cursor has to be somewhere inside a dt/dd. The remapping is done by clicking the dt/dd-toggle button.

Nesting definition lists (Indent/TAB)

While dt does not allow any blockelements inside, dd does, and you may also nest definition lists.

This is usefull if you have a term that has different definitions in different contexts. The nesting can be achieved using indent/outdent buttons as for the other list types.

Case 1: Indenting without any highlighted text

Let us say I want to talk about the Acronym PC in different context:

<dl>

<dt>PC</dt>

<dd>The Acronym has different meanings in different contexts:|</dd>

</dl>

Now I press indent, with the result that a new combination of dl+dt is created at my cursor position and my cursor is inside the newly created dt:

<dl>

<dt>PC</dt>

<dd>The Acronym has different meanings in different contexts:

<dl>

<dt>|</dt>

</dl>

</dd>

</dl>

Case 2: Indenting highlighted dt/dd elements

This case is divided into two subcases.

Subcase 2a: We have a dd as previous sibling of the hightlighted elements.

In this case the highlighted dt/dd elements should be wrapped with <dl> and should be placed inside the dd at cursor position. Example:

<dl>

<dt>PC</dt>

<dd>The Abbreviation has different meaning in different contexts:</dd>

<dt>Information technology</dt>

<dd>Personal Computer</dd>

<dt>Social sciences</dt>

<dd>Political correctness</dt>

<dt>Latin Grammar</dt>

<dd>Participium coniunctum</dd>

</dl>

Clicking indent results in:

<dl>

<dt>PC</dt>

<dd>The Abbreviation has different meaning in different contexts:

<dl>

<dt>Information technology</dt>

<dd>Personal Computer</dd>

<dt>Social sciences</dt>

<dd>Political correctness</dt>

<dt>Latin Grammar</dt>

<dd>Participium coniunctum|</dd>

</dl>

</dd>

</dl>

Subcase 2b: We have a dt as previous sibling of the highlighted dt/dd elements.

In this subcase the highlighted elements will be wrapped by dd+dl.

<dl>

<dt>PC</dt>

<dt>Information technology</dt>

<dd>Personal Computer</dd>

<dt>Social sciences</dt>

<dd>Political correctness</dt>

<dt>Latin Grammar</dt>

<dd>Participium coniunctum</dd>

</dl>

Clicking indent will result in:

<dl>

<dt>PC</dt>

<dd>

<dl>

<dt>Information technology</dt>

<dd>Personal Computer</dd>

<dt>Social sciences</dt>

<dd>Political correctness</dt>

<dt>Latin Grammar</dt>

<dd>Participium coniunctum|</dd>

</dl>

</dd>

</dl>

Case 3: Outdenting without any highlighting

After having said all about PC, I want to talk about RTE on the outer level and therefore do the following:

I press Enter to create a new dt and perhaps klick dt/dd-toggler.

I click outdent or press Shift+TAB to outdent the newly created dt.

As a result, my newly created dt/dd element is moved beneath the nested dl.

Example:

<dl>

<dt>PC</dt>

<dd>The Abbreviation has different meaning in different contexts:

<dl>

<dt>Information technology</dt>

<dd>Personal Computer</dd>

<dt>Social sciences</dt>

<dd>Political correctness</dt>

<dt>Latin Grammar</dt>

<dd>Participium coniunctum</dd>

<dt>|</dt>

</dl>

</dd>

</dl>

Clicking outdent in this situation will result in:

<dl>

<dt>PC</dt>

<dd>The Abbreviation has different meaning in different contexts:

<dl>

<dt>Information technology</dt>

<dd>Personal Computer</dd>

<dt>Social sciences</dt>

<dd>Political correctness</dt>

<dt>Latin Grammar</dt>

<dd>Participium coniunctum</dd>

</dl>

</dd>

<dt>|</dt>

</dl>

Case 4: Outdenting a highlighted group of dt/dd-elements

Outdenting of highlighted elements only works in a sensible way, if the highlighted elements are at the very end of an indented dl. If you want to move up or down elements at the beginning or in the middle, this can be achieved with cut and paste.

Example: Highlighted elements are at the end of a nested dl

<dl>

<dt>outer term 1</dtd>

<dd>outer data 1

<dl>

<dt>inner term 1</dt>

<dd>inner data 1</dd>

<dt>inner term 2</dt>

<dd>inner data 2</dd>

<dt>inner term 3</dt>

<dd>inner data 3</dd>

</dl>

</dd>

</dl>

Clicking outdent will place the selected elements below the next outer dd:

<dl>

<dt>outer term 1</dtd>

<dd>outer data 1

<dl>

<dt>inner term 1</dt>

<dd>inner data 1</dd>

<dt>inner term 2</dt>

<dd>inner data 2</dd>

</dl>

</dd>

<dt>inner term 3</dt>

<dd>inner data 3|</dd>

</dl>

Marking language

Drop-down list and button

A drop-down list of languages is provided that allows authors:

to add the lang attribute,

to change the value of the lang attribute,

to remove the lang attribute.

The name of the languages in the dorp-down list are shown in the author's BE language. The drop-down list uses ISO language codes and refers to the language table provided by extension Static Info Tables and its companion localization extensions. Additionally, the ISO code value may be shown before or after the natural name of the language.

As the attribute values are not visible in WYSIWYG mode, a button is provided that allows to show/hide the presence of a lang attibute. For Internet Explorer, this feature will only work for versions >= 7 as version 6 is not capable of attribute selectors. In browsers other than Internet Expolorer, the value of the language attribute is also shown in front of the marked text.

The language mark, if any, is also displayed in the status bar as: element[language-code].

Site developers/admins have the ability to configure:

wether lang or xml:lang or both are used as language attibute(s);

which languages are available in the drop-down list.

Editing language marks

Case 1: The author highlights a part of a text node and selects a language

Highlighted area:

<p>Semantisches Markup mindert Barrieren.</p>

Result in markup with cursor position:

<p>Semantisches <span lang="en">Markup</span>| mindert Barrieren.</p>

Case 2: The author highlights the whole text node inside an inline element and selects a language

a) to add the lang attribute

Highlighted area:

<cite>New York Times</cite>

Result in markup with cursor position:

<cite lang="en">New York Times</cite>|

b) to change the value of the lang attribute

Highlighted area:

<cite lang="en">Le Monde</cite>

Result in markup with cursor position:

<cite lang="fr">Le Monde</cite>|

c) to delete the lang attribute (No language)

Highlighted area:

<cite lang="en">Die Zeit</cite>

Result in markup with cursor position:

<cite>Le Monde</cite>|

In case the inline element in question is a span that does not have any other attributes, the span element will be removed.

Case 3: The author highlights a complete element node via the status bar and selects a language

Highlighted area:

<cite>New York Times</cite>

Result in markup with cursor position:

<cite lang="en">New York Times</cite>|

Case 4: Nothing is highlighted and the author selects a language

a) to add the lang attribute

Cursor position:

<p>Die <cite>New |York Times</cite> titelte ….</p>

The lang attribute is set in the direct parent element node.
Result in markup with cursor position:

<p>Die <cite lang="en">New |York Times</cite> titelte ….</p>

b) to change the attribute value

Cursor position:

<p><cite lang="fr">New |York Times</cite> titelte ….</p>

Result in markup with cursor position:
The value of the lang attribute of the direct parent element node is changed.

<p><cite lang="en">New |York Times</cite> titelte ….</p>

c) to remove the lang attribute

Cursor position:

<p><cite lang="fr">Die |Zeit</cite> titelte ….</p>

Result in markup with cursor position:
The lang attribute gets removed.

<p><cite>Die |Zeit</cite> titelte ….</p>

In case of a span element that has no other attributes the span element will be removed.

Case 5: Nothing is highlighted, the cursor is directly inside a block element and the author selects a language

<p>Beware | the dog!</p>

The lang attribute is set for the parent element:

<p lang="en">Beware | the dog!</p>

Case 6: The author selects a block element via the status bar

a) to add the lang attribute

Highlighted block:

<blockquote>
<p>Did you ever experience a <span lang="fr">dejà vu</span> effect?</p>
</blockquote>

Resulting markup with cursor position:

<blockquote lang="en">
<p>Have you ever had a <span lang="fr">dejà vu</span> effect.</p>
</blockquote>|

b) to change the value of the lang attribute

Highlighted block:

<blockquote lang="en">
<p>Hattest du jemals einen <span lang="fr">dejà vu</span>-Effekt?</p>
</blockquote>

Resulting markup with cursor position:

<blockquote lang="de">
<p>Hattest du je einen <span lang="fr">dejà vu</span>-Effekt.</p>
</blockquote>|

c) to remove the lang attribute

Highlighted block:

<blockquote lang="de">
<p>Hattest du jemals einen <span lang="fr">dejà vu</span>-Effekt?</p>
</blockquote>

Resulting markup with cursor position:

<blockquote>
<p>Hattest du je einen <span lang="fr">dejà vu</span>-Effekt.</p>
</blockquote>|

Case 7: The author highlights multiple block elements and selects a language

<p>Rats!</p>

<p>They fought the dogs and killed the cats,</p>

<p>And bit the babies in the cradles,</p>

<p>And ate the cheeses out of the vats,</p>

<p>And licked the soup from the cooks' own ladles,</p>

Resulting markup with cursor position:

<p lang="en">Rats!</p>

<p lang="en">They fought the dogs and killed the cats,</p>

<p lang="en">And bit the babies in the cradles,</p>

<p lang="en">And ate the cheeses out of the vats,</p>

<p lang="en">And licked the soup from the cooks' own| ladles,</p>

FAQ: How do I insert a line break instead of a paragraph?

Using the Enter key inserts a paragraph (<p>, <hx> or <pre>). Using shift-Enter will insert a line break (<br />).

You may also disable RTE Page TSConfig property EnterParagraphs. Then, Mozilla/Firefox browsers will behave in their native mode and pressing the Enter key will insert a br tag. However, Internet Explorer will continue to insert paragraphs on pressing the Enter key.

FAQ: How do I remove a link?

To remove a link, select the link and click on the “Insert/Modify link” button. At the top of the popup window, you have the option to remove the link.

FAQ: How do I delete a table?

You may proceed as follows:

click in any cell in the table;

in the editor status bar, displayed at the bottom of the editor frame, click on “table”;

press the “Delete” key or the “Backspace” key.

You may also proceed as follows:

click in any cell in the table;

click on the right button of the mouse or pointing device;

the context menu is displayed;

at the bottom of the context menu, you have the option to delete the TABLE element.

In Internet Explorer, you may also proceed as follows:

put the cursor just after the table and press the “Backspace” key;

or click on the border of the table and press the “Delete” key.

FAQ: How do I configure the editor to use my CSS styles?

In htmlArea RTE, the following style sheets apply to the contents of the editing area and are linked in the following order:

the htmlarea-edited-content.css file from the skin in use; it contains selectors for use in the editor, but not intended to be applied in the frontend;

a css file generated from the mainStyleOverride and inlineStyle assignments in Page TSConfig;

the css file specified by property contentCSS in Page TSConfig: you may define the styles you want to use in an external CSS file and assign the file name to this property.

An additional Page TSConfig property is recognized by htmlArea RTE: ignoreMainStyleOverride. If set, htmlArea will ignore the mainStyleOverride and inlineStyle sets of assignments and will use only files 1 and 3 mentioned above. This allows the Classic RTE to apply the css definitions defined in Page TSConfig and the htmlArea RTE to use the external css file (presumably containing the same or similar css definitions).

FAQ: Why does the text style selection list remain empty?

This selection list should display the classes specified by RTE.default.classesCharacter. The specified classes must be defined in the CSS style sheet contained in the file specified by RTE.default.contentCSS.

If RTE.default.classesCharacter is empty, classes associated with the span tag are used. Classes not associated with any tag in the contentCSS style sheet will be displayed only if

RTE.default.showTagFreeClasses = 1

FAQ: How can I define custom bullet images?

You can define custom bullet images in your style sheet.

For example, you may define the following styles:

ul { list-style-type: disc; list-style-image: url(/media/bullets/bullet1_n.gif); list-style-position: outside; }

li { padding-left:2px; }

FAQ: Is it possible to style the appearance of links in the RTE itself?

«In the front end, all links are rendered correctly, but in the RTE itself the links are shown in standard color (blue) with underline, except links I've already visited. These are in black with underline and a hover effect. If I add new links, it's the same: Visited links become black, unvisited blue. The rest of the style sheet is parsed without problems. Any hints?»

This is a Mozilla/Firefox feature. In the editing area, the link attributes defined in the browser user profile take precedence over the corresponding attributes specified in your style sheet. Apparently, these preferences cannot be neutral.

In an editing area displayed by Internet Explorer, the style sheet specification is applied to the link.

You can force (not only) Firefox to take your style sheet rather than the user preference settings via the !important rule. Check this out for example:

a:link, a:visited{

text-decoration:none !important;

color:#c00 !important;

}

Now your links should turn red and the text-decoration should be gone. If you are using the same style sheet in the frontend and in the RTE, you can avoid forcing your link style on all frontend users by restricting it to the RTE editing area. Using the same example as above:

.htmlarea-content-body a:link, .htmlarea-content-body a:visited {

text-decoration:none !important;

color:#c00 !important;

}

FAQ: How can I use a Bengali Open Type font in the editor?

Since Bengali is not well supported by all browsers, the recommended approach would be to add the Bengali font in the list of font families specified on the body selector of the RTE.default.contentCSS stylesheet. For example:

body { font-family: Verdana, sans-serif, Likhan; }

For some reason, with some fonts, the lines may overlap when using larger font sizes. It is the case with the Bengali Likhan font in Firefox 1.0.2. This may also be corrected through the stylesheet. For example:

body { font-family: Verdana, sans-serif, Likhan; line-height: 1.4; }

Note that, when using the Bengali Likhan font, a line-height with em or % unit may not produce any effect in Firefox 1.0.2.

FAQ: How do I configure the RTE to keep my custom tag?

Add the following lines to your Page TSConfig:

RTE.default.proc.allowTags = list-of-allowed-tags

RTE.default.proc.HTMLparser_rte.tags.mycustomtag.protect =1

where

list-of-allowed-tags is the list of all allowed tags, including your custom tag, and

mycustomtag is the name of your tag.

FAQ: Why is the class attribute on table tags always rendered as contenttable in the front end?

«Typo3 always replaces the class I selected in the RTE for a table with the class "contenttable". Do you have an idea how to switch that off?»

Assuming that you have installed extension CSS Styled Content (css_styled_content), add the following line in your TS template Setup field:

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list >

The contenttable class will then be added only if no class is specified for the table.

FAQ: Why are abbr and acronym tags not correctly rendered in the front end?

Make sure that abbr and acronym are included in the list:

styles.content.links.allowTags

in your TS template constants.

FAQ: Why are popup windows too small when they open?

We have tried to make sure that all popup windows open with usable dimensions. Since the contents of the windows may be variable and may be localized, it is difficult to ensure that all windows will open with the correct size in all languages. Therefore, the editor will try to adjust the width and height of the windows to their specific contents and to center the windows on the screen.

In some OS/browser configurations, the editor may be prevented from resizing and moving the windows due to lack of privileges:

If you use a Firefox browser, select through the browser menu Tools -> Options -> Web Characteristics -> Javascript -> Advanced, and check the options that allows scripts to Hide the status bar and that allow scripts to resize and move windows. Popup windows should then open with the correct size.

If you use IE6 on Windows XP SP2, select through the browser menu Tools -> Internet Options -> Security -> Trusted Sites, and add the url of TYPO3 site to the list of trusted sites. Popup windows should then open with the correct size.

FAQ: Why is the editor not displayed with full width when I use the full window wizard?

If you are editing the most usual content element, that is the bodytext column of tt_content table, try to add the following line to your Page TSConfig:

TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 100%

Note that this setting is now included in the default configuration of the extension.

If editing some other column, use the same model:

TCEFORM.my_table_name.my_column_name.RTEfullScreenWidth= 100%

FAQ: Is it possible to disable the “New magic image”?

You may disable the magic image option in the TYPO3 «Insert/modify image» popup window with the following statement in Page TSConfig:

RTE.default.blindImageOptions = magic

Other options that may be added to this list are: plain and dragdrop.

FAQ: Why are images not displayed in the RTE?

If you are using Mozilla or Firefox, you may have set the preference not to display images or to display images only from the originating site.

FAQ: Why do style selector boxes remain disabled in IE?

When using IE, make sure that the browser cache setting is set to Automatic. In particular, with recent versions of Windows xp sp2, do not use the setting “On every visit to the page”.

FAQ: Why can't I get all buttons to be displayed?

User TSConfig restricts the user to a specified set of buttons; therefore, for access to all buttons without restriction, in User TSConfig, set: options.RTEkeyList = *

Page TSConfig adds the buttons required to edit the table and field you wish to edit; therefore, to add all buttons by default, in Page TSConfig, set RTE.default.showButtons = *

If you are trying to edit the bodytext field of a content element from table tt_content, then the TCA field types and palettes may specify a list of buttons to add; this specification takes precedence over RTE.default.showButtons; to override any such setting in TCA for the bodytext field of table tt_content, in Page TSConfig, set RTE.config.tt_content.bodytext.showButtons = *

If you are trying to edit a text field from another table, then, in Page TSConfig, set RTE.config.tableName.columnName.showButtons = *

Buttons textcolor, bgcolor, fontstyle and fontsize are enabled only if «Enable features that use the style attribute> is checked in the extension manager.

If extension static_info_tables is not installed, the spellcheck, language and acronym buttons are not enabled.

If the encoding of the content element is not either iso-8859-1 or utf-8, the spellcheck button is not enabled.

Buttons user and acronym are never available in the front end.

Button unlink is not available if button link is not available.

None of the table operations buttons are available is the button table is not available.

Safari does not support the paste button.

Opera does not support the copy, cut and paste buttons.

FAQ: Why does it take so long to load the editor in Internet Explorer?

Try to adjust your IE browser cache settings:

From the IE main menu, navigate to: Tools -> Internet Options -> General -> button: Configure... or in some other IE versions: Extras -> Internet Options : Temporary Files -> button: Advanced

Select the radio button Automatic.

Some server configuration settings may also help working around Internet Explorer caching problems. See the Server Configuration section and the Tutorial section of this document.

FAQ: What hotkeys are available in htmlArea RTE?

Hoykeys maybe be configured for most buttons in Page TSConfig. The following hotkeys are defined by default, but may be reconfigured:

ctrl+l	:	Justify Left (if the corresponding button is configured in the toolbar of the RTE)

ctrl+e	:	Justify Center (if the corresponding button is configured in the toolbar of the RTE)

ctrl+r	:	Justify Right (if the corresponding button is configured in the toolbar of the RTE)

ctrl+j	:	Justify Full (if the corresponding button is configured in the toolbar of the RTE)

ctrl+n	:	Format block as Paragraph (if the corresponding select box is configured in the toolbar of the RTE)

ctrl+1	:	Format block as Heading 1 (if the corresponding select box is configured in the toolbar of the RTE)

ctrl+2	:	Format block as Heading 2 (if the corresponding select box is configured in the toolbar of the RTE)

ctrl+3	:	Format block as Heading 3 (if the corresponding select box is configured in the toolbar of the RTE)

ctrl+4	:	Format block as Heading 4 (if the corresponding select box is configured in the toolbar of the RTE)

ctrl+5	:	Format block as Heading 5 (if the corresponding select box is configured in the toolbar of the RTE)

ctrl+6	:	Format block as Heading 6 (if the corresponding select box is configured in the toolbar of the RTE)

The following hotkeys are predefined and reserved:

ctrl+a	:	Select all

ctrl+z	:	Undo (if the corresponding button is configured in the toolbar of the RTE)

ctrl+y	:	Redo (if the corresponding button is configured in the toolbar of the RTE)

ctrl+x	:	Cut

ctrl+c	:	Copy

ctrl+v	:	Paste

ctrl+0	:	Clean Word

ctrl+space:	Insert a non-breaking space

Configuration

Installing the RTE

The extension is a system extension and is installed by default when TYPO3 is installed.

Use the Extension Manager to un-install/re-install the extension.

The extension may be installed as a system, global or local extension.

You may be requested to uninstall the following extension: rte_conf.

If you plan to use the spell checking feature, you should install extension Static Info Tables (static_info_tables). The spell checker feature requires GNU Aspell 0.60+ to be installed on the server.

Custom elements presented by the User Elements feature may be maintained with extension Custom Tags (extension key: de_custom_tags).

Note that the installation dialog will request to create table tx_rtehtmlarea_acronym; this table is used by theAcronym feature.

Upon installation directory uploads/tx_rtehtmlarea will be created. Personal dictionaries are stored in subdirectories of this directory.

Upon installation, if RTE has not yet been enabled with the TYPO3 Install tool, it will be automatically enabled:

$TYPO3_CONF_VARS['BE']['RTEenabled'] = 1;

Extension configuration variables

The Extension Manager installation dialog allows to set the following extension configuration variables:

Default configuration settings: let you choose a set of default Page TSConfig and User TSConfig settings; select Typical (Most commonly used features are enabled. Select this option if you are unsure which one to use.) for the typical site requirements; select Minimal (Most features disabled. Administrator needs to enable them using TypoScript. For advanced administrators only.) for minimal settings; select Demo (Show-off configuration. Includes pre-configured styles. Not for production environments.) to explore some of the available features; default value is Typical;

Enable images in the RTE: if this boolean variable is set, the use of images in the “Minimal” or the "Typical" default configuration of the RTE will be enabled.

Enable additional inline elements: If set, the potential use of additional inline elements will be enabled.

Enable features that use the style attribute: If set, the potential use of features that use the style attribute (color, fontstyle, fontsize) will be enabled.

Enable the DAM media browser: if this boolean variable is set and if the DAM extension is installed, the DAM media browser will be used by the Insert image dialogue and in the file and upload tabs of the Insert link dialogue; this variable is DEPRECATED for DAM 1.1+: use DAM extension configuration variable instead;

Enable links accessibility icons: if this boolean variable is set, accessibility icons may be added to links. See Page TSConfig property RTE.classesAnchor;

Enable troubleshooting mode: if this boolean variable is set, a troubleshooting log will be displayed below the editing area; default value is 0;

Enable compressed scripts: if this boolean variable is set, the compressed version of the editor scripts will be used; default value is 1; disabling compressed scripts is useful only in troubleshooting mode.

If the SpellChecker is not enabled, then the remaining configuration variables are irrelevant; note that if extension static_info_tables is not installed, SpellCheker will not be enabled.

List of Aspell dictionaries: the list of dictionaries available to the Spell Checker feature; this list is used only if safe_mode is enabled; if safe_mode is not enabled, the list is automatically obtained from Aspell: default value is 'en'; this variable is DEPRECATED: use Page TSConfig properties buttons.spellcheck.dictionaries.items and restrictToItems;

Default Aspell dictionary: the default dictionary to be used by the Spell Checker feature; this should be set to the default language of the site; default value is 'en'; this variable is DEPRECATED: use Page TSConfig properties defaultContentLanguage and buttons.spellcheck.dictionaries.[language-iso-code].defaultValue;

No spell checking languages: the list of languages for which Aspell does not provide spell checking (see Unsupported Languages) and for which the Spell Checker feature will therefore be disabled (not shown in the RTE tool bar); default value is 'ja, km, ko, lo, th, zh, b5, gb';

Aspell directory: the server directory in which Aspell is installed; default value is “/usr/bin/aspell”;

Force Aspell command mode: if this boolean variable is set, the Aspell command interface will be used; this may be useful when PHP is compiled with pspell, but with an old version of Aspell, and a newer version is available in another directory; if set, PHP safe mode should NOT be enabled; default value is 0.

User TSConfig

Upon installation, the extension will set default properties in User TSConfig as specified by the extension configuration variable: Default configuration settings. Three default configurations are available: Minimal, Typical, and Demo. These default configurations are documented in the next section of the present document.

These properties may be modified for any particular BE user or BE user group, with the Typo3 User Admin Tool. Properties of User TSConfig are documented in this document: http://typo3.org/documentation/document-library/doc_core_tsconfig/User_TSconfig/

Property:	Data type:	Description:
setup.default.edit_RTE	boolean	Specifies that RTE editing should be enabled or disabled by default for all users.
options.RTEkeyList	list of id-strings	Specifies the list of RTE buttons to which the BE user or BE user group is restricted. Default: * (means all) Note: For the list of possible buttons, see property showButtons of Page TsConfig.
options.clearCache.clearRTECache (htmlArea RTE only)	boolean	Enables the option «Clear RTE Cache» in the Clear Cache menu. Note: The option is always available to an admin user.
options.HTMLAreaPspellMode (htmlArea RTE only)	string	Specifies the mode of spelling suggestions. Possible values are: ultra, fast, normal or bad-spellers. Default: normal Note: For more information on spelling suggestions modes, see Notes on the Different Suggestion Modes ).
options.enablePersonalDicts (htmlArea RTE only)	boolean	Enables the personal dictionaries feature for the user or user group, when the feature is enabled in Page TSConfig. Default: 0 Note: The option is ignored if PHP safe_mode is enabled. Note: The feature must also be enabled in Page TSConfig.
options.uploadFieldsInTopOfEB	boolean	Inserts a file uploader on the 'file' tab of the Insert/Modify link dialogue as well as on the magic, plain and dragdrop tabs of the Insert/modify image dialogue. Note: This applies only when buttons.link.TYPO3Browser.disabled and/or buttons.image.TYPO3Browser.disabled is not set. Default: 0
options.createFoldersInEB	boolean	If set, a create folders option appears in the TYPO3 file browser. Note: This applies only when buttons.link.TYPO3Browser.disabled and/or buttons.image.TYPO3Browser.disabled is not set. Note: For admin-users this is always enabled. Default: 0
options.noThumbsInRTEimageSelect	boolean	If set, then image thumbnails are not shown in the image selector. Default: 0
options.RTESmallWidth options.RTESmallHeight (htmlArea RTE only)	pixels	Width and height of the editor area when edit_wideDocument is NOT set. Default: RTESmallWidth = 530, RTESmallHeight = 380
options.RTELargeWidthIncrement options.RTELargeHeightIncrement (htmlArea RTE only)	pixels	Increments applied to the width and height of the editor area when edit_wideDocument IS set. Default: RTELargeWidthIncrement= 150, RTELargeHeilghtIncrement = 0
page.RTE.default.buttons.formatblock.restrictToItems (htmlArea RTE only)	list of id-strings	List of options to which the user will be restricted in the block formating drop-down list. The available options are: p, h1, h2, h3, h4, h5, h6, pre, address, blockquote, div
page.RTE.default.buttons.formattext.restrictTo (htmlArea RTE only)	list of id-strings	Restricts the availability of options, or inline element types, in the text formating drop-down list. Default: * (means all)

Page TSConfig

Upon installation, the extension will set default properties in Page TSConfig as specified by the extension configuration variable: Default configuration settings. Three default configurations are available: Minimal, Typical, and Demo. These default configurations are documented in the next section of the present document.

These properties may be modified in the PageTS Config of your page; this is most often done on the root page of your site.

classes:

Properties of each class available in the RTE.

Property:	Description:
classes.[classname]	Defines the classes available in the RTE. classname is the actual name of the style-class you are configuring. Notice you must specifically assign the classes to the various facilities also. See later. Properties: .name = label of the class (may be a reference to an entry in a localization file of the form LLL:EXT:[fileref]:[labelkey]) .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. # specification of alternating classes for rows and/or columns of a table .alternating { rows { startAt = int+ (default = 1) oddClass = class-name evenClass = class-name oddHeaderClass = class-name evenHeaderClass = class-name } columns { startAt = int+ (default = 1) oddClass = class-name evenClass = class-name oddHeaderClass = class-name evenHeaderClass = class-name } } # specification of counting classes for rows and/or columns of a table .counting { rows { startAt = int (default = 1) rowClass = class-name (should not be a substring of other class names) rowLastClass = class-name rowHeaderClass = class-name (should not be a substring of other class names) rowHeaderLastClass = class-name } columns { startAt = int (default = 1) columnClass = class-name(should not be a substring of other class names) columnLastClass = class-name columnHeaderClass = class-name(should not be a substring of other class names) columnHeaderLastClass = class-name } } Example: # General configuration of the available classes: RTE.classes { mainBodyText { name = Body Text (Primary) value = font:bold; color:blue; } } # Specific configuration for the Character/Text Style menu: RTE.default.classesCharacter = mainBodyText
	Example: # Hidding an allowed class in the class selector dropped downlist RTE.classes.class-name.value = display: none; Example: # Configuration of an alternating and counting class RTE.classes.countingtable { name = Counting class alternating { rows { startAt = 1 oddClass = tr-odd evenClass = tr-even oddHeaderClass = thead-odd evenHeaderClass = thead-even } columns { startAt = 1 oddClass = td-odd evenClass = td-even oddHeaderClass = th-odd evenHeaderClass = th-even } } counting { rows { startAt = 1 rowClass = tr-count- rowLastClass = tr-last rowHeaderClass = thead-count- rowHeaderLastClass = thead-last } columns { startAt = 1 columnClass = td-count- columnLastClass = td-last columnHeaderClass = th-count- columnHeaderLastClass = th-last } } } Example: # Hidding an allowed counting class in the class selector dropped downlist # Note the ending hyphen « - » # The class name string should be as specified in the counting property RTE.classes.counting-class-name-.value = display: none;

[page:RTE]

mutuallyExclusiveClasses:

Lists of mutually exclusive or incompatible classes.

Property:	Data type:	Description:
mutuallyExclusiveClasses.[label] (htmlArea RTE only)	list of id-strings	Defines a set of classes that are mutually exclusive An element may have only one of the listed classes assigned to it at any given time.

[page:RTE]

colors:

Properties of each color available in the RTE.

Property:	Description:
colors.[id-string]	Defines the colors available in the RTE. Properties: .name = Label of the color in menu .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

[page:RTE]

fonts:

Properties of each font available in the RTE.

Property:	Description:
fonts.[id-string]	Defines the fonts available in the RTE. Properties: .name = Label of the font in menu (may be a reference to an entry in a localization file of the form LLL:EXT:[fileref]:[labelkey]) .value = The font face value (comma-separated list of font-family names; if a font-family name contains spaces, it should be quoted with single quotes) 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.buttons.fontstyle.addItems = face2 , face1, noFace

[page:RTE]

fontSizes:

Properties of each font size available in the RTE.

Property:	Description:
fontSizes.[id-string] (htmlArea RTE only)	Defines the font sizes available in the RTE. Properties: .name = Label of the font size in menu (may be a reference to an entry in a localization file of the form LLL:EXT:[fileref]:[labelkey]) .value = The font size value Example: # General configuration of the available font sizes: RTE.fontSizes { size1 { name = Large value = 16px } size2 { name = Small value = 8px } } # Specific setting for the fontsyze selector: RTE.default.buttons.fontsize.addItems = size1, size2

[page:RTE]

RTE interface configuration objects:

These objects contain the actual configuration of the RTE interface.

Property:	Description:
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.

[page:RTE]

RTE interface configuration properties:

These properties may be set for each RTE interface configuration object.

Property:	Data type:	Description:
disabled	boolean	If set, the editor is disabled.
showButtons	list of id-strings	List of buttons that should be shown in the editor toolbar. Note: showButtons = * shows all available buttons. In the case of htmlArea RTE: Available buttons are: blockstylelabel, blockstyle, textstylelabel, textstyle, fontstyle, fontsize, formatblock, blockquote, insertparagraphbefore, insertparagraphafter, lefttoright, righttoleft, language, showlanguagemarks, left, center, right, justifyfull, orderedlist, unorderedlist, definitionlist, definitionitem, outdent, indent, formattext, bidioverride, big, bold, citation, code, definition, deletedtext, emphasis, insertedtext, italic, keyboard, monospaced, quotation, sample, small, span, strikethrough, strong, subscript, superscript, underline, variable, textcolor, bgcolor, textindicator, emoticon, insertcharacter, line, link, unlink, image, table, user, acronym, findreplace, spellcheck, chMode, inserttag, removeformat, copy, cut, paste, undo, redo, showhelp, about, toggleborders, tableproperties, tablerestyle, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columnproperties, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge Note: Buttons textcolor, bgcolor, fontstyle and fontsize are enabled only if «Enable features that use the style attribute> is checked in the extension manager. Note: If extension static_info_tables is not installed, the spellcheck, language and acronym buttons are not enabled. Note: If the encoding of the content element is not either iso-8859-1 or utf-8, the spellcheck button is not enabled. Note: Buttons user and acronym are never available in the front end. Note: Button unlink is not available if button link is not available. Note: None of the table operations buttons are available is the button table is not available. Note: Safari does not support the paste button. Note: Opera does not support the copy, cut and paste buttons.
hideButtons	list of id-strings	List of buttons that should not be shown in the editor toolbar.
toolbarOrder (htmlArea RTE only)	list of id-strings	Specifies the order and grouping of buttons in the RTE tool bar. The keywords space, bar and linebreak may be used to insert a space, a separator or a line break at the corresponding position in the tool bar. Default: blockstylelabel, blockstyle, space, textstylelabel, textstyle, linebreak, bar, formattext, bold, strong, italic, emphasis, big, small, insertedtext, deletedtext, citation, code, definition, keyboard, monospaced, quotation, sample, variable, bidioverride, strikethrough, subscript, superscript, underline, span, bar, fontstyle, space, fontsize, bar, formatblock, blockquote, insertparagraphbefore, insertparagraphafter, bar, lefttoright, righttoleft, language, showlanguagemarks, bar, left, center, right, justifyfull, bar, orderedlist, unorderedlist, definitionlist, definitionitem, outdent, indent, bar, textcolor, bgcolor, textindicator, bar, emoticon, insertcharacter, line, link, unlink, image, table, user, acronym, bar, findreplace, spellcheck, bar, chMode, inserttag, removeformat, bar, copy, cut, paste, bar, undo, redo, bar, showhelp, about, linebreak, toggleborders, bar, tableproperties, tablerestyle, bar, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, bar, columnproperties, columninsertbefore, columninsertafter, columndelete, columnsplit, bar, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
keepButtonGroupTogether (htmlArea RTE only)	boolean	Specifies that all buttons of a button group are displayed on the same line of the tool bar. A button group is delimited by a linebreak or by a bar. Default: 0 Note: If enabled, the setting is honored only by Mozilla/Firefox and Safari. It is ignored when the browser is Internet Explorer, Opera or Mozilla 1.3.
defaultContentLanguage	string	ISO code of default language of content elements. This language is used by RTE features that insert content, usually in the form of values of html tag attributes, when the language of the content element is not specified. This property applies to TYPO3 BE only. Default: en Note: Any value other than 'en' requires Static Info Tables to be installed.
disableContextMenu (htmlArea RTE only)	boolean	Specifies that the context menu should be disabled or not. Default: 0 Note: This property is a synonymous of disableRightClick property.
disableRightClick	boolean	If set, the right click (context) menu of the RTE is disabled.
contextMenu.showButtons	list of id-strings	List of buttons that should be shown in the context menu For the list of available buttons see property showButtons above. Default: If not specified, all buttons available in the editor toolbar will appear in the context menu, unless they are removed by property contextMenu.hideButtons. Note: Drop-down lists or select boxes will not be shown in the context menu. Note: The buttons must be enabled in the editor toolbar. Note: The buttons will appear in the same order as in the editor toolbar (see property toolbarOrderabove).
contextmenu.hideButtons	list of id-strings	List of buttons that should not be shown in the context menu.
contextMenu.maxHeight	int+	Maximum height of the context menu in pixels. Default: 300
showStatusBar (htmlArea RTE only)	boolean	Specifies that the editor status bar should be displayed or not. Default: 0 Note: showStatusBar is set to 1 in the Typical and Demo default configurations (see chapter on default configurations).
buttons.formatblock.orderItems (htmlArea RTE only)	list of id-strings	Specifies the order in which the block element types are presented in the block formating drop-down list. The standard block element types are: p, h1, h2, h3, h4, h5, h6, pre, address, blockquote, div The list may also contain custom items as specified by the buttons.formatblock.addItems property. If not set, the default order will be alphabetical, in the language of the current backend user. Note: If set, any option not in the list will be removed from the drop-down list.
buttons.formatblock.removeItems (htmlArea RTE only)	list of id-strings	List of options to be removed from the block formating drop-down list. The default items are: p, h1, h2, h3, h4, h5, h6, pre, address, blockquote, div Note: This is a synonym of hidePStyleItems.
buttons.formatblock.addItems (htmlArea RTE only)	list of id-strings	List of custom options to be added to the block formating drop-down list. Each of the added items should be configured.
hidePStyleItems	list of id-strings	List of options to be removed from the block formating drop-down list. The deafult options are: p, h1, h2, h3, h4, h5, h6, pre, address, blockquote, div In the case of htmlArea RTE, this is a synonym of buttons.formatblock.removeItems.
buttons.formatblock.items.[item-name].label (htmlArea RTE only)	string	Alternative label for the option identified by the item name in the block formating drop-down list. Note: The string may be a reference to an entry in a localization file of the form LLL:EXT:[fileref]:[labelkey]
buttons.formatblock.items.[item-name].addClass (htmlArea RTE only)	string	A class name to be assigned to the blocks whenever the item is applied to selected text. Note: The specified class should be allowed on elements of the block type (using property RTE.default.buttons.blockstyle.tags.[tagName].allowedClasses).
buttons.formatblock.items.[item-name].tagName (htmlArea RTE only)	string	A tag name to be assigned to the block elements whenever the (custom) item is applied to selected text. The value of this property must be equal to one of the standard block element types. Note: [item-name] must not be a standard block tag name. Note: If [item-name] also has property addClass, then the specified class should be allowed on elements of block type tagName (using property RTE.default.buttons.blockstyle.tags.[tagName].allowedClasses).
buttons.formatblock.prefixLabelWithTag (htmlArea RTE only)	boolean	If set, the option label in the block formating drop-down list is prefixed with the tagname. Default: 0
buttons.formatblock.postfixLabelWithTag (htmlArea RTE only)	boolean	If set, the option label in the block formating drop-down list is postfixed with the tagname. Default: 0
buttons.formatblock.items.[item-name].hotKey (htmlArea RTE only)	character	A hotkey will be associated with the option of the block formating drop-down list identified by the item name.
buttons.indent.useClass (htmlArea RTE only)	string	Class name to be used when indenting by means of div sections with class attribute. Default: indent
buttons.indent.useBlockquote (htmlArea RTE only)	boolean	If set, indentation will be produced by means of blockquote tags instead of div sections with class attribute. Default: 0
buttons.left.useClass (htmlArea RTE only)	string	Class name to be used when aligning blocks of text to the left by means of class attribute. Default: align-left Note: This property is also used for text aligment in table operations.
buttons.center.useClass (htmlArea RTE only)	string	Class name to be used when centering blocks of text by means of class attribute. Default: align-center Note: This property is also used for text aligment in table operations.
buttons.right.useClass (htmlArea RTE only)	string	Class name to be used when aligning blocks of text to the right by means of class attribute. Default: align-right Note: This property is also used for text aligment in table operations.
buttons.justifyfull.useClass (htmlArea RTE only)	string	Class name to be used when justifying blocks of text to both left and right by means of class attribute. Default: align-justify Note: This property is also used for text aligment in table operations.
buttons.left.useAlignAttribute buttons.center.useAlignAttribute buttons.right.useAlignAttribute buttons.justifyfull.useAlignAttribute (htmlArea RTE only)	boolean	If anyone of these four properties is set, alignment will be produced by means of align attributes instead of class attributes. Default: 0
buttons.blockstyle.tags.[tag-name].allowedClasses (htmlArea RTE only)	list of id-strings	Specifies the classes allowed for the block element identified by the tag name. Any string in the list may contain wild card characters. The wild card character is “*” and stands for any sequence of characters. The classes must also be defined, using the specific tag selector, either in one of the occurrences of the inlineStyle property or in the CSS file specified by the contentCSS property. If the property is empty for any tag, classes associated with the given tag in either the inlineSyle properties or in the contentCSS file are used. The classes are presented in the drop-down list in alphabetical order in the language used by the backend user. buttons.blockstyle.tags.div.allowedClasses is a synonym of property classesParagraph (see below) and overrides it, if present. buttons.blockstyle.tags.table.allowedClasses is a synonym of property classesTable (see below) and overrides it, if present. buttons.blockstyle.tags.td.allowedClasses is a synonym of property classesTD (see below) and overrides it, if present.
buttons.blockstyle.tags.all.allowedClasses (htmlArea RTE only)	list of id-strings	Specifies the classes allowed for all block elements, in addition to the classes allowed for each specific element (see above). The classes must also be defined, without any tag selector, either in one of the occurrences of the inlineStyle property or in the CSS file specified contentCSS property. The classes are presented in the drop-down list in alphabetical order in the language used by the backend user.
classesParagraph	list of id-strings	In the case of htmlArea RTE: This property is a synonym of buttons.blockstyle.tags.div.allowedClasses (see above). In the case of the Classic RTE: Specifies the classes available in the Block Style selector. The classes defined in the 'classesParagraph' value are prepended to the types of paragraphs options. They are inserted as <DIV>-tags with a class-parameter.
classesTable	list of id-strings	Classes available for tables. See description of 'classesCharacter'. In the case of htmlArea RTE, each of the listed class must be defined either in one of the occurrences of the inlineStyle property or in the CSS file specified contentCSS property. In the case of htmlArea RTE, the same list of classes is used in the class selection list of the Table Properties dialog. In the case of htmlArea RTE, this property is overridden by property buttons.blockstyle.tags.table.allowedClasses, if present.
classesTD	list of id-strings	Classes available for tablecells. See description of 'classesCharacter'. In the case of htmlArea RTE, each of the listed class must be defined either in one of the occurrences of the inlineStyle property or in the CSS file specified contentCSS property. In the case of htmlArea RTE, the same list of classes is used in the class selection list of the Cell Properties dialog. In the case of htmlArea RTE, this property is overridden by property buttons.blockstyle.tags.td.allowedClasses, if present.
buttons.blockstyle.showTagFreeClasses (htmlArea RTE only)	boolean	Specifies that classes not associated with any tag in the contentCSS style sheet should be or should not be shown in the block style drop-down list. Default: 0 Note: See also property showTagFreeClasses.
buttons.blockstyle.prefixLabelWithClassName (htmlArea RTE only)	boolean	If set, the option name in the block style drop-down list is prefixed with the class name. Default: 0
buttons.blockstyle.postfixLabelWithClassName (htmlArea RTE only)	boolean	If set, the option name e in the block style drop-down list is postfixed with the class name. Default: 0
buttons.formattext.orderItems (htmlArea RTE only)	list of id-strings	Specifies the order in which the options, or inline element types, are presented in the text formating drop-down list. If not set, the default order will be alphabetical, in the language of the current backend user.
buttons.formattext.removeItems (htmlArea RTE only)	list of id-strings	List of options to be removed from the text formating drop-down list using same names as toolbar elements.
buttons.formattext.prefixLabelWithTag (htmlArea RTE only)	boolean	If set, the option name in the text formating drop-down list is prefixed with the tagname. Default: 0
buttons.formattext.postfixLabelWithTag (htmlArea RTE only)	boolean	If set, the option name e in the text formating drop-down list is postfixed with the tagname. Default: 0
buttons.textstyle.tags.[tag-name].allowedClasses (htmlArea RTE only)	list of id-strings	Specifies the classes allowed for each inline element (tag) in the text styling drop-down list. Any string in the list may contain wild card characters. The wild card character is “*” and stands for any sequence of characters. Supported tags are: abbr, acronym, b, bdo, big, cite, code, del, dfn, em, i, ins, kbd, q, samp, small, span, strike, strong, sub, sup, tt, u, var The classes must also be defined either in one of the occurrences of the inlineStyle property or in the CSS file specified contentCSS property. If the property is empty for any tag, classes associated with the given tag in either the inlineSyle properties or in the contentCSS file are used. The classes are presented in the textstyle drop-down list in alphabetical order in the language used by the backend user.
buttons.textstyle.tags.all.allowedClasses (htmlArea RTE only)	list of id-strings	Specifies the classes allowed for all inline elements, in addition to the classes allowed for each specific element (see above). The classes must also be defined either in one of the occurrences of the inlineStyle property or in the CSS file specified contentCSS property. The classes are presented in the drop-down list in alphabetical order in the language used by the backend user.
buttons.textstyle.showTagFreeClasses (htmlArea RTE only)	boolean	Specifies that classes not associated with any tag in the contentCSS style sheet should be or should not be shown in the text styling drop-down list. Default: 0
buttons.textstyle.prefixLabelWithClassName (htmlArea RTE only)	boolean	If set, the option name in the text styling drop-down list is prefixed with the class name. Default: 0
buttons.textstyle.postfixLabelWithClassName (htmlArea RTE only)	boolean	If set, the option name e in the text styling drop-down list is postfixed with the class name. Default: 0
classesCharacter	list of id-strings	In the case of htmlArea RTE: This property is a synonym of buttons.textstyle.tags.span.allowedClasses (see above). The classes must be defined either in one of the occurrences of the inlineStyle property or in the CSS file specified contentCSS property. If the property is empty, classes associated with the span tag in either the inlineSyle properties or in the contentCSS file are used. In the case of the Classic RTE: Specifies the classes available in the Character Style selector. 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.
showTagFreeClasses (htmlArea RTE only)	boolean	Specifies that CSS classes not associated with any tag in the contentCSS style sheet should be or should not be shown in the block style and the text style selection lists. Default: 0 Note: Setting this property to 1 is equivalent to setting both buttons.blockstyle.showTagFreeClasses and buttons.textstyle.showTagFreeClasses to 1.
disablePCexamples	boolean	If set, the examples of classes in Paragraph and Character selectors are disabled. Note: In the case of htmlArea RTE, the styling is removed on the options of the block styling and text styling drop-down lists.
buttons.language.restrictToItems (htmlArea RTE only)	list of strings	List of language ISO codes to which the language marking drop-down list is limited to. Note: If not set, all languages found in the static_languages table will appear in the drop-down list.
buttons.language.useLangAttribute (htmlArea RTE only)	boolean	If set, the lang attribute is used fro language marks. Default: 1 Note: If both useLangAttribute and useXmlLangAttribute are unset, the lang attribute will be used.
buttons.language.useXmlLangAttribute (htmlArea RTE only)	boolean	If set, the xml:lang attribute is used fro language marks. Default: 0
buttons.language.prefixLabelWithCode (htmlArea RTE only)	boolean	If set, the option name e in the language marking drop-down list is prefixed with the language ISO code. Default: 0
buttons.language.postfixLabelWithCode (htmlArea RTE only)	boolean	If set, the option name e in the language marking drop-down list is postfixed with the language ISO code. Default: 0
buttons.spellcheck.enablePersonalDictionaries (htmlArea RTE only)	boolean	If set, personal dictionaries are enabled. Default: 0 Note: The option is ignored if PHP safe_mode is enabled on the server. Note: The feature must also be enabled in User TSConfig. Note: Personal dictionaries are stored in subdirectories of uploads/tx_rtehtmlarea
buttons.spellcheck.dictionaries.items (htmlArea RTE only)	list-of-id-strings	The list of Aspell dictionary codes available to the spell checking feature. This list is used only if safe_mode is enabled. If safe_mode is not enabled, the list is automatically obtained from Aspell. Default: en
buttons.spellcheck.dictionaries.restrictToItems (htmlArea RTE only)	list-of-id-strings	List of Aspell dictionary codes to which the drop-down list of dictionaries is limited in the spell checker dialogue. Note: If not set, all dictionaries obtained from Aspell or, if safe_mode is enabled, all dictionaries listed in property buttons.spellcheck.dictionaries.items, will appear in the drop-down list.
buttons.spellcheck.dictionaries.[language-iso-code].defaultValue (htmlArea RTE only)	string	Aspell dictionary code of the dictionary to be used by default to spell check a content element in the language specified by the ISO code. The specified dictionary will be pre-selected in the drop-down list of dictionaries. Default: the language ISO code.
disableTYPO3Browsers (htmlArea RTE only)	boolean	If set, the TYPO3 element browser is disabled in both the image and link dialogues. Default: 0 Note: The TYPO3 element browser is not available when the editor is used in the TYPO3 front end.
classesImage	list of id-strings	Classes available for images. In the case of htmlArea RTE, each of the listed class must be defined either in one of the occurrences of the inlineStyle property or in the CSS file specified by contentCSS property. In the case of htmlArea RTE, the same list of classes is used in the class selection list of the Insert/Modify image dialog. In the case of the Classic RTE, see description of 'classesCharacter'.
buttons.image.TYPO3Browser.disabled (htmlArea RTE only)	boolean	If set, the TYPO3 image browser is disabled. Default: 0 Note: The TYPO3 image browser is never available when the editor is used in the frontend.
blindImageOptions	list of strings	List of tab items in the image selector to remove. Key list is magic, plain, dragdrop, image Note: If key image is in the list, the properties editing tab for any current image will not be presented. Note: If integration with DAM is enabled, upload is also a possible tab. Note: dragdrop is not available in Opera.
buttons.image.options.removeItems (htmlArea RTE only)	list of strings	List of tab items to remove from the dialog of the image button. Possible tab items are: magic, plain, dragdrop, image Note: If key image is in the list, the properties editing tab for any current image will not be presented. Note: If integration with DAM is enabled, upload is also a possible tab. Note: dragdrop is not available in Opera. Note: This property is a synonymous of property blindImageOptions.
buttons.image.options.magic.maxWidth (htmlArea RTE only)	int+	Maximum width of magic images in pixels. Default: 300
buttons.image.options.magic.maxHeight (htmlArea RTE only)	int+	Maximum height of magic images in pixels. Default: 1000 Note: By setting a large enough height, images should be resized based on their width.
buttons.image.options.plain.maxWidth (htmlArea RTE only)	int+	Maximum width of selectable plain images in pixels. Default: 640
buttons.image.options.plain.maxHeight (htmlArea RTE only)	int+	Maximum height of selectable plain images in pixels. Default: 680
buttons.image.title.useDAMColumn	string	Name of the column of the tx_dam table that will be used to set the image title attribute. Default: caption Note: This property is ignore if the extension configuration variable “Enable the DAM media browser” is not set.
buttons.image.properties.removeItems	list of strings	List of properties to remove from the image properties editing window. Key list is align, alt, border, class, clickenlarge, float, height, paddingTop, paddingRight, paddingBottom, paddingLeft, title, width Note: When a plain image is edited, if proc.plainImageMode is set to lockDimentions, lockRatio or lockRatioWhenSmaller, the height property is removed from the properties window. If proc.plainImageMode is set to lockDimensions, both the width and height properties are removed.
buttons.image.properties.class.default	string	Class to be assigned by default to an image when it is inserted in the RTE.
classesLinks	list of id-strings	Classes available for links. See description of 'classesCharacter'. In the case of htmlArea RTE, classesAnchor offers more options.
classesAnchor (htmlArea RTE only)	list of id-strings	Classes available in the Insert/Modify link dialog. These classes must be defined by the RTE.classesAnchor property. The anchor accessibility feature should be enabled using the Extension Manager.
classesAnchor.default.page (htmlArea RTE only)	string	The name of the default class selector for links to internal pages.
classesAnchor.default.url (htmlArea RTE only)	string	The name of the default class selector for links to external url's.
classesAnchor.default.file (htmlArea RTE only)	string	The name of the default class selector for links to files.
classesAnchor.default.mail (htmlArea RTE only)	string	The name of the default class selector for links to email addresses.
buttons.link.TYPO3Browser.disabled (htmlArea RTE only)	boolean	If set, the TYPO3 element browser is disabled. Default: 0 Note: The TYPO3 element browser is never available when the editor is used in the frontend.
defaultLinkTarget	string	This sets the default target for new links in the RTE. Note: See also the classesAnchor configuration.
blindLinkOptions	list of strings	List of tab items in the link selector to remove. Key list is page,file,url,mail,spec Note: More tabs may be provided by extensions such as DAM.
buttons.link.options.removeItems (htmlArea RTE only)	list of strings	List of tab items to remove from the dialog of the link button. Possible tab items are: page,file,url,mail,spec Note: More tabs may be provided by extensions such as DAM. Note: This property is a synonymous of property blindLinkOptions.
buttons.link.targetSelector.disabled (htmlArea RTE only)	boolean	If set, the selection of link target is removed from the link insertion/update dialog. Default : 0
buttons.link.popupSelector.disabled (htmlArea RTE only)	boolean	If set, the selection of a popup window as link target is removed from the link insertion/update dialog. Default: 0
buttons.link.pageIdSelector.enabled (htmlArea RTE only)	boolean	If set, the specification of a page id, without using the page tree, is enabled in the link insertion/update dialog. Note: This feature is intended for authors who have to deal with a very large page tree. Note that the feature is disabled by default. Default: 0
buttons.link.queryParametersSelector.enabled (htmlArea RTE only)	boolean	If set, an additional field is enabbled in the link insertion/update dialogue allowing authors to specify query parameters to be added on the link Default: 0
buttons.link.relAttribute.enabled (htmlArea RTE only)	boolean	If set, an additional field is enabled in the link insertion/update dialogue allowing authors to specify a rel attribute to be added to the link. Default: 0
buttons.link.properties.class.required (htmlArea RTE only)	boolean	If set, a class must be selected for any link. Therefore, the empty option is removed from the class selector.
buttons.link.[type].properties.class.required (htmlArea RTE only)	boolean	If set, a class must be selected for any link of the given type. Therefore, the empty option is removed from the class selector. Possible types are: page, file, url, mail, spec. More types may be provided by extensions such as DAM.
buttons.link.properties.title.readOnly (htmlArea RTE only)	boolean	If set, the title is set based on the RTE.classesAnchor configuration and cannot be modified by the author.
buttons.link.[type].properties.title.readOnly (htmlArea RTE only)	boolean	If set, the title for the given type of link is set based on the RTE.classesAnchor configuration and cannot be modified by the author. Possible types are: page, file, url, mail, spec. More types may be provided by extensions such as DAM.
buttons.acronym.pages	list of page id's	List of page id's from which to obtain the acronym records. Note: If not set, the list of current webmounts is used. Note: If no acronym records are found in the specified page id's, the acronym button will not be present in the toolbar. If no records of type acronym or abreviation are found, the corresponding tab of the acronym dialogue will not be disabled. Note: In IE, before IE7, the abreviation tab of the acronym dialogue is never shown.
buttons.acronym.recursive	int	The number of levels in the page tree, under each page listed in buttons.acronym.pages or under each webmount, from which acronyms are retrieved. Default: 0
buttons.acronym. lockBeUserToDBmounts	boolean	If set, the pid's listed under buttons.acronym.pages (see above) are validated against the user's current webmounts. If not set or if the user is admin, buttons.acronym.pages is ignored and acronyms from all pages are retrieved. Default: The default value of this property is the value of the property with same name in the backend section of theTYPO3 configuration as set by the Install Tool.
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 }
disableColorPicker	boolean	Disables the color picker matrix in all color dialogs. The color picker lets you select web-colors. Note: In the case of htmlArea RTE, this applies only when the TYPO3 configurable color selection dialog is enabled.
disableSelectColor (htmlArea RTE only)	boolean	If set, the TYPO3 configurable color selection dialogue is disabled. Default: 0
hideFontFaces	list of id-numbers, * removes all	Lets you remove any of the default font faces in the Font Style selector. Values are ranging from 1 to 9. These are the possible options, and their respective name => value pairs, that you can remove: 1: Arial => Arial,sans-serif 2: Arial Black => 'Arial Black',sans-serif 3: Verdana => Verdana,Arial,sans-serif 4: 'Times New Roman' => 'Times New Roman',Times,serif 5: Garamond => Garamond 6: Lucida Handwriting => Lucida Handwriting 7: Courier => Courier 8: Webdings => Webdings 9: Wingdings => Wingdings
fontFace	list of id-strings	Defines additional fonts generally available in the font selector. The id-strings must be configured in the RTE.fonts array (see description earlier).
buttons.fontstyle.removeItems (htmlArea RTE only)	list of id-numbers, * removes all	Lets you remove any of the default font faces in the Font Style selector. Values are ranging from 1 to 9. These are the possible options, and their respective name => value pairs, that you can remove: 1: Arial => Arial,sans-serif 2: Arial Black => 'Arial Black',sans-serif 3: Verdana => Verdana,Arial,sans-serif 4: 'Times New Roman' => 'Times New Roman',Times,serif 5: Garamond => Garamond 6: Lucida Handwriting => Lucida Handwriting 7: Courier => Courier 8: Webdings => Webdings 9: Wingdings => Wingdings Note: This property is synonymous to property hideFontFaces and overrides it if present.
buttons.fontstyle.addItems (htmlArea RTE only)	list of id-strings	Defines additional fonts available in the font selector. The id-strings must be configured in the RTE.fonts array (see description earlier). Note: This property is synonymous to property fontFace and overrides it if present.
buttons.fontstyle.defaultItem (htmlArea RTE only)	string	Specifies the name of the default font style. The name is the name of one of the default font faces, or the name associated to one of fonts configured in the RTE.fonts array (see description earlier). Note: The value associated to the default font style should be exactly the same as the value of the default font-family property specified in the site style sheet as referred to by property RTE.default.contentCSS.
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 to 7. These are the possible options, and their respective name => value pairs, that you can remove: 1: Extra small => 8px 2: Very small => 9px 3: Small => 10px 4: Medium => 12px 5: Large => 16px 6: Very large => 24px 7: Extra large => 32px
fontSize (htmlArea RTE only)	list of id-strings	Defines additional font sizes available in the font size selector. The id-strings must be configured in the RTE.fontSizes array (see description earlier).
buttons.fontsize.removeItems (htmlArea RTE only)	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 to 7. These are the possible options, and their respective name => value pairs, that you can remove: 1: Extra small => 8px 2: Very small => 9px 3: Small => 10px 4: Medium => 12px 5: Large => 16px 6: Very large => 24px 7: Extra large => 32px Note: This property is synonymous to property hideFontSizes and overrides it if present.
buttons.fontsize.addItems (htmlArea RTE only)	list of id-strings	Defines additional font sizes available in the font size selector. The id-strings must be configured in the RTE.fontSizes array (see description earlier). Note: This property is synonymous to property fontSize and overrides it if present.
buttons.fontsize.defaultItem (htmlArea RTE only)	string	Specifies the name of the default font size. The name is the name of one of the default font sizes, or the name associated to one of font sizes configured in the RTE.fontSizes array (see description earlier). Note: The value associated to the default font size should be exactly the same as the value of the default font-size property specified in the site style sheet as referred to by property RTE.default.contentCSS. For correct behaviour in non-IE browsers, the value of the default font size should be specified in px units.
hideTableOperationsInToolbar (htmlArea RTE only)	boolean	Specifies that table operations buttons should be hidden in the tool bar or not. Default: 0 Note: If enabled, table operations will appear only in the context menu, provided that they may be enabled in the given context.
keepToggleBordersInToolbar DEPRECATED!	boolean	This property is deprecated. Use property buttons.toggleborders.keepInToolbar
buttons.toggleborders.keepInToolbar (htmlArea RTE only)	boolean	If set, the toggleborders button will be kept in the tool bar even if property hideTableOperationsInToolbar is set. Default: 0
buttons.toggleborders.setOnTableCreation (htmlArea RTE only)	boolean	If set, and if the toggleborders button is enabled, the table borders will be toggled on when a new table is created. Default : 0
buttons.toggleborders.setOnRTEOpen (htmlArea RTE only)	boolean	If set, and if the toggleborders button is enabled, the table borders will be toggled on when the RTE opens. Default : 0
buttons.[button-name].hotKey (htmlArea RTE only)	character	A hotkey will be associated with the specified button-name. Note: Care should be taken that the hotkey does not conflict with pre-defined hotkeys. If it does, the hotkey will override any previously registered hotkey.
buttons.[button-name].width (htmlArea RTE only)	int+	The width of the field in the toolbar when the button is a dropdown list.
buttons.[button-name].listWidth (htmlArea RTE only)	int+	The width of the dropdown list when the button is a dropdown list. Defauls to the width of the field in the toolbar.
buttons.[button-name].maxHeight (htmlArea RTE only)	int+	The maximum height of the dropdown list when the button is a dropdown list.
buttons.[button-name].dialogueWindow.width (htmlArea RTE only)	int+	The opening width of the dialogue window opened when the button is pressed.
buttons.[button-name].dialogueWindow.height (htmlArea RTE only)	int+	The opening height of the dialogue window opened when the button is pressed.
buttons.[button-name].dialogueWindow.positionFromTop (htmlArea RTE only)	int+	The opening position from the top of the screen of the dialogue window opened when the button is pressed.
buttons.[button-name].dialogueWindow.positionFromLeft (htmlArea RTE only)	int+	The opening position from the left of the screen of the dialogue window opened when the button is pressed.
buttons.[button-name].dialogueWindow.doNotResize (htmlArea RTE only)	boolean	If set, the window that is opened when the button is pressed will not be resized to its contents. Default: 0
buttons.[button-name].dialogueWindow.doNotCenter (htmlArea RTE only)	boolean	If set, the window that is opened when the button is pressed will not be centered in the parent window. Default: 0
mainStyleOverride	string	By default the editor style section is set with the CSS-code below. However you may override this by this option. Default for Classic RTE: 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;} Default for htmlArea RTE: body.htmlarea-content-body { font-family: Verdana,sans-serif; font-size: 12px; color: black; background-color: white; } td { } div { } pre { } ol { } ul { } blockquote { } Note: In the case of htmlArea RTE, see also property ignoreMainStyleOverride.
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. Note: In the case of htmlArea RTE, see also property ignoreMainStyleOverride.
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. Note: In the case of htmlArea RTE, see also property ignoreMainStyleOverride.
inlineStyle.[any-keystring]	string	CSS code to be included in the editor style section. This will be included after the default code. Note: In the case of htmlArea RTE, see also property ignoreMainStyleOverride.
skin (htmlArea RTE only)	resource	The skin contains the CSS files and the images used to style the editor. The skin is specified by specifying the location of the main CSS file to be used to style the editor. The folder containing the CSS file MUST also contain a structure of folders and files identical to the structure found in the folder of the default skin. All folder names and all file names must be identical. Default: EXT:rtehtmlarea/htmlarea/skins/default/htmlarea.css Note: these example skins do not work in Mozilla 1.3; if the property is set to one of them, the default skin will be used when the browser is Mozilla 1.3. Note: See also property ignoreMainStyleOverride.
contentCSS (htmlArea RTE only)	resource	The CSS file that contains the style definitions that should be applied to the edited contents. The selectors defined in this file will also be used in the block style and text style selection lists. Default: EXT:rtehtmlarea/res/contentcss/default.css For example, this default could be overridden with: fileadmin/styles/my_contentCSS.css Note: See also property ignoreMainStyleOverride.
ignoreMainStyleOverride (htmlArea RTE only)	boolean	Instruct htmlArea RTE to ignore properties mainStyleOverride and inlineStyle. Default: 0 Note: In htmlArea RTE, the following style sheets apply to the contents of the editing area and are linked in the following order: 1. the htmlarea-edited-content.css file from the skin being used (contains selectors for use in the editor but not intended to be applied in the frontend); 2. a css file generated from the mainStyleOverride and inlineStyle assignments; 3. the css file specified by contentCSS in Page TSConfig. When ignoreMainStyleOverride is enabled, the middle style sheet is ignored and only the first and third style sheets are used.
proc	->PROC	Customization of the server processing of the content - also called 'transformations'. See http://typo3.org/documentation/document-library/core-documentation/doc_core_api/current/view/5/2/
enableWordClean (htmlArea RTE only)	boolean/ ->HTMLparser	Specifies that text pasted from external sources, presumably from Microsoft Word, should be “cleaned” or not. Default: 0 Note:If no HTMLparser configuration is specified, a limited default cleaning operation will be performed. If a HTMLparser specification is specified, parsing will be performed on the server at the time of the paste operation. Note: Additional cleanup may be performed by the user when the removeformat button is enabled. Note: This feature cannot be enabled in Opera. Note: The same cleaning operation is performed with hotkey CTRL+0, including in Opera.
enableWordClean.hotKey (htmlArea RTE only)	character	The default hotkey of the cleaning operation, CTRL+0, is replaced by CTRL+the specified character.
removeComments (htmlArea RTE only)	boolean	Specifies that html comments should be removed or not by the editor on save and on toggle to HTML source mode. Default: 0
removeTags (htmlArea RTE only)	list of tags	List of tags that should be removed by the editor on save and on toggle to HTML source mode.
removeTagsAndContents (htmlArea RTE only)	list of tags	List of tags that should be removed by the editor, contents included, on save and on toggle to HTML source mode. The tags and the contents inside the tags will be removed.
useCSS (htmlArea RTE only)	boolean	Specifies that Mozilla/Firefox should use style attributes or not. When enabled, Mozilla/Firefox use span tags with style attributes rather than tags such as b, i, font, etc. Default: 0
disableEnterParagraphs (htmlArea RTE only)	boolean	Specifies that the insertion of paragraphs when hitting the Enter key in Mozilla/Firefox and Safari should be disabled. Default: 0 Note: If NOT enabled, the behavior of Mozilla/Firefox and Safari is modified as follows: when the Enter key is pressed, instead of inserting a br tag, the behavior of Internet Explorer is simulated and a new paragraph is created. Note: If enabled, the behavior of Mozilla/Firefox and Safari is not modified: a br tag is inserted when the Enter key is pressed.
disableObjectResizing (htmlArea RTE only)	boolean	Specifies that Mozilla/Firefox should not provide handles for resizing objects such as images and tables. Default: 0
removeTrailingBR (htmlArea RTE only)	boolean	Specifies that trailing br tags should be removed from block elements. Default: 0 Note: If set, any trailing br tag in a block element will be removed on save and/or change mode. However, multiple trailing br tags will be preserved. Note: In Mozilla/Firefox/Netscape, whenever some text is entered in an empty block, a trailing br tag is added by the browser.
hideTags DEPRECATED!	list of tags	This property is deprecated. Use property buttons.inserttag.denyTags
buttons.inserttag.denyTags (htmlArea RTE only)	list of tags	List of tag names that should NOT be shown by the dialog of the inserttag button. Note: Listed tag names should be among the following: a, abbr, acronym, address, b, big, blockquote, cite, code, div, em, fieldset, font, h1, h2, h3, h4, h5, h6, i, legend, li, ol, p, pre, q, small, span, strong, sub, sup, table, tt, ul
buttons.inserttag.allowedAttribs (htmlArea RTE only)	list of attributes	List of attribute names that should be shown for all tags in the dialog of the inserttag button. Note: Listed attribute names should be among the following: class, dir, id, lang, onFocus, onBlur, onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, style, title, xml:lang
buttons.inserttag.tags.[tagname].allowedAttribs (htmlArea RTE only)	list of attributes	List of attribute names that should be shown for the specified tagname in the dialog of the inserttag button, in addition to the attribute names specified by property buttons.inserttag.allowedAttribs.
buttons.table.disableEnterParagraphs (htmlArea RTE only)	boolean	If set, this property will prevent the insertion of paragraphs in table cells when the enter key is pressed. Default: 0
buttons.table.enableHandles (htmlArea RTE only)	boolean	If set, table handles will be enabled in Firefox. These Firefox-specific handles allow to delete/insert rows and columns using small handles displayed on table borders. However, insert operations also add a style attribute on inserted cells. Default: 0
disableAlignmentFieldsetInTableOperations disableSpacingFieldsetInTableOperations disableColorFieldsetInTableOperations disableLayoutFieldsetInTableOperations disableBordersFieldsetInTableOperations (htmlArea RTE only)	boolean	Disables the corresponding fieldset in all table operations dialogues. Default: 0
buttons.table.removeFieldsets (htmlArea RTE only)	list of strings	List of fieldsets to remove from the table creation dialogue. Key list is alignment, borders, color, description, language, layout, spacing, style
buttons.tableproperties.removeFieldsets (htmlArea RTE only)	list of strings	List of fieldsets to remove from the table properties edition dialogue. Key list is alignment, borders, color, description, language, layout, spacing, style
buttons.table.properties.required (htmlArea RTE only)	list of strings	List of fields for which a value is required in the table creation and table properties edition dialogues. Possible values are: caption, summary, captionOrSummary
buttons.table.properties.removed (htmlArea RTE only)	list of strings	List of fields to remove from the table creation and table properties edition dialogues. Possible values are: width, height, float, headers, language, direction
buttons.table.properties.numberOfRows.defaultValue (htmlArea RTE only)	int+	Default value for the number of rows to include in a table on creation. Default: 2
buttons.table.properties.numberOfColumns.defaultValue (htmlArea RTE only)	int+	Default value for the number of columns to include in a table on creation. Default: 4
buttons.table.properties.headers.defaultValue (htmlArea RTE only)	string	Default selected option in the headers layout selector in the table creation dialogue. Possible values are: none, top, left, both Default: top
buttons.table.properties.headers.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the headers layout selector in the table creation dialogue. Key list is: none, top, left, both Default: void
buttons.table.properties.headers.both.useHeaderClass (htmlArea RTE only)	list of strings	A class to be assigned to the top row when the headers property specifies both. Default: thead
buttons.table.properties.tableClass.defaultValue (htmlArea RTE only)	string	Default selected class in the table class selector in the table creation dialogue. Default: void
buttons.table.properties.width.defaultValue (htmlArea RTE only)	+int	Default value of the table wdth in the table creation dialogue. Default: void
buttons.table.properties.widthUnit.defaultValue (htmlArea RTE only)	string	Default selected unit in the width unit selector in the table creation dialogue. Possible values are: %, px or em Default: %
buttons.table.properties.widthUnit.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the table width unit selector in the table creation dialogue. Key list is: %, px, em Default: void
buttons.table.properties.height.defaultValue (htmlArea RTE only)	+int	Default value of the table height in the table creation dialogue. Default: void
buttons.table.properties.heightUnit.defaultValue (htmlArea RTE only)	string	Default selected unit in the height unit selector in the table creation dialogue. Possible values are: %, px or em Default: %
buttons.table.properties.heightUnit.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the table height unit selector in the table creation dialogue. Key list is: %, px, em Default: void
buttons.table.properties.float.defaultValue (htmlArea RTE only)	string	Default selected option in the table float selector in the table creation and properties edition dialogues.. Possible values are: not set, left, right Default: not set
buttons.table.properties.float.left.useClass (htmlArea RTE only)	string	Class name to be assigned when left is selected in the table float selector in the table creation and properties edition dialogues. Default: float-left
buttons.table.properties.float.right.useClass (htmlArea RTE only)	string	Class name to be assigned when right is selected in the table float selector in the table creation and properties edition dialogues. Default: float-right
buttons.table.properties.float.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the table float selector in the table creation and properties edition dialogues. Key list is: not set, left, right Default: void
buttons.table.properties.cellpadding.defaultValue (htmlArea RTE only)	+int	Default value of the table cellpadding attribute in the table creation and properties edition dialogues Default: void
buttons.table.properties.cellspacing.defaultValue (htmlArea RTE only)	+int	Default value of the table cellspacing attribute in the table creation and properties edition dialogues . Default: void
buttons.table.properties.borderWidth.defaultValue (htmlArea RTE only)	+int	Default value of the table border width attribute in the table creation and properties edition dialogues Default: void
buttons.table.properties.borderStyle.defaultValue (htmlArea RTE only)	string	Default selected style in the border style selector in the table creation dialogue. Possible values are: not set, none, dotted, dashed, solid, double, groove, ridge, inset, outset Default: not set
buttons.table.properties.borderStyle.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the table border style selector in the table creation dialogue. Key list is: not set, none, dotted, dashed, solid, double, groove, ridge, inset, outset Default: void
buttons.rowproperties.removeFieldsets (htmlArea RTE only)	list of strings	List of fieldsets to remove from the table row properties edition dialogue. Key list is alignment, borders, color, language, layout, rowgroup, style Default: void
buttons.rowproperties.properties.removed (htmlArea RTE only)	list of strings	List of fields to remove from the table row properties edition dialogue. Possible values are: width, height, language, direction Default: void
buttons.rowproperties.properties.width.defaultValue (htmlArea RTE only)	+int	Default value of the row wdth in the table row properties edition dialogue. Default: void
buttons.rowproperties.properties.widthUnit.defaultValue (htmlArea RTE only)	string	Default selected unit in the row width unit selector in the table row properties edition dialogue. Possible values are: %, px or em Default: %
buttons.rowproperties.properties.widthUnit.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the row width unit selector in the table row properties edition dialogue. Key list is: %, px, em Default: void
buttons.rowproperties.properties.height.defaultValue (htmlArea RTE only)	+int	Default value of the row height in the table row properties edition dialogue. Default: void
buttons.rowproperties.properties.heightUnit.defaultValue (htmlArea RTE only)	string	Default selected unit in the row height unit selector iin the table row properties edition dialogue. Possible values are: %, px or em Default: %
buttons.rowproperties.properties.heightUnit.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the row height unit selector in the table row properties edition dialogue. Key list is: %, px, em Default: void
buttons.rowproperties.properties.borderStyle.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the row border style selector in the table row properties edition dialogue. Key list is: not set, none, dotted, dashed, solid, double, groove, ridge, inset, outset Default: void
buttons.columnproperties.removeFieldsets (htmlArea RTE only)	list of strings	List of fieldsets to remove from the column cells properties edition dialogue. Key list is alignment, borders, color, language, layout, style
buttons.cellproperties.removeFieldsets (htmlArea RTE only)	list of strings	List of fieldsets to remove from the cell properties edition dialogue. Key list is alignment, borders, color, language, layout, style
buttons.cellproperties.properties.removed (htmlArea RTE only)	list of strings	List of fields to remove from the cell properties and column cells properties edition dialogues. Possible values are: width, height, language, direction Default: void
buttons.cellproperties.properties.width.defaultValue (htmlArea RTE only)	+int	Default value of the row wdth in the cell properties and column cells properties edition dialogues. Default: void
buttons.cellproperties.properties.widthUnit.defaultValue (htmlArea RTE only)	string	Default selected unit in the row width unit selector in the cell properties and column cells properties edition dialogues. Possible values are: %, px or em Default: %
buttons.cellproperties.properties.widthUnit.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the row width unit selector in the cell properties and column cells properties edition dialogues. Key list is: %, px, em Default: void
buttons.cellproperties.properties.height.defaultValue (htmlArea RTE only)	+int	Default value of the row height in the cell properties and column cells properties edition dialogues. Default: void
buttons.cellproperties.properties.heightUnit.defaultValue (htmlArea RTE only)	string	Default selected unit in the row height unit selector in the cell properties and column cells properties edition dialogues. Possible values are: %, px or em Default: %
buttons.cellproperties.properties.heightUnit.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the row height unit selector in the cell properties and column cells properties edition dialogues. Key list is: %, px, em Default: void
buttons.cellproperties.properties.borderStyle.removeItems (htmlArea RTE only)	list of strings	List of items to remove from the cell border style selector in the cell properties and column cells properties edition dialogues. Key list is: not set, none, dotted, dashed, solid, double, groove, ridge, inset, outset Default: void
buttons.paste.mozillaAllowClipboardUrl	url	The full absolute url of the AllowClipboard Helper extension for Mozilla/Firefox. The browser extension is used to allow the RTE to access the clipboard. The url is used to install the extension when required. Default: http://typo3.org/fileadmin/allowclipboardhelper-0.6.xpi
enablePersonalDicts DEPRECATED!	boolean	This property is deprecated. Use property buttons.spellcheck.enablePersonalDictionaries
RTEHeightOverride (htmlArea RTE only)	int+	If set, the specified value will override the calculated height of the RTE editing area. See also User TSConfig options.RTESmallHeight and options.RTELargeHeightIncrement
RTEWidthOverride (htmlArea RTE only)	int+/%	If set, the specified value will override the calculated width of the RTE editing area. Note that a percentage may be specified. Note: The property is ignored in IE if the value is a percentage.
dialogueWindows.defaultPositionFromTop (htmlArea RTE only)	int+	The default opening position from the top of the screen of a dialogue window opened when a button is pressed. Note: May be averridden by a specific button configuration.
dialogueWindows.defaultPositionFromLeft (htmlArea RTE only)	int+	The default opening position from the left of the screen of a dialogue window opened when a button is pressed. Note: May be averridden by a specific button configuration.
dialogueWindows.doNotResize (htmlArea RTE only)	boolean	If set, the window that is opened when any button is pressed will not be resized to its contents. Default: 0
dialogueWindows.doNotCenter (htmlArea RTE only)	boolean	If set, the window that is opened when any button is pressed will not be centered in the parent window. Default: 0
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.

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

classesAnchor:

The following property allows to configure the anchor accessibility feature:

Property:	Description:
classesAnchor.[id-string] (htmlArea RTE only)	Attaches special properties to the classes available in the Insert/Modify link dialog. Properties: .class = CSS-class-name: the name of the CSS class to which the properties are attached .type = page, url, file, mail or spec: specifies that the class applies to anchors for internal pages, external URL's, files, email addresses or special user-defined links respectively; the class will be presented only in the corresponding tab of the 'Insert/Modify link' dialogue .image = URL of an icon file that will prefix or postfix the content of the anchor when the class is applied to an anchor; the TYPO3 syntax EXT:extension-key/sub-directory/image-file-name may be used .addIconAfterLink = boolean: if set, the content of the link is postfixed with the icon; default is to prefix the content of the link with the icon .altText = the text that will be used as altText for the image when the class is applied to an anchor; may be language-splitted; the TYPO3 syntax LLL:EXT:extension-key/sub-directory/locallang.xml:label-index may also be used in order for the text to be localized to the language of the content using the specified language file and label index .titleText = the text that will be used as title for the anchor when the class is applied to an anchor; may be language-splitted; the TYPO3 syntax LLL:EXT:extension-key/sub-directory/locallang.xml:label-index may also be used in order for the text to be localized to the language of the content using the specified language file and label index .target = string; if set, this is the default value to be assigned to the target attribute of the link when the class is applied to the link See the Demo default configuration for a complete example.

[page:RTE]

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 script 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]

Static Template: Clickenlarge Rendering

In order for the click-enlarge property of images inserted in the RTE to be rendered on the frontend, static template «Clickenlarge Rendering (rtehtmlarea)» must be included in the TypoScript template.

Note that stdWrap property may be applied to the generated link tag by configuring the property in TS template setup:

lib.parseFunc_RTE.tags.img.postUserFunc.stdWrap.

This may be used, for examble, to add additional attributes to the generated link tag.

Default Website Language

If you enable the Spell Checker feature, make sure you have created a Website Language record for the default language of your site, even if your TypoScript template does not refer to it.

Server Configuration

Internet Explorer has caching problems that may affect the performance of the htmlArea RTE. These problems may be worked around with the following server configuration recommendations.

Apache configuration:

Add the following lines to your Apache httpd.conf file or in the .htaccess file of the root directory of your site:

BrowserMatch "MSIE" brokenvary=1

BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1

BrowserMatch "Opera" !brokenvary

SetEnvIf brokenvary 1 force-no-vary

ExpiresActive On

ExpiresByType image/gif "access plus 1 month"

ExpiresByType image/png "access plus 1 month"

The last two statements require the mod_expires Apache module to be installed. For information on this module, see:

http://httpd.apache.org/docs/1.3/mod/mod_expires.html

Microsoft IIS configuration:

See: http://www.aspnetresources.com/blog/cache_control_extensions.aspx

More information:

For more information on this subject, see the following articles:

http://dean.edwards.name/my/flicker.html

http://httpd.apache.org/docs/1.3/mod/mod_expires.html

http://fivesevensix.com/studies/ie6flicker/

See also the Tutorial section of the present document for information on IE caching problems in relation with the Apache mod_gzip module.

Installing multiple RTE's

You can install as many RTE's has you wish. Their availability will be checked in the order in which they are loaded, that is in the order they are installed.

If you install first the classic RTE and, secondly, htmlArea RTE, a user with IE 5+ on Windows will be presented the classic RTE; a user with Mozilla 1.3.1+, Firefox 0.8+, Netscape 7.1+, Safari 3.0.4+, Opera 9.62+ or Google Chrome on any platform will be presented the htmlArea RTE.

If you install htmlArea RTE before you install the classic RTE, htmlArea RTE will be presented to users with IE 5.5+ on Windows, or with Mozilla 1.3.1+, Firefox 0.8+, Netscape 7.1+, Safari 3.0.4+, Opera 9.62+ or Google Chrome on any platform; the classic RTE will only be presented to users with IE 5 on Windows.

Clearing the RTE Cache

htmlArea RTE keeps a cached copy of its JavaScript files, usually in compressed format, in directory typo3temp/rtehtmlarea, which is called the RTE Cache.

The cached JavaScript files are recreated whenever a new version of the RTE is installed or when the cached files are deleted.

If, for some reason, a JavaScript component of the RTE is modified while the RTE version number remains unchanged, the RTE Cache should be cleared. Browser caches may also need to be cleared.

Clearing the RTE Cache may be done with the «Clear RTE Cache» option of the backend «Clear Cache» menu. This option is always available to the admin user. It may also be made available to BE users or groups by setting property options.clearCache.clearRTECache in Page TSConfig.

Using htmlArea RTE in a front end plugin

If you are a TYPO3 front end extension developer, your extensions may use the htmlArea RTE API to enable rich text editing of text fields. You will find the the htmlArea RTE API Manual on the TYPO3 Extension Repository (extension key: rtehtmlarea_api_manual)

Note that the TYPO3 Image, TYPO3 Link , User Elements and Acronym features are not available when the RTE is used in the TYPO3 front end.

Configuring the anchor accessibility feature

The anchor accessibility feature allows to attach special accessibility features to CSS classes when they are applied to links with the TYPO3 element browser. For example, icons may be inserted in front or at the end of links when configured classes are assigned to the links.

The Extension Manager must be used to enable the feature.

The TYPO3 element browser must be enabled in the 'Insert/Modify link' dialogue by setting property buttons.link.TYPO3Browser.disabled to 0 in Page TSConfig. The TYPO3 element browser is enabled by default in the backend, but never available in the frontend.

The classes should first be defined in the CSS file specified by RTE.default.contentCSS.

The classes should be part of the list specified by property RTE.default.classesAnchor.

The accessibility features attached to the classes are specified by property RTE.classesAnchor.

Default Configurations

htmlArea RTE offers four default configurations:

Typical: sets Page TSConfig and User TSConfig with most commonly used features representing a good start for typical sites and for most situations;

Minimal: sets Page TSConfig and User TSConfig with minimal features; this is for advanced administrators who are familiar with the features of the RTE and understand well how to configure the RTE using Page TSConfig;

Demo: sets Page TSConfig and User TSConfig with as many features as possible for users who want to explore the features of the RTE; this is not recommended for a production environment;

Image: adds support for images to the Typical default configuration.

The default configuration may be chosen in the installation dialog of the htmlArea RTE extension presented by the Extension Manager. If not otherwise specified, the Typical default configuration will be used.

All default configurations share the same default configuration of RTE content transformation.

Default configuration of RTE content transformation

This default configuration establishes default settings in Page TSConfig for RTE content transformation.

For documentation of RTE tranformations, see: http://typo3.org/documentation/document-library/core-documentation/doc_core_api/4.1.0/view/5/2/

For documentation of Page TSConfig configuration of RTE processing, see: http://typo3.org/documentation/document-library/references/doc_core_tsconfig/current/view/1/3/

For documentation of the HTMLparser, see: http://typo3.org/documentation/document-library/references/doc_core_tsref/current/view/5/17/

For documentation of RTE settings in TCA, see: http://typo3.org/documentation/document-library/core-documentation/doc_core_api/4.1.0/view/4/3/#id3665895

The following is inserted in Page TSConfig:

## Default RTE processing rules

RTE.default.proc {

## TRANSFORMATION METHOD

## We assume that CSS Styled Content is used.

overruleMode = ts_css

## DO NOT CONVERT BR TAGS INTO LINEBREAKS

## br tags in the content are assumed to be intentional.

dontConvBRtoParagraph = 1

## PRESERVE DIV SECTIONS - DO NOT REMAP TO P

preserveDIVSections = 1

## TAGS ALLOWED OUTSIDE P & DIV

allowTagsOutside = hr, address

## TAGS ALLOWED

## Added to the default internal list: b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,em,li,ul,ol,blockquote,strike,span

## But, for the sake of clarity, we use a complete list in alphabetic order.

## center, font, link, meta, o:p, strike, sdfield, style, title and u will be removed on entry (see below).

## b and i will be remapped on exit (see below).

## Note that the link accessibility feature of htmlArea RTE does insert img tags.

allowTags (

a, abbr, acronym, address, b, bdo, big, blockquote, br, caption, center, cite, code, col, colgroup, del, dfn, div, em, font,

h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, link, meta, ol, p, pre, q, samp, sdfield, small,

span, strike, strong, style, sub, sup, table, thead, tbody, tfoot, td, th, tr, title, tt, u, ul, var

)

## TAGS DENIED

## Make sure we can set rules on any tag listed in allowTags.

denyTags >

## ALLOWED P & DIV ATTRIBUTES

## Attributes class and align are always preserved

## Align attribute will be unset on entry (see below)

## This is a list of additional attributes to keep

keepPDIVattribs = id, title, dir, lang, xml:lang

## ALLOW TO WRITE ABOUT HTML

dontUndoHSC_db = 1

dontHSC_rte = 1

## CONTENT TO DATABASE

entryHTMLparser_db = 1

entryHTMLparser_db {

## TAGS ALLOWED

## Always use the same list of allowed tags.

allowTags < RTE.default.proc.allowTags

## TAGS DENIED

## Make sure we can set rules on any tag listed in allowTags.

denyTags >

## AVOID CONTENT BEING HSC'ed TWICE

htmlSpecialChars = 0

tags {

## REMOVE IMG TAGS

img.allowedAttribs = 0

img.rmTagIfNoAttrib = 1

## CLEAN ATTRIBUTES ON THE FOLLOWING TAGS

span.fixAttrib.style.unset = 1

p {

allowedAttribs = id, title, dir, lang, xml:lang, class

fixAttrib.align.unset = 1

}

div < .p

hr.allowedAttribs = class

b.allowedAttribs = id, title, dir, lang, xml:lang, class

bdo.allowedAttribs = id, title, dir, lang, xml:lang, class

big.allowedAttribs = id, title, dir, lang, xml:lang, class

blockquote.allowedAttribs = id, title, dir, lang, xml:lang, class

cite.allowedAttribs = id, title, dir, lang, xml:lang, class

code.allowedAttribs = id, title, dir, lang, xml:lang, class

del.allowedAttribs = id, title, dir, lang, xml:lang, class

dfn.allowedAttribs = id, title, dir, lang, xml:lang, class

em.allowedAttribs = id, title, dir, lang, xml:lang, class

i.allowedAttribs = id, title, dir, lang, xml:lang, class

ins.allowedAttribs = id, title, dir, lang, xml:lang, class

kbd.allowedAttribs = id, title, dir, lang, xml:lang, class

label.allowedAttribs = id, title, dir, lang, xml:lang, class

q.allowedAttribs = id, title, dir, lang, xml:lang, class

samp.allowedAttribs = id, title, dir, lang, xml:lang, class

small.allowedAttribs = id, title, dir, lang, xml:lang, class

strike.allowedAttribs = id, title, dir, lang, xml:lang, class

strong.allowedAttribs = id, title, dir, lang, xml:lang, class

sub.allowedAttribs = id, title, dir, lang, xml:lang, class

sup.allowedAttribs = id, title, dir, lang, xml:lang, class

tt.allowedAttribs = id, title, dir, lang, xml:lang, class

u.allowedAttribs = id, title, dir, lang, xml:lang, class

var.allowedAttribs = id, title, dir, lang, xml:lang, class

}

## REMOVE OPEN OFFICE META DATA TAGS, WORD 2003 TAGS, LINK, META, STYLE AND TITLE TAGS, AND DEPRECATED HTML TAGS

## We use this rule instead of the denyTags rule so that we can protect custom tags without protecting these unwanted tags.

removeTags = center, font, link, o:p, sdfield, meta, style, title, strike, u

## PROTECT CUSTOM TAGS

keepNonMatchedTags = protect

}

HTMLparser_db {

## STRIP ALL ATTRIBUTES FROM THESE TAGS

## If this list of tags is not set, it will default to: b,i,u,br,center,hr,sub,sup,strong,em,li,ul,ol,blockquote,strike.

## However, we want to keep xml:lang attribute on most tags and tags from the default list where cleaned on entry.

noAttrib = br

## XHTML COMPLIANCE

## Note that applying xhtml_cleaning on exit would break non-standard attributes of typolink tags

xhtml_cleaning = 1

}

exitHTMLparser_db = 1

exitHTMLparser_db {

## KEEP ALL TAGS

## Unwanted tags were removed on entry.

## Without this rule, the parser will remove all tags! Presumably, this rule will be more efficient than repeating the allowTags rule

keepNonMatchedTags = 1

## AVOID CONTENT BEING HSC'ed TWICE

htmlSpecialChars = 0

}

}

## Use same RTE processing rules in FE

RTE.default.FE.proc < RTE.default.proc

## RTE processing rules for bodytext column of tt_content table

## Erase settings from other extensions

RTE.config.tt_content.bodytext >

## Make sure we use ts_css transformation

RTE.config.tt_content.bodytext.proc.overruleMode = ts_css

RTE.config.tt_content.bodytext.types.text.proc.overruleMode = ts_css

RTE.config.tt_content.bodytext.types.textpic.proc.overruleMode = ts_css

Typical default configuration

This default configuration establishes default settings in Page TSConfig and User TSConfig with most commonly used features representing a good start for typical sites.

The following is inserted in Page TSConfig:

## Define labels and styles to be applied to class selectors in the interface of the RTE

## The examples included here make partial re-use of color scheme and frame scheme from CSS Styled Content extension

RTE.classes {

align-left {

name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft

value = text-align: left;

}

align-center {

name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter

value = text-align: center;

}

align-right {

name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright

value = text-align: right;

}

csc-frame-frame1 {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:frame-frame1

value = background-color: #EDEBF1; border: 1px solid #333333;

}

csc-frame-frame2 {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:frame-frame2

value = background-color: #F5FFAA; border: 1px solid #333333;

}

important {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:important

value = color: #8A0020;

}

name-of-person {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:name-of-person

value = color: #10007B;

}

detail {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:detail

value = color: #186900;

}

component-items {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:component-items

value = color: #186900;

}

action-items {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:action-items

value = color: #8A0020;

}

component-items-ordered {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:component-items

value = color: #186900;

}

action-items-ordered {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:action-items

value = color: #8A0020;

}

}

## Anchor classes configuration for use by the anchor accesibility feature (htmlArea RTE only)

RTE.classesAnchor {

externalLink {

class = external-link

type = url

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:external_link_titleText

}

externalLinkInNewWindow {

class = external-link-new-window

type = url

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:external_link_new_window_titleText

}

internalLink {

class = internal-link

type = page

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_titleText

}

internalLinkInNewWindow {

class = internal-link-new-window

type = page

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_new_window_titleText

}

download {

class = download

type = file

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:download_titleText

}

mail {

class = mail

type = mail

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:mail_titleText

}

}

## Default RTE configuration

RTE.default {

## Markup options (htmlArea RTE only)

enableWordClean = 1

removeTrailingBR = 1

removeComments = 1

removeTags = center, font, o:p, sdfield, strike, u

removeTagsAndContents = link, meta, script, style, title

## Toolbar options

## The TCA configuration may add buttons to the toolbar

## The following buttons are specific to Classic RTE: class

## The following buttons are specific to htmlArea RTE: blockstylelabel, blockstyle, textstylelabel, textstyle,

##	insertcharacter, findreplace, removeformat, toggleborders, tableproperties,

##	rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit,

##	columninsertbefore, columninsertafter, columndelete, columnsplit,

##	cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge

showButtons (

class, blockstylelabel, blockstyle, textstylelabel, textstyle,

formatblock, bold, italic, subscript, superscript,

orderedlist, unorderedlist, outdent, indent, textindicator,

insertcharacter, link, table, findreplace, chMode, removeformat, undo, redo, about,

toggleborders, tableproperties,

rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit,

columninsertbefore, columninsertafter, columndelete, columnsplit,

cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge

)

## More toolbar options (htmlArea RTE only)

keepButtonGroupTogether = 1

## Enable status bar (htmlArea RTE only)

showStatusBar = 1

## Hide infrequently used paragraph types in the paragraph type selector (formatblock button)

hidePStyleItems = pre,address

## Add default example styles

## The example styles included here make partial re-use of color scheme and frame scheme from CSS Styled Content extension

## Left, center, right and justify alignment of text in block elements

inlineStyle.text-alignment (

p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, div.align-left, address.align-left { text-align: left; }

p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, div.align-center, address.align-center { text-align: center; }

p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, div.align-right, address.align-right { text-align: right; }

p.align-justify, h1.align-justify, h2.align-justify, h3.align-justify, h4.align-justify, h5.align-justify, h6.align-justify, div.align-justify, address.align-justify { text-align: justify; }

)

## Two frame examples taken from the example CSS file of CSS Styled Content extension and applied to p and table block elements.

inlineStyle.frames (

p.csc-frame-frame1, table.csc-frame-frame1 { background-color: #EDEBF1; padding: 2px 4px 2px 4px; border: 1px solid #333333; }

p.csc-frame-frame2, table.csc-frame-frame2 { background-color: #F5FFAA; padding: 2px 4px 2px 4px; border: 1px solid #333333; }

)

## Bullet styles for unordered lists.

inlineStyle.ul (

ul.component-items { color: #186900; list-style-type: circle; }

ul.action-items { color: #8A0020; list-style-image: url(img/red_arrow_bullet.gif); }

)

## Numbering styles for ordered lists.

inlineStyle.ol (

ol.component-items-ordered { color: #10007B; list-style-type: lower-roman; }

ol.action-items-ordered { color: #8A0020; list-style-type: lower-greek; }

)

## Three inline text colors taken from the color scheme of CSS Styled Content extension.

inlineStyle.inline-text (

span.important { color: #8A0020; }

span.name-of-person { color: #10007B; }

span.detail { color: #186900; }

)

## Default selectors for the default configuration of the link accessibity feature.

inlineStyle.accessibility (

a.external-link {}

a.external-link-new-window {}

a.internal-link {}

a.internal-link-new-window {}

a.download {}

a.mail {}

)

## Default selector for indentation.

inlineStyle.indentation (

div.indent { margin-left: 2em; }

)

## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)

## When RTE.default.contentCSS is not specified, file EXT:rtehtmlarea/res/contentcsss/default.css is used.

ignoreMainStyleOverride = 1

## List all class selectors that are allowed on the way to the database

proc.allowedClasses (

external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,

align-left, align-center, align-right, align-justify,

csc-frame-frame1, csc-frame-frame2,

component-items, action-items,

component-items-ordered, action-items-ordered,

important, name-of-person, detail,

indent

)

## classesParagraph, classesTable, classesTD, classesLinks, classesCharacter

## Classic RTE: Specify the list of class selectors that should be presented in the RTE interface:

## htmlArea RTE: Restrict the list of class selectors presented by the RTE to the following:

classesParagraph (

align-left, align-center, align-right,

csc-frame-frame1, csc-frame-frame2

)

classesTable = csc-frame-frame1, csc-frame-frame2

classesTD = align-left, align-center, align-right

classesLinks = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail

classesCharacter = important, name-of-person, detail

## Configuration of the anchor accessibility feature (htmlArea RTE only)

## These classes should also be in the list of allowedClasses.

classesAnchor = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail

classesAnchor.default {

page = internal-link

url = external-link-new-window

file = download

mail = mail

}

## Configuration specific to the TableOperations feature (htmlArea RTE only)

## Remove the following fieldsets from the properties popups

disableAlignmentFieldsetInTableOperations = 1

disableSpacingFieldsetInTableOperations = 1

disableColorFieldsetInTableOperations = 1

disableLayoutFieldsetInTableOperations = 1

## Show borders on table creation

buttons.toggleborders.setOnTableCreation = 1

}

## front end RTE configuration for the general public (htmlArea RTE only)

RTE.default.FE < RTE.default

RTE.default.FE.showStatusBar = 0

RTE.default.FE.hideButtons = chMode, blockstyle, textstyle, underline, strikethrough, subscript, superscript, lefttoright, righttoleft, left, center, right, justifyfull, table, inserttag, findreplace, removeformat, copy, cut, paste

RTE.default.FE.userElements >

RTE.default.FE.userLinks >

## tt_content TCEFORM configuration

## Let use all the space available for more comfort.

TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 100%

The following is inserted in User TSConfig:

## Enable the RTE by default for all users

setup.default.edit_RTE = 1

Minimal default configuration

This default configuration establishes default settings in Page TSConfig and User TSConfig with minimal features. This is for advanced administrators with good knowledge of RTE configuration in Page TSConfig.

The following is inserted in Page TSConfig:

## Default RTE configuration

RTE.default {

## Toolbar options applicable to all RTE's

## The TCA configuration may add buttons to the toolbar

showButtons = bold,italic,undo,redo,about

}

## front end RTE configuration for the general public (htmlArea RTE only)

RTE.default.FE < RTE.default

The following is inserted in User TSConfig:

## Enable the RTE by default for all users

setup.default.edit_RTE = 1

Demo default configuration

This default configuration sets Page TSConfig and User TSConfig with as many features as possible for users who want to explore the features of the RTE. This is not recommended for production environments.

The following is inserted in Page TSConfig:

## Define labels and styles to be applied to class selectors in the interface of the RTE

## Partial re-use of color scheme and frame scheme from CSS Styled Content extension

RTE.classes {

align-left {

name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft

value = text-align: left;

}

align-center {

name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter

value = text-align: center;

}

align-right {

name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright

value = text-align: right;

}

csc-frame-frame1 {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:frame-frame1

value = background-color: #EDEBF1; border: 1px solid #333333;

}

csc-frame-frame2 {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:frame-frame2

value = background-color: #F5FFAA; border: 1px solid #333333;

}

important {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:important

value = color: #8A0020;

}

name-of-person {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:name-of-person

value = color: #10007B;

}

detail {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:detail

value = color: #186900;

}

component-items {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:component-items

value = color: #186900;

}

action-items {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:action-items

value = color: #8A0020;

}

component-items-ordered {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:component-items

value = color: #186900;

}

action-items-ordered {

name = LLL:EXT:rtehtmlarea/res/contentcss/locallang.xml:action-items

value = color: #8A0020;

}

}

## Anchor classes configuration for use by the anchor accessibility feature (htmlArea RTE only)

RTE.classesAnchor {

externalLink {

class = external-link

type = url

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/external_link.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:external_link_altText

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:external_link_titleText

}

externalLinkInNewWindow {

class = external-link-new-window

type = url

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/external_link_new_window.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:external_link_new_window_altText

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:external_link_new_window_titleText

}

internalLink {

class = internal-link

type = page

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/internal_link.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_altText

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_titleText

}

internalLinkInNewWindow {

class = internal-link-new-window

type = page

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/internal_link_new_window.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_new_window_altText

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_new_window_titleText

}

download {

class = download

type = file

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/download.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:download_altText

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:download_titleText

}

mail {

class = mail

type = mail

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/mail.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:mail_altText

titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:mail_titleText

}

}

## Default RTE configuration

RTE.default {

## Markup options (htmlArea RTE only)

enableWordClean = 1

removeTrailingBR = 1

removeComments = 1

removeTags = center, o:p, sdfield

removeTagsAndContents = link, meta, script, style, title

## Allow img tags

proc.entryHTMLparser_db.tags.img >

## Allow style attributes on p and span tags

proc.entryHTMLparser_db.tags {

p.allowedAttribs := addToList(style)

span.fixAttrib.style.unset >

}

## Toolbar options

showButtons = *

## More toolbar options (htmlArea RTE only)

keepButtonGroupTogether = 1

## Enable status bar (htmlArea RTE only)

showStatusBar = 1

## Add default example styles

## The example styles included here make partial re-use of color scheme and frame scheme from CSS Styled Content extension

## Left, center, right and justify alignment of text in block elements

inlineStyle.text-alignment (

p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, div.align-left, address.align-left { text-align: left; }

p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, div.align-center, address.align-center { text-align: center; }

p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, div.align-right, address.align-right { text-align: right; }

p.align-justify, h1.align-justify, h2.align-justify, h3.align-justify, h4.align-justify, h5.align-justify, h6.align-justify, div.align-justify, address.align-justify { text-align: justify; }

)

## Two frame examples taken from the example CSS file of CSS Styled Content extension and applied to p and table block elements.

inlineStyle.frames (

p.csc-frame-frame1, table.csc-frame-frame1 { background-color: #EDEBF1; padding: 2px 4px 2px 4px; border: 1px solid #333333; }

p.csc-frame-frame2, table.csc-frame-frame2 { background-color: #F5FFAA; padding: 2px 4px 2px 4px; border: 1px solid #333333; }

)

## Bullet styles for unordered lists.

inlineStyle.ul (

ul.component-items { color: #186900; list-style-type: circle; }

ul.action-items { color: #8A0020; list-style-image: url(img/red_arrow_bullet.gif); }

)

## Numbering styles for ordered lists.

inlineStyle.ol (

ol.component-items-ordered { color: #10007B; list-style-type: lower-roman; }

ol.action-items-ordered { color: #8A0020; list-style-type: lower-greek; }

)

## Three inline text colors taken from the color scheme of CSS Styled Content extension.

inlineStyle.inline-text (

span.important { color: #8A0020; }

span.name-of-person { color: #10007B; }

span.detail { color: #186900; }

)

## Default selectors for the default configuration of the link accessibity feature.

inlineStyle.accessibility (

a.external-link {}

a.external-link-new-window {}

a.internal-link {}

a.internal-link-new-window {}

a.download {}

a.mail {}

)

## Default selector for indentation.

inlineStyle.indentation (

div.indent { margin-left: 2em; }

)

## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)

## When RTE.default.contentCSS is not specified, file EXT:rtehtmlarea/res/contentcsss/default.css is used.

ignoreMainStyleOverride = 1

## For this demo, do not remove font, strike and u tags

proc.entryHTMLparser_db.removeTags := removeFromList(font,strike,u)

## List all class selectors that are allowed on the way to the database

proc.allowedClasses (

external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,

align-left, align-center, align-right, align-justify,

csc-frame-frame1, csc-frame-frame2,

component-items, action-items,

component-items-ordered, action-items-ordered,

important, name-of-person, detail,

indent

)

## classesParagraph, classesTable, classesTD, classesLinks, classesCharacter

## Classic RTE: Specify the list of class selectors that should be presented in the RTE interface:

## htmlArea RTE: Restrict the list of class selectors presented by the RTE to the following:

classesParagraph (

align-left, align-center, align-right,

csc-frame-frame1, csc-frame-frame2

)

classesTable = csc-frame-frame1, csc-frame-frame2

classesTD = align-left, align-center, align-right

classesLinks = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail

classesCharacter = important, name-of-person, detail

## Configuration of the anchor accessibility feature (htmlArea RTE only)

## These classes should also be in the list of allowedClasses.

classesAnchor = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail

classesAnchor.default {

page = internal-link

url = external-link-new-window

file = download

mail = mail

}

## Show all applicable class selectors available in the style sheet file (htmlArea RTE only)

showTagFreeClasses = 1

## Configuration specific to the table button or TableOperations feature (htmlArea RTE only)

## Use the context menu instead of the toolbar for table operations, but keep toggleborders button in toolbar

## Show borders on table creation

hideTableOperationsInToolbar = 1

buttons.toggleborders.keepInToolbar = 1

buttons.toggleborders.setOnTableCreation = 1

## Configuration specific to the inserttag button or QuickTag feature (htmlArea RTE only)

## Do not allow insertion of the following tags

buttons.inserttag.denyTags = font, underline, strike, table

## Configuration specific to the spellcheck button or SpellCheck feature (htmlArea RTE only)

## Enable the use of personal dictionaries

enablePersonalDicts = 1

}

## Use same processing as on entry to database to clean content pasted into the editor

RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db

## front end RTE configuration (htmlArea RTE only)

RTE.default.FE < RTE.default

RTE.default.FE.userElements >

RTE.default.FE.userLinks >

## tt_content TCEFORM configuration

## Let use all the space available for more comfort.

TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 100%

The following is inserted in User TSConfig:

## Enable the RTE by default for all users

setup.default.edit_RTE = 1

## Enable the file upload feature of the element browser by default for all users

options.uploadFieldsInTopOfEB = 1

## Set the default spelling ability of the check speller for all users

options.HTMLAreaPspellMode = bad-spellers

## Enable the personal dictionary feature of the check speller by default for all users

options.enablePersonalDicts = 1

Image default configuration

This default configuration establishes support for images in Page TSConfig. This is for use in addition to the Typical default configuration.

The following is inserted in Page TSConfig:

## Anchor classes configuration for use by the anchor accesibility feature (htmlArea RTE only)

## Add inline icons to the links

RTE.classesAnchor {

externalLink {

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/external_link.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:external_link_altText

}

externalLinkInNewWindow {

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/external_link_new_window.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:external_link_new_window_altText

}

internalLink {

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/internal_link.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_altText

}

internalLinkInNewWindow {

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/internal_link_new_window.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:internal_link_new_window_altText

}

download {

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/download.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:download_altText

}

mail {

image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/img/mail.gif

altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Link/locallang.xml:mail_altText

}

}

## Default RTE configuration

RTE.default {

## Enable the image button

showButtons := addToList(image)

## Tags allowed outside p and div

## Adding img tag to the default list

proc.allowTagsOutside := addToList(img)

## Do not remove img tags

proc.entryHTMLparser_db.tags.img >

}

RTE.default.FE.showButtons < RTE.default.showButtons

RTE.default.FE.proc.allowTagsOutside < RTE.default.proc.allowTagsOutside

RTE.default.FE.proc.entryHTMLparser_db.tags.img >

Tutorial

Working around Internet Explorer caching problem

This article by Jan Wulff describes the problems encountered with Internet Explorer 4/5/6 and the Apache server with mod_gzip activated. It describes how to work around these problems.

Problem:

If the Apache module mod_gzip is activated on your server, you may encounter the problem that Internet Explorer denies any caching for the whole site, thus stopping the block style and text style selctor lists of htmlArea RTE to work correctly. Besides, it may even slow down some other features of TYPO3, like graphical JavaScript menus. This effect does not depend on the gzip compression itself. Internet Explorer is indeed able to handle compressed files. The problem is IE's handling of one of the HTTP response headers sent with every served document.

Background:

The HTTP Vary response header indicates whether a cache is permitted to use the response to reply to a subsequent request without re-validating the document. This is necessary if a document is not suitable for all clients and is served in multiple different versions according to the HTTP headers the client sends with his request.

For example, with activated mod_gzip, every document is at least available in two versions, compressed and uncompressed. If a browser with gzip support requests such a document, it will receive the compressed version. A proxy between the client and the server may cache this file. Now, another browser without gzip support requests the same document via the same proxy. Without the Vary header the proxy would not know if the compressed document may be delivered to the new client, because it can't compare the HTTP headers of the second browser with the Vary header. If it would nevertheless serve it, the client would receive a bunch of data, without any idea, how to process it. Therefore mod_gzip sends a Vary header with each response with at least 'Accept-Encoding' as content.

The problems arise when the Internet Explorer enters the stage. IE 4, 5 and 6 recognizes only one kind of Vary header: 'User-agent', used to distinguish between versions for different browsers. Every other Vary header will be interpreted as it would have a single '*' as content. Because this does not compare with the headers send by any client, it forbids any caching of documents received with this header.

Solution:

There is more than one approach to handle this problem. The following configuration directives all have to be set in the Apache configuration file or in a .htaccess file which has to be located in your TYPO3 root.

Easy going:

So, you have no need for any gzip support? Fine, just deactivate the module and your problems are gone. Use this directive:

mod_gzip_on No

Complex approach:

You do have a lot of big code or text files, or you have to save as much transfer bandwidth as possible? Anyway, deactivating mod_gzip is no option for you? Then, you should first check what release of mod_gzip your server is using. If you don't know how, ask your provider, or just use the solution for releases from 1.3.19.2a till 1.3.26.1a.

mod_gzip release < 1.3.19.2a

Releases before this version didn't send Vary headers, so there shouldn't be any problem. But because you're reading this, you most probably don't use these versions.

mod_gzip release 1.3.19.2a <> 1.3.26.1a

These releases all use Vary headers. However, they send these headers without verifying if the document is really checked for compression. The only recommended way to get around this, is to deactivate mod_gzip. But thanks to Apache, you can deactivate mod_gzip separately for chosen files, and let it do it's work for the rest. You could use this to deactivate mod_gzip for all css files:

<FilesMatch "\.css$">

mod_gzip_on No

</FilesMatch>

Or going even further, you could also include image files:

<FilesMatch "\.(css|gif|jpe?g|png)$">

mod_gzip_on No

</FilesMatch>

By the way, there is another possibility. You could deactivate Vary headers in mod_gzip with this:

mod_gzip_send_vary Off

But there is a reason why mod_gzip, since 1.3.19.2a, uses Vary headers. As described above, you could badly mess up proxy servers, by serving compressed files without Vary headers. Therefore, I strongly discourage this approach.

mod_gzip release > 1.3.26.1a

Since release 1.3.26.1a, mod_gzip is a bit more discriminate. It only sends Vary headers with documents which were checked for compression. So you can tell mod_gzip to exclude some files. This approach is not so much different from the former solution, but it is cleaner because it addresses mod_gzip firsthand. To exclude CSS files from compression, use this directive:

mod_gzip_item_exclude file \.css$

If you would like to add images and Javascript files, you could use this:

mod_gzip_item_exclude file \.css$

mod_gzip_item_exclude file \.png$

mod_gzip_item_exclude file \.gif$

mod_gzip_item_exclude file \.jpg$

mod_gzip_item_exclude file \.jpeg$

mod_gzip_item_exclude file \.js$

This is just a short survey of the caching problems with Internet Explorer and mod_gzip. I wrote it with best intent and hope it may be helpful. If you find any mistakes, please let me know at <messages@janwulff.de>. I'm in no way responsible for any consequences that may come forth by the use of this information.

Known Problems

Please see/report problems in the TYPO3 Bugtracker under project tx_rtehtmlarea.

You may get support in the use of this extension by subscribing to news://news.netfielders.de/typo3.projects.rte.

Internet Explorer and HTML tag abbr

Before IE7, Internet Explorer did not support HTML tag abbr. If a content element containing this tag is edited with htmlArea RTE in IE6, the tag may be broken. Therefore, abbr tags are transformed to acronym tags if IE6 is used.

Internet Explorer and mod_gzip

If the Apache module mod_gzip is activated, it adds a 'vary'-header to every document. Internet Explorer cannot process correctly such headers, causing incorrect behavior of htmlArea RTE and, in particular, of the block style and text style drop-down selector lists. Therefore, mod_gzip compression, at least of style sheet files, should be disabled. See the article written by Jan Wulff on this subject in the Tutorial section of this document.

“All-in-One Gestures” Firefox extension and the context menu

The “All-in-One Gestures” Firefox extension causes erratic behavior of the htmlArea RTE context menu.

Change Log

Version:	Changes:
0.5.0	Use doubleval in place of floatval in SpellChecker plugin. Use XMLHttpRequest to asynchronously download required scripts. Add troubleshooting log and extension configuration variable to enable logging. Multiple changes to support Safari 1.3. Although the editor loads in Safari 1.3, it does not currently execute correctly due to some bugs in Safari edit mode. If you want to do some testing and/or debugging, you need to set $GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['rtehtmlarea']['safari_test']=1; Restructure the tool bar as an unordered list of label, select and button elements so that it can be walked through with the tab key. The list, including the button icons, is css-styled through the editor skin. Beware that custom skins will need to be adjusted. Restructure the context menu as an unordered list of button elements. The context menu, including the button icons, is css-styled through the editor skin. Beware that custom skins will need to be adjusted. Show in the context menu all table operations enabled in the given context. Each of the table operations becomes a configurable tool bar element like all other tool bar elements. New RTE Page TSConfig property: hideTableOperationsInToolbar. If set, the table operations buttons will not be displayed in the tool bar, but will appear in the context menu, when enabled in the given context. Method TS_transform_db of class t3lib_parsehtml_proc is modified in order to replace true line breaks with spaces, instead of eliminating them. Thanks to Johannes Bornhold. See section Known problems. New htmlArea plugin UserElements to enable the “user” button. Add the title attribute on the TYPO3 link insertion/modification dialog. New toggleborders button to show table borders.
0.5.1	Correction to the behavior of the style selection lists.
0.5.2	Correction for IE: when the collapsed borders attribute was set on a table, the table properties popup dialog did not reflect the set attribute: the checkbox was not checked. Correction: when TYPO3 is not installed in the web server's root path, the dynamiccss.css file was not properly included. Thanks to Johannes Bornhold for this correction. Correction for IE: on some Windows platforms, the display of the window status bar cannot be avoided unless the script is granted some privileges; in such cases, the height of the resized popup windows was insufficient; the resizing algorithm has been revised in order to correct this situation. Correction: the mailto link function did not work. Allow insertion of a file uploader on the File tab of the Insert/Modify link popup window (when TYPO3Browsers is used); the feature is enabled when property options.uploadFieldsInTopOfEB is set to 1 in User TSConfig. Thanks to Peter Niederlag for adding this feature. For TYPO3 3.7.0+: use the tab menu in TYPO3 Insert/Modify link popup window. Modify default Page TSConfig RTE configuration so as to remove Open Office <sdfield>-tags. New Page TSConfig properties: removeComments, removeTags, removeTagsAndContents. Correction for Mozilla/Firefox: when pasting in text by pressing the ctrl-v keys, the Mozilla extension installation was incorrectly triggered and/or failed. Correction: inserting a paragraph from the context menu when positioned in a table or a list produced incorrect result. New plugin/button allows to insert/edit acronyms and abbreviations. Not currently available in IE. Acronyms and abbreviations may be pre-defined with Acronym record type inserted on the TYPO3 site root. Transform abbr tags into acronym tags when IE is used.
0.5.3	Correction to misbehavior of mailto link popup when no anchor class is specified in Page TSConfig.
0.5.4	Correction: one label of plugin RemoveFormat was not localized. Correction: custom skins prevented correct loading of the RTE. Correction for IE: incorrect display of the current class in the paragraph style selector in some configurations. Correction for IE: the border handles of images and tables could not be selected for resizing. Correction for IE: table, img, ol and ul elements may be correctly selected through the editor status bar. Correction for IE: incorrect positioning of some popup windows. Correction for IE: incorrect behavior of the InlineCSS text style selector when Arabic text was selected.
0.5.5	The size of the back end editor area may be configured in User TSConfig. See the configuration section. Thanks to Peter Enzenberger. In Mozilla/Firefox, url's and email's are automatically transformed into links as soon as they are followed by a space; hitting escape or ctrl-z before any other key unlinks the text. Thanks to Xinha. Scripts compressed by about 25%. Use of compressed scripts is controlled by extension configuration. Improved memory management and reduced memory leakage. Correction: the cellinsertafter button was incorrectly configured in the default configuration. Correction: when multiple instances of the editor were loaded on the same page, the always-show buttons were added only on the tool bar of the first instance. Correction: the path to default skin component htmlarea-edited-content.css was incorrectly set. When the configuration variable Enable Mozilla/Firefox extension is enabled, if the client browser is Firefox 1+, the installation of the Firefox extension AllowClipboard Helper will triggered instead of the extension generated by this TYPO3 extension. In Mozilla/Firefox, an exception will be raised only when performing a paste with the tool bar button. Pasting with ctrl-v key will not raise any exception. Thanks to Guillaume Crico.
0.5.6	Correction: the MS Word Formatting option of the RemoveFormat button was broken in the previous version. Url of AllowClipboard Helper is added as an extension configuration variable. The address and dl tags are added to the list $headListTags of TYPO3 system class t3lib_parsehtml_proc. See Known problems.
0.5.7	Correction: since version 0.5.5, html attribute values could be html-encoded more than once.
0.5.8	Correction: the editor will load correctly even if it is located in a hidden tab at te time of loading. See Known problems. Improved memory management for IE.
0.5.9	Correction for IE: with some locales, the type of paragraph displayed in the toolbar may not correspond to the type of paragraph of the current selection. Address is added to the default list of types of paragraphs. Correction: since 0.5.5, html-encoding of single quotes was causing incompatibilities. Correction: the Acronym plugin was broken since version 0.5.5. Correction: if a title is added on a link, the link is not eligible as typolink, and TYPO3 will add a rtekeep attribute on the a tag; if the link is edited and the title removed, the editor should remove the rtekeep attribute so that the link becomes eligible as typolink again. Correction: since 0.5.2, the Insert/Modify Link dialog could be broken in TYPO3 3.6. New Page TSConfig property: removeTrailingBR. In Mozilla/Firefox/Netscape browsers, whenever some text is entered in an empty block, a trailing br tag is added by the browser. If this property is set, any trailing br tag in a block element will be removed on save and/or change mode. However, multiple trailing br tags will be preserved. For IE: an error message will be displayed if execution of ActiveX controls is not enabled.
0.6.1	Added documentation section on server configuration. Correction: the compressed version of plugin scripts were not used. Various changes for performance improvement. Added FAQ on hotkeys. Update to Finnish and Norwegian translations.
0.6.2	Correction: the image update popup dialog was broken in the previous version. Update to the recommended server configuration for png images. Addition of two example skins: blue-look and xp-blue, inspired by Xinha. New Page TSConfig property: keepButtonGroupTogether will keep buttons of a same group together on the same line of the editor tool bar. Not supported in IE, nor in Mozilla 1.3. Adjustments to the default skin. Custom skins may need to be adjusted.
0.6.3	Correction: the editor failed to initialize correctly when Page TSConfig property hideTableOperationsInToolbar was set to 1. Addition of Toggle borders in the context menu. Correction: updating a link did not work when the link was set on an image and on multiple elements.
0.7.0	Problem with Firefox extension “All-in-One Gestures” documented as Known problem. Blue-look and xp-blue skins moved to separate extensions: sr_rtehtmlarea_bluelook and sr_rtehtmlarea_xpblue respectively. Update to Finnish and Norwegian translations.
0.7.2	Correction: incorrect display of the toolbar in some configurations. Correction: incorrect update of some table properties. Adjustments to the names of the css selectors of some toolbar buttons. Skins sr_rtehtmlarea_bluelook and sr_rtehtmlarea_xpblue need to be upgraded. Custom skins need to be updated. Correction: incorrect behavior of the hot keys (ctrl+key) and of the context menu's access keys (alt+key). Remove generation of Mozilla/Firefox extension. Remove requirement for PHP zlib. Remove Archive_Zip package. Trigger install of AllowClipboard Helper for all supported versions of Mozilla/Firefox. AllowClipboardHelper Firefox extension has been localized to French and Spanish. Correction: some labels of the non-TYPO3 link and image insertion popups were not localized. Revised About window. Skins need to be upgraded. Custom skins need to be updated. New anchor accessibility feature. Correction: erratic behaviors in Mozilla/Firefox when automatically detecting links and when backspacing. Correction: PHP Fatal error when SpellChecker is enabled under PHP5. See http://bugs.typo3.org/view.php?id=1470 Update to the Dutch and German translations. Correction for IE (and maybe other cases, see http://bugs.typo3.org/view.php?id=1425): When an unforgiving browser refuses to parse the content coming from the database, a popup window will inform the user that the HTML document is not well-formed, and the editor will be started in textmode so that the user can edit the error in the HTML source. Correction: nested lists were not compliant with XHTML. Correction: the path to skin file htmlarea-edited-content.css could be incorrect when typo3 is installed in a sub-directory. Correction for IE: the paragraph style selector box was disabled.
0.7.4	Correction for Mozilla/Firefox: when the editor was loaded in a hidden tab, the size of the editing area would be incorrect when the tab becomes visible. Update to Finnish and Italian translations. Addition of Czech translation. Correction to the documentation of the anchor accessibility feature. Correction: insufficiently qualified CSS selectors in the editor skins resulted in styling problems mainly when the editor is used in the front end. Thanks to Claudio Strizzolo. Correction: toggleborders button caused inconsistencies in the class selector of the table properties popup window. Correction to the character set used by the xml parser and Aspell when invoked by the spell checker with iso-8859-1 content.
0.7.6	Two new extension configuration variables allow to specify the maximum resolution of plain images inserted with the TYPO3 image browser. Correction for TYPO3 3.8 on Windows server: the path to the locallang file of the spell checker was incorrectly set. Addition of Danish translation. Update to Russian translation. Correction: if multiple instances of the editor were loaded on the same page, with different plugins configuration for each, only the scripts of plugins enabled in the last instance were loaded on the page, resulting in JavaScript errors. New Page TSConfig and User TSConfig property enablePersonalDicts may be used to enable the use of personal dictionaries when using the spell checker. Correction: some links could not be edited. See http://bugs.typo3.org/view.php?id=1748 Correction: possible incorrect character set conversion of default titleText (set in language file through anchor accessibility feature configuration) when backend is utf-8.
1.0.0	Extension of system class t3lib_parsehtml_proc : move any style attribute of an a-tag to a wrapping span-tag, so that the link may be transformed into a typolink, if no other attribute prevents its transformation. Thanks to Dimitrij Denissenko for this idea and its implementation. Correction: updating the properties of an image was broken in version 0.7.6. Correction: in the Remove Format window, when some text is selected, the default cleaning area will be “Selection” (rather than “All”). Thanks to Bernhard Kraft for noting this usability issue. Method HTMLcleaner_db of class t3lib_parsehtml_proc is modified to honor Page TSConfig setting RTE.default.proc.HTMLparser_db.xhtml_cleaning = 1. See section Known problems.
1.1.0	New FAQ about style selector boxes in IE. Numerous adjustments for eventual Opera support. Add non-breaking space to the palette of the insertcharacter palette. Add hotkety ctrl+space to insert a non-breaking space. Restructure the order of characters in the Insert special character popup window. Page TSConfig removeTags property would incorrectly remove too many tags. New Page TSConfig property keepToggleBordersInToolbar. Update of the link to the Mozilla/Firefox AllowClipboardHelper extension. The new version has new features, new translations and will work with Firefox 1.5. New TYPO3HtmlParser plugin and enableWordClean configurability. Add support for header cells (th tag) and for table sections (thead and tfoot tags) in table operations. Update all skins for th elements and scope attribute. Add support for all Page TSConfig properties supported by Classic RTE: RTE.classes, classesTable, classesTD, classesLinks, mainStyleOverride, mainStyleOverride_add, mainStyle_font, mainStyle_size, mainStyle_color, mainStyle_bgcolor, inlineStyle, disableRightClick and disablePCexamples. Make Page TSCongfig settings compatible when migrating from Classic RTE to htmlArea RTE. Add No font and No size elements if font and size selectors. New default configurations: Typical, Advanced, Demo. Extension configuration variable Enable all editor options is replaced by Default configuration settings. Correction for Mozilla/Firefox: when an email address is automatically recognized, the created link would be wrong if the local part of the email address contained parts with only one letter. Correction: some icons were missing in the element browser when adding or editing links. Correction for IE: the link button did not get activated when text was selected using keyboard arrows. Correction: The title and alt attributes produced by the link creation/editing button could undergo incorrect character sets conversions in some configurations of backend and/or frontend character sets. Add Page TSConfig properties to configure table operations dialogs: disableAlignmentFieldsetInTableOperations, disableSpacingFieldsetInTableOperations, disableColorFieldsetInTableOperations, disableLayoutFieldsetInTableOperations and disableBordersFieldsetInTableOperations New Page TSConfig property ignoreMainStyleOverride for ease of migration from Classic RTE to htmlArea RTE. Correction to some cleaning regular expressions in RemoveFormat plugin. Thanks to Ernesto Baschny. Keep character map window open until explicitly closed. Feature for Mozilla/Firefox: apply style to multiple selected cells of a table. Correction to the extraction of class selectors from some css rules. Extend t3lib_parsehtml_proc only if TYPO3 version is smaller than 4.0 Updates to Brazilian, Danish and Finnish localizations. Add Slovak localization. Modify configuration and module scripts so that the extension may be run as system, global or local extension. Restructure extension modules and resources folders. Convert some files to UNIX linebreaks. Make extension conflict with extension rte_conf. Reconfigure to hook on new version of extension Lorem Ipsum. Convert all localization files to xml format. From this version, TYPO3 3.7.0+ is required.
1.1.1	Correction to path settings affecting image drag & drop and file/image upload.
1.1.2	Correction to path settings affecting CSS files when TYPO3 is installed in a subdirectory. Cache the main JS files in typo3temp directory with hashed name including the extension version number. Adjust opening size of some popup windows. Correction to the automatic detection of url's in Mozilla/Firefox: the rightmost domain should be alphabetic. Enable link editing options in the context menu when the cursor is positioned inside a link. Enable the link button in the tool bar if some text is selected or if the cursor is positioned inside a link.
1.1.3	Remove TYPO3HtmlParser plugin when the editor is used in the frontend. Correct height, margins and padding of toolbar select fields in all editor skins. Increase default width of the editor area from 460px to 530px. Correction for Mozilla/Firefox: remove ending > from auto-detected email link. Cleaning code and adding hook in TYPO3HtmlParser plugin (mod6/parse_html.php).
1.1.4	Improved link auto-detect in Mozilla/Firefox. Fix issue 2358: http://bugs.typo3.org/view.php?id=2358 Correction to the behaviour of popups. Correction to the QuickTag plugin (attributes of hx tags). Change opening default of Acronym plugin to abreviation. Reduce font size of context menu in all skins. Work around Mozilla bug to force display update when table borders change. Adjust opening height of SpellChecker window.
1.1.6	Enable the use of the RTE in IE 7. Change name of the “Advanced” default settings to “Minimal” default settings. Remove the title field from the link creation window when the version of TYPO3 is smaller than 3.8.2. Correct default processing configuration for the case of center, font, strike and u tags when encountered outside paragraphs. Replace true linebreaks with space inside block tags and after hr tags (see bugtracker issue 2365). Correction: textstyle selection list (plugin InlineCSS) was not honoring property showTagFreeClasses.
1.1.7	Correction: incorrect default styles were assigned to links other than internal. Allow style attribute on span tag in the Demo default settings.
1.1.8	Correction: RemoveFormat plugin was removing too many tags and attributes. Thanks to Vincent Giroux. Remove conflicts with obsolete extensions deleted from TER.
1.2.0	Remove Word 2003 o:p tags on paste with enableWordClean and/or save. Path setting correction in SpellChecker plugin. Fix bugtracker issue 2656.
1.3.0	Add $RTEWrapStyle variable to frontend plugin class.tx_rtehtmlarea_pi2.php (bugtracker issue 2760). Use new TS parsing := for cumulative sets of configuration defaults. Requires TYPO3 4.0.

For subsequent changes, see the Change Log on TYPO3 Forge: http://forge.typo3.org/repositories/changes/typo3v4-core/trunk/typo3/sysext/rtehtmlarea/ChangeLog

EXT: htmlArea RTE - 65

EXT: htmlArea RTE

Stanislas Rolland

2008-01-05T21:28:53