03. 03. 2016, 13:57

Hallo,

ich nutze die unten stehende config für den RTE.
Leider sind damit alle Buttons in einer Reihe also sie "floaten" bzw. umbrechen bei ende des RTE nicht. So das man nach rechts scrollen muss um zum Beispiel "Textmodus umschalten" drücken kann.

Leere ich den "RTE.default >" dann stimmt zwar das mit den Buttons wieder aber es funktioniert halt sonst kaum was...

Also mach ich irgendwas falsch, könnt Ihr mir bitte sagen was? :)

Vielen Dank.

  1. RTE.default {
  2.     # CSS-Datei für rte Darstellungen im RTE Editor
  3.     contentCSS = fileadmin/Template/Css/UserRTE.css
  4.  
  5.     # Markup options
  6.     enableWordClean = 1
  7.     removeTrailingBR = 1
  8.     removeComments = 1
  9.     removeTags = center, sdfield
  10.     removeTagsAndContents = link, meta, title, style, script
  11.  
  12.     # Dies sind alle zur Verfügung stehende Buttons
  13.     # die mit showButtons hideButtons angezeigt/versteckt werden können
  14.     # showButtons (
  15.     # blockstylelabel, blockstyle, textstylelabel, textstyle, fontstyle, fontsize, formatblock,
  16.     # blockquote, insertparagraphbefore, insertparagraphafter, lefttoright, righttoleft, language,
  17.     # showlanguagemarks, left, center, right, justifyfull, orderedlist, unorderedlist, definitionlist,
  18.     # definitionitem, outdent, indent, formattext, bidioverride, big, bold, citation, code, definition,
  19.     # deletedtext, emphasis, insertedtext, italic, keyboard, monospaced, quotation, sample, small, span,
  20.     # strikethrough, strong, subscript, superscript, underline, variable, textcolor, bgcolor, textindicator,
  21.     # editelement, showmicrodata, emoticon, insertcharacter, insertsofthyphen, line, link, unlink, image,
  22.     # table, user, acronym, findreplace, spellcheck, chMode, inserttag, removeformat, copy, cut, paste,
  23.     # pastetoggle, pastebehaviour, undo, redo, about, toggleborders, tableproperties, tablerestyle,
  24.     # rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columnproperties, columninsertbefore,
  25.     # columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter,
  26.     # celldelete, cellsplit, cellmerge
  27.     # )
  28.  
  29.     # Buttons die gezeigt werden
  30.     showButtons (
  31.         blockstylelabel, blockstyle, left, center, right, fontsize, justifyfull, textstylelabel, textstyle, formatblock, 
  32.         bold, italic, subscript, superscript,
  33.         orderedlist, unorderedlist, indent, insertcharacter, link, table, findreplace, chMode, removeformat,
  34.         toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore,
  35.         columninsertafter, columndelete, cellproperties, columnsplit, cellinsertbefore, cellinsertafter, celldelete, 
  36.         cellsplit, cellmerge, textcolor, bgcolor, code, class, inserttag, hMode, showmicrodata, editelement, line, image,
  37.         insertparagraphbefore, insertparagraphafter,
  38.     )
  39.  
  40.     # Buttons die ausgeblendet werden sollen, 
  41.     # damit wird die default Einstellung des rte sicher überschrieben
  42.     hideButtons(
  43.           fontstyle, lefttoright, righttoleft, textindicator, emoticon, underline, strikethrough, user, 
  44.           spellcheck, outdent, acronym, copy, cut, paste, undo, redo, showhelp, about, blockquote,
  45.           definitionlist, definitionitem, formattext, bidioverride, big,
  46.     )
  47.  
  48.     # die Reihenfolge der Buttons im RTE
  49.     toolbarOrder (
  50.           bold, italic, formatblock, fontsize, textstyle, textstylelabel, blockstyle, blockstylelabel, underline, 
  51.           subscript, superscript, left, center, right, justifyfull, insertparagraphbefore, insertparagraphafter, 
  52.           orderedlist, unorderedlist, line, link, image, 
  53.           removeformat, findreplace, insertcharacter, indent, tableproperties, rowproperties, rowinsertabove, 
  54.           rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, 
  55.           cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, toggleborders, 
  56.           table, textcolor, bgcolor, code, chMode, class, strikethrough, hMode
  57.     )
  58.  
  59.     # Einträge im RTE select Feld "Format"
  60.     # zunächst eine Übersicht aller Standard Einträge:
  61.     # address, article, aside, div, footer, header, nav, p, h1 - h6, pre, blockquote, section,
  62.     # jetzt all das was wir nicht wollen:
  63.     buttons.formatblock.removeItems (
  64.           address, article, aside, footer, header, nav, h6, pre, blockquote, section
  65.     )
  66.  
  67.     buttons.formatblock.addItems (
  68.         span
  69.     )
  70.  
  71.     # Hält die RTE Icons gruppiert zusammen
  72.     keepButtonGroupTogether = 1
  73.  
  74.     # blendet Statusbar in htmlarea aus = 0
  75.     showStatusBar = 1
  76.  
  77.     allowedClasses (
  78.         align-left, align-center, align-right,
  79.     )
  80.  
  81.     ## Ergänzt CSS Style für Textausrichtung links - center - rechts für h, p und Tabellen
  82.     inlineStyle.text-alignment (
  83.         p.align-left, h1.align-left, h2.align-left, 
  84.         h3.align-left, h4.align-left, h5.align-left, 
  85.         h6.align-left, td.align-left { text-align: left; }
  86.  
  87.         p.align-center, h1.align-center, h2.align-center, h3.align-center, 
  88.         h4.align-center, h5.align-center, h6.align-center, td.align-center { text-align: center; }
  89.  
  90.         p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right,
  91.         h5.align-right, h6.align-right, td.align-right { text-align: right; }
  92.     )
  93.  
  94.     ## Eigens Stylesheet (für RTE Ansicht) wird nicht vom RTE EXT Stylesheet überschrieben
  95.     ignoreMainStyleOverride = 1
  96.     proc {
  97.         overrideMode = css_transform
  98.  
  99.         allowedClasses < RTE.default.allowedClasses
  100.  
  101.         # tags die erlaubt / verboten sind
  102.         allowTags (
  103.             table ,tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, 
  104.             strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center,
  105.         )
  106.  
  107.         denyTags = font
  108.  
  109.         # br wird nicht zu p konvertiert
  110.         dontConvBRtoParagraph = 1
  111.  
  112.         # tags sind erlaubt außerhalt von p, div
  113.         allowTagsOutside = img, hr
  114.  
  115.         # erlaubte attribute in p, div tags
  116.         keepPDIVattribs = class, id, style
  117.  
  118.         #classesParagraph = align-left, align-center, align-right,
  119.  
  120.         # Liste aller Klassen die in die DB geschrieben werden dürfen
  121.         # Eigene Klassen müssen hier angefügt werden!
  122.         allowedClasses (
  123.             external-link, external-link-new-window, internal-link, 
  124.             internal-link-new-window, download, mail,
  125.             align-left, align-center, align-right, author, indent
  126.         )
  127.  
  128.         classesParagraph < RTE.default.proc.allowedClasses
  129.  
  130.         # Generelle Einstellungen für den HTML-Parser
  131.         HTMLparser_rte {
  132.  
  133.             # tags die erlaubt/verboten sind
  134.             allowTags < RTE.default.proc.allowTags
  135.             denyTags < RTE.default.proc.denyTags
  136.  
  137.             # entfernt html-kommentare
  138.             removeComments = 1
  139.  
  140.             # tags die nicht übereinstimmen werden nicht entfernt (protect / 1 / 0)
  141.             keepNonMatchedTags = 0
  142.         } 
  143.  
  144.         # Vom RTE in die Datenbank
  145.         entryHTMLparser_db = 1
  146.         entryHTMLparser_db {
  147.  
  148.             # tags die erlaubt/verboten sind
  149.             allowTags < RTE.default.proc.allowTags
  150.             denyTags < RTE.default.proc.denyTags
  151.  
  152.             # Für diese Tags sind keine Attribute erlaubt
  153.             noAttrib = b, i, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
  154.  
  155.             # Diese Tags werden entfernt wenn kein Attribut vorhanden ist
  156.             rmTagIfNoAttrib = div,font
  158.  
  159.             ## align attribute werden erlaubt
  160.             tags {
  161.                 p.fixAttrib.align.unset >
  162.                 p.allowedAttribs = class, style, align
  163.  
  164.                 div.fixAttrib.align.unset >
  165.  
  166.                 hr.allowedAttribs = class
  167.  
  168.                 # Das <b>-Tag wird durch <strong> ersetzt
  169.                 b.remap = strong
  170.                 i.remap = em
  171.  
  172.                 ## img tags werden erlaubt
  173.                 img >
  174.             }
  175.         }
  176.  
  177.         # Von der Datenbank in den RTE
  178.         exitHTMLparser_db = 1
  179.         exitHTMLparser_db {
  180.         }
  181.     }
  182.  
  183.     showTagFreeClasses = 1
  184.  
  185.     # Tags die nicht eingeführt werden dürfen
  186.     hideTags = font
  187.  
  188.     # Tabellen Optionen in der RTE Toolbar
  189.     hideTableOperationsInToolbar = 0
  190.     keepToggleBordersInToolbar = 1
  191.  
  192.     # Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)
  193.     disableSpacingFieldsetInTableOperations = 1
  194.     disableAlignmentFieldsetInTableOperations = 1
  195.     disableColorFieldsetInTableOperations = 1
  196.     disableLayoutFieldsetInTableOperations = 1
  197.     disableBordersFieldsetInTableOperations = 0
  198.  
  199.     disableColorPicker = 1
  200.     colors = color1, color2, color3, color4
  201.  
  202.     buttons.textstyle.tags.a.allowedClasses = font-size-xlarge, font-size-large, font-size-middle, font-size-small, letter-spacing-1, letter-spacing-2, btn-preis, btn-tel
  203.     buttons.textstyle.tags.span.allowedClasses = font-size-xlarge, font-size-large, font-size-middle, font-size-small, letter-spacing-1, letter-spacing-2, btn-preis, btn-tel
  204.     buttons.blockstyle.tags.div.allowedClasses := addToList (center)
  205.  
  206.     allowedClasses = font-size-xlarge, font-size-large, font-size-middle, font-size-small, letter-spacing-1, letter-spacing-2, btn-preis, btn-tel, center
  207.  
  208.     # Use same processing as on entry to database to clean content pasted into the editor
  209.     enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db
  210.  
  211.  
  212.  
  213.     FE < RTE.default
  214.     FE {
  215.         userElements >
  216.         userLinks >
  217.         proc {
  218.             allowTags = p,b,i,span,div
  219.             allowedClasses < RTE.default.allowedClasses
  220.             allowedClasses := addToList(phone, contact)
  221.         }
  222.     }
  223.  
  224.     buttons {
  225.         link.properties.class.allowedClasses := addToList(phone, contact) 
  226.     }
  227. }
  228.  
  229. # Breite des RTE in Fullscreen-Ansicht
  230. TCEFORM.tt_content.bodytext.RTEfullScreenWidth = 100%
  231.  
  232. RTE.classesAnchor {
  233.     phone { 
  234.         name = Telefon
  235.     }
  236.     contact { 
  237.         name = Kontakt
  238.     }
  239. }
  240.  
  241. RTE.classes.center {
  242.       name = Center
  243. }
  244.  
  245. RTE.default.colors = color1, color2, color3, color4
  246. RTE.colors {
  247.     color1 {
  248.         name = yellow
  249.         value = #efab21
  250.     }
  251.     color2 {
  252.         name = light-grey
  253.         value = #e4e4e5
  254.     }
  255.     color3 {
  256.         name = dark-grey
  257.         value = #938e8c
  258.     }
  259.     color4 {
  260.         name = broun
  261.         value = #4b433e
  262.     }
  263. }

https://github.com/groundstack-org