Rich Text Editor HTMLArea

The PRE tag can be used to display a code on the website. Unfortunately, URLs inserted in the RTE, such as http:// jweiland.net, are automatically converted into a real link. In this case, however, you do not want this. You can generally prevent this for all links inserted in the RTE as follows:

lib.parseFunc_RTE.makelinks >

However, this does not make sense, as automatic linking does take some work off the editor's hands.

Instead, you can customize the output without automatic linking only for this one day PRE in which no linking should normally occur. If you still want to set a link, you can still create it manually.

lib.parseFunc_RTE.externalBlocks := addToList(pre)
lib.parseFunc_RTE.externalBlocks {
 pre.stripNL=1
 pre.stdWrap.parseFunc = < lib.parseFunc
 pre.stdWrap.parseFunc.makelinks = 0
}

To avoid this, you must enter the following in PageTSconfig:

RTE.default.proc.entryHTMLparser_db.tags.table {
 fixAttrib.style.unset = 1
 fixAttrib.width.unset = 1
 fixAttrib.height.unset = 1
}

This is how:
<table class="contenttable" style="width:400px; height:240px">...

the following:

<table class="contenttable">...

This also works in the same way for <tr> and <td> tags:

RTE.default.proc.entryHTMLparser_db.tags.tr {
 fixAttrib.style.unset = 1
 fixAttrib.width.unset = 1
 fixAttrib.height.unset = 1
}

RTE.default.proc.entryHTMLparser_db.tags.td {
 fixAttrib.style.unset = 1
 fixAttrib.width.unset = 1
 fixAttrib.height.unset = 1 
}

It is best to use the RTE (Rich Text Editor) with the typical settings (Default configuration settings). Some classes are already predefined, which can be adapted and used. You can also add further classes and remove the default classes. The default.css is located in the extension.

If you create tables in the RTE (Rich Text Editor), these tables are assigned the CSS class contenttable by default. In the table properties, you can also assign a class with a yellow or gray background to the table. In this case, the table is assigned the CSS class csc-frame-frame1 or csc-frame-frame2.

In this tutorial, we will now show you how to assign your own CSS classes to a table.

All options available in the RTE are integrated with the help of a CSS file. For example, you can write the following in a CSS file: p.myClass {border: 1px solid green;}. The system behind the RTE knows that "p" is a block element and adds the class myClass to the option list for the block elements. This also works in the same way for the tables.

By default, the RTE loads the options from the CSS file: typo3/sysext/rtehtmlarea/res/contentcss/default.css. To add your own values, this file should be copied to fileadmin/.

The file can now be edited. Now add the new class somewhere in this file:

table.newclass {border: 1px solid green;}

The CSS specifications given here do not affect the frontend. These specifications only style the result within the RTE itself.

After the file has been saved, a few changes need to be written to the pageTSconfig.

PageTSconfig:

# Load our copied and revised RTE-default CSS file
RTE.default.contentCSS = fileadmin/default.css
# The RTE may assign the "newclass" class to a table
RTE.default.buttons.blockstyle.tags.table.allowedClasses := addToList(newclass)
# The "newclass" class may be retained when saving
RTE.default.proc.allowedClasses := addToList(newclass)
# Only if you also want to style the option within the selection list:
RTE.classes.newclass {
 name = This is my new class with a green border
 value = border: 3px solid green;
}

Our new CSS class must also be allowed for output in the frontend. This is because only CSS classes that are in this list are also transferred to the frontend.

TypoScript Setup:

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list := addToList(newclass)

After these steps, the new CSS class can be assigned to the table. This new class can now be styled using a CSS file that you have created for the frontend.

If table rows in the RTE are to have alternating row colors, formatting is possible if you can create different CSS classes for even and odd rows. This is possible with the following settings:

PageTSconfig:

RTE.default.contentCSS = fileadmin/rte.css
RTE.classes.stripedtable {
 name = Striped Table
 alternating.rows {
 # 0 = even, 1 = odd 
 startAt = 1
 oddClass = row-odd
 evenClass = row-even
 oddHeaderClass = row-odd
 evenHeaderClass = row-even
 }
}
RTE.mutuallyExclusiveClasses = row-odd,row-even

RTE.default.buttons.blockstyle.tags {
 table.allowedClasses := addToList (stripedtable)
 tr.allowedClasses := addToList (row-odd, row-even)
}
RTE.default.proc.allowedClasses := addToList (row-even,row-odd,stripedtable)

The definitions for the classes in the RTE are stored in rte.css. For the frontend, classes must be defined in the corresponding CSS files.

Setup:

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = contenttable, stripedtable

You can make certain text colors available in the RTE from which it can then choose. One option is to offer a selection via the text color button:

##Show text color button
RTE.default.showButtons := addToList (textcolor)

##Hide color picker
RTE.default.disableColorPicker = 1

RTE.default.colors = color1, color2, color3
RTE.colors {
 color1 {
 name = darkblue
 value = #100959
 }
 color2 {
 name = green
 value = #19730C
 }
 color3 {
 name = terra
 value = #B24716
 }
}

However, if the editor knows a hexadecimal value for a color, he can still use this color.