RTE将我自己的CSS类显示为选择的正确配置是什么?

时间:2016-11-30 06:41:35

标签: typo3 typo3-7.6.x rte

RTE的配置随每个(大)版本而变化。现在我有了第一个7.6安装,我需要配置RTE,因此编辑器可以有段落,跨度或表格的特殊类。
例如编辑器应该能够为表选择默认的bootstrap样式:table-striped,table-bordered

我不使用6.2安装中的旧配置,而是从文档中重新创建它。

我使用网站扩展程序并在ext_localconf.php中包含

的TSconfig
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig(
    '<INCLUDE_TYPOSCRIPT: source="FILE:EXT:site_abc/Configuration/TSconfig/Page.txt">'
);

Page.txt我使用

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:site_abc/Configuration/TSconfig/rte.ts">

包括我的特殊rte配置。

由于所显示按钮的配置正常(也使用了css文件),我想知道为什么缺少可用类的配置。

我的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
}

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

2 个答案:

答案 0 :(得分:2)

以下是我在t3bootstrap.de模板

中使用的配置文件
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

答案 1 :(得分:1)

你可以在这里找到一个例子。 据我所知,这个从给定的css文件中读取类。

https://github.com/Ecodev/speciality/blob/master/Configuration/PageTS/rte.txt#L101

contentCSS = EXT:speciality/Resources/Public/StyleSheets/rte.css

希望它有所帮助。