What is the right configuration for the RTE to show my own CSS classes as selection?

问题

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; }

回答1:

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

回答2:

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