The configuration of the RTE changes with each (big) version. Now I have my first 7.6 installation where I need to configure the RTE so editors can have special classes for paragraphs, spans or tables.
e.g. the editor should be able to select the default styles of bootstrap for tables: table-striped, table-bordered
I don't use an old configuration from a 6.2 installtion but created it anew from documentation.
I use a site extension and include the TSconfig in ext_localconf.php with
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig(
'<INCLUDE_TYPOSCRIPT: source="FILE:EXT:site_abc/Configuration/TSconfig/Page.txt">'
);
in that Page.txt I use
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:site_abc/Configuration/TSconfig/rte.ts">
to include my special rte configuration.
AS the configuration of the shown buttons is working (also the css-file is used) I wonder why the configuration of the available classes is missing.
my rte.ts:
RTE {
default {
contentCSS.rte = EXT:site_abc/Resources/Public/Css/rte.css
proc {
allowTags = a, abbr, article, b, bdo, big, blockquote, br,
caption, center, cite, code, div, em, footer, header,
h2, h3, h4, h5, h6, hr, i, li, link, nav, ol, p, pre,
section, small, span, strike, strong, sub, sup, table,
thead, tbody, tfoot, td, th, tr, u, ul
allowedClasses := addToList(table-striped,table-bordered,table-condensed)
allowedClasses := addToList(abc-red,abc-green)
}
showButtons (
blockstylelabel, blockstyle, textstylelabel, textstyle, fontstyle, fontsize,
formatblock, blockquote, left, center, right, justifyfull, orderedlist, unorderedlist,
definitionlist, definitionitem, outdent, indent, formattext, bidioverride, big,
bold, italic, subscript, superscript, underline, textcolor, bgcolor, textindicator,
insertcharacter, insertsofthyphen, line, link, unlink, image, table, findreplace,
spellcheck, chMode, inserttag, removeformat, copy, cut, paste, pastetoggle, pastebehaviour,
undo, redo, about, toggleborders, tableproperties, tablerestyle, rowproperties,
rowinsertabove, rowinsertunder, rowdelete, rowsplit, columnproperties,
columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties,
cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
)
toolbarOrder (
copy, cut, paste, pastetoggle, pastebehaviour, bar,
undo, redo, bar, chMode, removeformat, bar,
findreplace, spellcheck, bar,
textcolor, bgcolor, textindicator, bar,
editelement, insertcharacter, insertsofthyphen, line, image, abbreviation, bar,
link, unlink, bold, italic, subscript, superscript, underline, bar, linebreak,
blockstylelabel, blockstyle, space, formatblock, bar,
orderedlist, unorderedlist, outdent, indent, bar,
textstylelabel, textstyle, space, formattext, space, fontstyle, space, fontsize, bar,
left, center, right, justifyfull, bar, linebreak,
table, toggleborders, bar,
tableproperties, tablerestyle, bar,
rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, bar,
columnproperties, columninsertbefore, columninsertafter, columndelete, columnsplit, bar,
cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
)
}
buttons {
blockstyle {
tags {
all.allowedClasses := addToList(table-striped,table-bordered)
table.allowedClasses := addToList(table-striped,table-bordered)
}
showTagFreeClasses = 1
}
textstyle {
tags.all.allowedClasses := addToList(abc-red,abc-green)
tags.span.allowedClasses = abc-red, abc-green
showTagFreeClasses = 1
}
}
classes {
test1 {
name = test1
value = background-color:red;
}
table-striped {
name = striped table
value = background-color:#eeffee;
}
table-bordered {
name = bordered table
value = background-color:#ffeeee;
}
abc-red {
name = red
value = #CC1111
}
abc-green {
name = green
value = #11cc11
}
}
colors {
abc-red {
name = red
value = #CC1111
}
abc-green {
name = green
value = #11cc11
}
}
default.colors < .colors
default.classes < .classes
}
and the rte.css:
table.table-striped { border:1px solid red; }
table.table-bordered { border: 1px dashed cyan; }
table.table-condensed { border: 1px dotted greenyellow; }
span.abc-red { color:#cc1111; }
span.abc-green { color:#11cc11; }
.table-striped { border:1px solid red; }
.table-bordered { border: 1px dashed cyan; }
.table-condensed { border: 1px dotted greenyellow; }
.abc-red { color:#cc1111; }
.abc-green { color:#11CC11; }
Here is the configuration file which I use in my t3bootstrap.de Template
RTE.classes {
# lists
checklist {
name = Checkliste
}
# tables
table {
name = Normale Tabelle
}
table-condensed {
name = Verkürzte Tabelle
}
table-bordered {
name = Tabelle mit Rahmen
}
table-styled {
name = Tabelle mit anderem Design
}
# aligns
align-justify {
name = LLL:EXT:rtehtmlarea/Resources/Private/Language/locallang_tooltips.xlf:justifyfull
}
align-left {
name = LLL:EXT:rtehtmlarea/Resources/Private/Language/locallang_tooltips.xlf:justifyleft
value = text-align: left;
}
align-center {
name = LLL:EXT:rtehtmlarea/Resources/Private/Language/locallang_tooltips.xlf:justifycenter
value = text-align: center;
}
align-right {
name = LLL:EXT:rtehtmlarea/Resources/Private/Language/locallang_tooltips.xlf:justifyright
value = text-align: right;
}
text-lowercase {
name = Kleinbuchstaben
}
text-uppercase {
name = Großbuchstaben
}
style1 {
name = Stil 1
}
htmlCode {
name = HTML Code
}
phpCode {
name = PHP Code
}
}
RTE.classesAnchor {
internalLinkInNewWindow {
class = internal-link-new-window
type = page
titleText = LLL:EXT:rtehtmlarea/res/accessibilityicons/locallang.xml:internal_link_new_window_titleText
}
download {
class = download
type = file
titleText = LLL:EXT:rtehtmlarea/res/accessibilityicons/locallang.xml:download_titleText
}
mail {
class = mail
type = mail
titleText = LLL:EXT:rtehtmlarea/res/accessibilityicons/locallang.xml:mail_titleText
}
more-link {
class = more-link
type = page
titleText = LLL:EXT:demotemplate/Resources/Private/Language/locallang.xml:more_link_titleText
altText = LLL:EXT:demotemplate/Resources/Private/Language/locallang.xml:more_link_altText
}
button-link {
class = btn
type = page
titleText = LLL:EXT:demotemplate/Resources/Private/Language/locallang.xml:more_link_titleText
altText = LLL:EXT:demotemplate/Resources/Private/Language/locallang.xml:more_link_altText
}
}
RTE.default {
showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, left, center, right, justifyfull
showButtons := addToList(formatblock, bold, italic, subscript, superscript)
showButtons := addToList(orderedlist, unorderedlist, outdent, indent, textindicator,abbreviation)
showButtons := addToList(insertcharacter, link, unlink, table, findreplace, chMode, removeformat, copy, cut, paste, pastetoggle, pastebehaviour, undo, redo)
showButtons := addToList(toggleborders, tableproperties)
showButtons := addToList(rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit)
showButtons := addToList(columninsertbefore, columninsertafter, columndelete, columnsplit)
showButtons := addToList(cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge)
defaultContentLanguage = de
buttons.textstyle.tags.span.allowedClasses = label,label-default,label-primary,label-danger,label-success,label-info,label-warning,important,detail,underline,mono,file,directory,oneclass
buttons.textstyle.tags.REInlineTags >
buttons.textstyle.REInlineTags >
buttons.blockstyle.tags.table.allowedClasses = table,table-condensed,table-bordered,table-striped
buttons.blockstyle.tags.p.allowedClasses = text-muted,text-primary,text-dimmed,text-warning,text-danger,text-success,text-info,bg-primary,bg-success,bg-info,bg-warning,bg-danger,box
buttons.blockstyle.tags.p.allowedClasses := addToList(align-left,align-center,align-right,align-justify)
buttons.blockstyle.tags.p.allowedClasses := addToList(text-capitalize,text-uppercase,text-lowercase)
contentCSS = EXT:demotemplate/Resources/Public/CSS/rte.css
buttons.link.relAttribute.enabled = 1
// Make rtehtmlarea resizable
rteResize = 1
proc {
allowedClasses := addToList( table,table-condensed,table-bordered,table-striped,table-hover,table-styled )
allowedClasses := addToList( text-uppercase,text-lowercase,text-capitalize,text-muted,text-primary,text-dimmed,text-warning,text-danger,text-success,text-info,bg-primary,bg-success,bg-info,bg-warning,bg-danger )
allowTagsOutside := addToList( pre )
allowTags := addToList( pre )
// Tags allowed in Typolists
allowTagsInTypolists = br,font,b,i,u,a,img,span
// Keep unknown tags
dontRemoveUnknownTags_db = 1
// Allow tables
preserveTables = 1
entryHTMLparser_db = 1
entryHTMLparser_db {
// Tags allowed
allowTags < RTE.default.proc.allowTags
// Tags denied
#denyTags >
// HTML special characters
htmlSpecialChars = 0
// Allow IMG tags
#tags.img >
// Additionnal attributes for P & DIV
tags.div.allowedAttribs = class,style,align
tags.p.allowedAttribs = class,style,align
// Tags to remove
removeTags = center, font, o:p, sdfield, strike, u
// Keep non matched tags
keepNonMatchedTags = protect
}
// HTML parser
HTMLparser_db {
// Strip attributes
noAttrib = br
// XHTML compliance
xhtml_cleaning = 1
}
// Exit HTML parser
exitHTMLparser_db = 1
exitHTMLparser_db {
// Remap bold and italic
tags.b.remap = strong
tags.i.remap = em
// Keep non matched tags
keepNonMatchedTags = 1
// HTML special character
htmlSpecialChars = 0
}
}
}
RTE.default.FE < RTE.default
You can find an example here. As far as i remeber, this one reads the classes from the given css file.
https://github.com/Ecodev/speciality/blob/master/Configuration/PageTS/rte.txt#L101
contentCSS = EXT:speciality/Resources/Public/StyleSheets/rte.css
Hope it helps.
来源：https://stackoverflow.com/questions/40881884/what-is-the-right-configuration-for-the-rte-to-show-my-own-css-classes-as-select