RTE显示自己的CSS类作为选择的正确配置是什么? [英] What is the right configuration for the RTE to show my own CSS classes as selection?
本文介绍了RTE显示自己的CSS类作为选择的正确配置是什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
RTE的配置随每个(大)版本而变化.现在，我有了我的第一个7.6安装，需要在其中配置RTE，以便编辑器可以具有用于段落，跨度或表的特殊类.
例如编辑器应该能够为表格选择默认的引导程序样式:表格条纹，表格边界
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
我没有使用6.2安装中的旧配置，而是从文档中重新创建了它.
I don't use an old configuration from a 6.2 installtion but created it anew from documentation.
我使用网站扩展程序，并将TSconfig包含在ext_localconf.php中，
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">'
);
因为我使用的是Page.txt
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:site_abc/Configuration/TSconfig/rte.ts">
包括我的特殊rte配置.
to include my special rte configuration.
显示按钮的配置正常工作(也使用了css文件)，我想知道为什么缺少可用类的配置.
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.
我的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; }
推荐答案
这是我在 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
这篇关于RTE显示自己的CSS类作为选择的正确配置是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
