Zum Inhalt springen

Vorschau der CSS Stile im RTE bei den Dropdownmenüs...

Erstellt am 24. August 2009 · 1 Antwort · letzte Antwort am 28. Januar 2010

Tags: Frage

sichmann ·

Hallo Leute, im RTE sieht man ja im Firefox die beiden CSS-Stile:

.csc-frame-frame1 und .csc-frame-frame2

auch als Vorschau im Dropdownmenü.

Daher meine Frage, wie kann ich eigenen Stile auch so im Dopdown anzeigen lassen?

Die Bezeichnung Rahmen mit gelbem Hintergrund finde ich auch nicht. Wo ist dies festgelegt?

Mal mein TS:

TCEMAIN.permissions.groupid = 1
TCEMAIN.permissions.user = show, editcontent, edit, delete, new
TCEMAIN.permissions.group = show, editcontent, edit, new
mod.SHARED {
  defaultLanguageFlag = de.gif
  defaultLanguageLabel = deutsch
}
RTE {
classes {
    dunkel {
      name = dunkler Hintergrund

    }

    hell {
      name = heller Hintergrund
    }
  }
}
RTE.default {

  hidePStyleItems = div,blockquote,pre,address,h6
  contentCSS = fileadmin/css/typo3-RTE.css
  showTagFreeClasses = 1
  showButtons = *
  hideButtons =  fontstyle, fontsize, outdent, indent, formattext, bidioverride, big, bold, citation, code, definition, deletedtext, emphasis, insertedtext,  italic, keyboard,  monospaced, quotation, sample, small, strikethrough, strong, subscript, superscript, underline, variable, textcolor, bgcolor, textindicator, emoticon, spellcheck, showhelp, about, outdent, indent, lefttoright, righttoleft, user
  keepButtonGroupTogether = 1
  classesCharacter = kopfzeile,highlighttext,underline,strikethrough,mono,file,directory,infoHeadline,questionHeadline,stopHeadline,code,note,important,warning,info,question,stop,citation,mono,file,directory,infoHeadline,questionHeadline,stopHeadline,underline,strikethrough,farbe1,farbe2,farbe3,farbe4,farbe5,farbe6,farbe7,farbe8,farbe9,farbe10,farbeschwarz,farbeweiss,sehr_klein,klein,normal,gross,sehr_gross
  classesParagraph = kopfzeile,highlighttext,underline,strikethrough,mono,file,directory,infoHeadline,questionHeadline,stopHeadline,code,note,important,warning,info,question,stop,citation,csc-frame-frame1,csc-frame-frame2,align-center,align-left,align-right,align-justify,Absatzformat1,Absatzformat2,Absatz2_farbe1_linie,Absatz2_farbe2_linie,Absatz2_farbe3_linie,Absatz2_farbe4_linie,Absatz2_farbe5_linie,Absatz2_farbe6_linie,Absatz2_farbe7_linie,Absatz2_farbe8_linie,farbe1,farbe2,farbe3,farbe4,farbe5,farbe6,farbe7,farbe8,farbe9,farbe10,farbeschwarz,farbeweiss,sehr_klein,klein,normal,gross,sehr_gross
  allowedClasses = mono,file,directory,infoHeadline,questionHeadline,stopHeadline,code,note,important,warning,info,question,stop,citation,csc-frame-frame1,csc-frame-frame2,align-center,align-left,align-right,align-justify,underline,strikethrough,Absatzformat1,Absatzformat2,Absatz2_farbe1_linie,Absatz2_farbe2_linie,Absatz2_farbe3_linie,Absatz2_farbe4_linie,Absatz2_farbe5_linie,Absatz2_farbe6_linie,Absatz2_farbe7_linie,Absatz2_farbe8_linie,farbe1,farbe2,farbe3,farbe4,farbe5,farbe6,farbe7,farbe8,farbe9,farbe10,farbeschwarz,farbeweiss,sehr_klein,klein,normal,gross,sehr_gross
 
proc {
    allowedClasses < RTE.default.allowedClasses
    
  }
  FE {
    proc  {
      allowedClasses < RTE.default.allowedClasses
    }
  }
  ignoreMainStyleOverride = 0
  mainStyleOverride = body.htmlarea-content-body {font-family:'Arial', sans-serif;}
}

RTE.default.colors = color1
RTE.classesAnchor {
  externalLink {
    class = external-link
    type = url
    image >
    titleText =
  }
  externalLinkInNewWindow {
    class = external-link-new-window
    type = url
    image >
    titleText =
  }
  internalLink {
    class = internal-link
    type = page
    image >
    titleText =
  }
  internalLinkInNewWindow {
    class = internal-link-new-window
    type = page
    image >
    titleText =
  }
  download {
    class = download
    type = file
    image >
    titleText =
  }
  mail {
    class = mail
    type = mail
    image >
    titleText =
  }
}
RTE.default.proc {
keepPDIVattribs = align,class,style,id
allowedClasses < RTE.default.classesParagraph
}
#####Kopieren aus Word heraus säubern....

RTE.default.enableWordClean.HTMLparser {
   allowTags (
     a, abbr, acronym, address, blockquote, b, bdo, big, br, caption, center, cite, code, col, colgroup, del, dfn, div, em, h1, h2, h3, h4,  h5, h6, hr, i, img, ins, kbd, li, link, ol, p, pre, q, samp, sdfield,  small, strike, strong, sub, sup, table, thead, tbody, tfoot, td, th,  tr, tt, u, ul, var
          )
    # das kann man noch wesentlich strenger fassen; aus Word kommen ja  nur wenige echte HTML-Tags.
    # Um den Linksalat von Word zu verhindern, kann man z. B. Links  auch ausschalten.
     tags {
        p {
           allowedAttribs = id, title, dir, lang, xml:lang, class
           fixAttrib.align.unset = 0
           # das ist wichtig, um die unsinngen style=Attribute  loszuwerden.
           fixAttrib.style.unset = 0
           fixAttrib.class.unset = 1
        }
        # und anwenden auf alle Überschriften:
        div < .p
        h1 < .p
        h2 < .p



        h3 < .p
        h4 < .p
        h5 < .p
        h6 < .p
     }
  } 
TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 100%
sichmann ·

So geht es... habe ich mir zusammengesucht......

RTE.classes {
   align-left {
      name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft
      value = text-align: left;
   }
   align-center {
      name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter
      value = text-align: center;
   }
   align-right {
      name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright
      value = text-align: right;
    }

csc-frame-frame1 {
      value = background-color:#666;border:1px solid #000;padding:5px;color:#ececec;
      name = dunklegrauer Hintergrund + Rahmen
}
csc-frame-frame2 { 
      value = background-color:#A9A9A9;border:1px solid #000;padding:5px;color:#ececec;
      name = hellgrauer Hintergrund + Rahmen
}
Absatz2_farbe1_linie {
      value = padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:0px;border-bottom-style:solid;border-bottom-color:#7e3338;border-bottom-width:1px;font-weight:bold;color:#7E3338;
}
Absatz2_farbe2_linie {
      value = padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:0px;border-bottom-style:solid;border-bottom-color:#090;border-bottom-width:1px;font-weight:bold;color:#090;
}
Absatz2_farbe3_linie {
      value = padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:0px;border-bottom-style:solid;border-bottom-color:#000;border-bottom-width:1px;font-weight:bold;color:#000;
}
Absatz2_farbe4_linie{
      value = padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:0px;border-bottom-style:solid;border-bottom-color:#FFF;border-bottom-width:1px;font-weight:bold;color:#FFF;
}
Absatz2_farbe5_linie {
      value = padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:0px;border-bottom-style:solid;border-bottom-color:#00F;border-bottom-width:1px;font-weight:bold;color:#00F;
}
Absatz2_farbe6_linie {
      value = padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:0px;border-bottom-style:solid;border-bottom-color:#FF0;border-bottom-width:1px;font-weight:bold;color:#FF0;
}
Absatz2_farbe7_linie {
      value = padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:0px;border-bottom-style:solid;border-bottom-color:#CF0;border-bottom-width:1px;font-weight:bold;color:#CF0;
}
Absatz2_farbe8_linie { 
      value = padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:0px;border-bottom-style:solid;border-bottom-color:#90C;border-bottom-width:1px;font-weight:bold;color:#90C;
}
Absatz2_farbe9_linie {
      value = padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:0px;border-bottom-style:dotted;border-bottom-color:#666;border-bottom-width:1px;font-weight:bold;color:#CCC;
}
Absatzformat1 { 
      value = padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;color:#252729;text-transform:uppercase;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:solid;border-top-color:#575E68;border-right-color:#575E68;border-bottom-color:#575E68;border-left-color:#575E68;
}
Absatzformat2 {
      value = letter-spacing:1px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:0px;border-bottom-style:solid;border-bottom-color:#7E3338;border-bottom-width:1px;
}
sehr_klein { 
	name = Schriftart sehr klein
      value = font-size:70%;
}
klein { 
	name = Schriftart klein
      value = font-size:85%;
}
normal {  
	Schriftart normal
      value = font-size:100%;
}
gross { 
	Schriftart gross
      value = font-size:120%;
}
sehr_gross {  
	name = Schriftart sehr gross
      value = font-size:140%;
}
strikethrough { 
	name = Schrift durchgestrichen
      value = text-decoration:line-through;
}
underline { 
	name = Schrift unterstrichen
      value = text-decoration:underline;
}
warning { 
	name = Wichtiges 
      value = background:#fdd;padding:1em;border-bottom:1px #dbb dotted;
}
code {
	name =  Quellcode
      value = font-family:"Courier New",Courier,monospace;
}
important { 
	name = besonder wichtig
      value = background:#ffd;padding:1em;border-bottom:1px #ddb dotted;
}
indent { 
      value = margin-left:1.5em;
}
mono { 
	name = Schriftart Monospace
      value = font-family:"Courier New",Courier,monospace;padding:0 0.3em 0 0.3em;background:#f0f0f4;border:1px #ccd solid;
}

note {
	name = Schriftnotiz
      value =  background:#dfd;padding:1em;border-bottom:1px #bdb dotted;
}
questionHeadline { 
	name = Frage Ueberschrift
      value = display:block;color:#fff;text-transform:uppercase;font-weight:bold;border-bottom:2px solid white;padding-bottom:0.5em;margin-bottom:-1em;margin-left:-4em;padding-left:4em;margin-right:-1.5em;
}
stopHeadline { 
	name = Stop Ueberschrift
      value = display:block;color:#A43F15;text-transform:uppercase;font-weight:bold;padding-bottom:0.5em;margin-bottom:-1em;
}

citation { 
	name = Absatz mit Sprechblase
      value = background:#fff url(../img/icons/sprechblase.gif) 10px 10px no-repeat;color:#187ba2;padding:1.5em 1.5em 1.5em 4em;border:1px solid #187ba2;font-style:italic;
}
directory { 
	Inhaltsverzeichniss mit Grafik
      value = font-family:"Courier New",Courier,monospace;padding:0 0 0 15px;color:#000088;background:transparent url('../img/icons/dir.gif') no-repeat left;
}
file { 
	name = Datei mit Icon
      value = font-family:"Courier New",Courier,monospace;padding:0 0 0 14px;color:#000088;background:transparent url('../img/icons/file.gif') no-repeat left;
}


info { 
	name = Info mit Icon Ausrufezeichen
	value = padding:1.5em 1.5em 1.5em 4em;background-color:#f7f7ef;background-image:url(../img/icons/ausrufez-blau.gif);background-repeat:no-repeat;background-position:10px 10px;
}
infoHeadline { 
      value = display:block;color:#187ba2;text-transform:uppercase;font-weight:bold;border-bottom:2px solid white;padding-bottom:0.5em;margin-bottom:-1em;margin-left:-4em;padding-left:4em;margin-right:-1.5em;
}


question { 
	name = Frage + Icon Fragezeichen
      value = background:#A43F15 url(../img/icons/fragez-blau.gif) 10px 10px no-repeat;color:#fff;padding:1.5em 1.5em 1.5em 4em;
}



stop { 
	name = Stop mit Icon Stop
      value = background:#fff url(../img/icons/stop.gif) 10px 10px no-repeat;padding:1.5em 1.5em 1.5em 4em;border:1px solid #a43f15;
}



p.farbe1 {
      value =  color:#8c3f46;
}
p.farbe2{
      value = 	color: #4d5159;	
}
p.farbe3 {
      value = 	color: #7c8c03;	
}
p.farbe4 {
      value = 	color: #bf8360;
}
p.farbe5 {
      value = 	color: #f2f2f2;
}
p.farbe6 {
      value = 	color: #434343;
}
p.farbe7 {
      value = 	color: #6e6e6e;
}
p.farbe8 {
      value = 	color: #888c99;
}
p.farbe9 {
      value = 	color: #bf0101;
}
p.farbe10 {
      value = 	color: #bf0101;
}


span.farbe1 {
      value =  color:#8c3f46;
}
span.farbe2{
      value = 	color: #4d5159;	
}
span.farbe3 {
      value = 	color: #7c8c03;	
}
span.farbe4 {
      value = 	color: #bf8360;
}
span.farbe5 {
      value = 	color: #f2f2f2;
}
span.farbe6 {
      value = 	color: #434343;
}
span.farbe7 {
      value = 	color: #6e6e6e;
}
span.farbe8 {
      value = 	color: #888c99;
}
span.farbe9 {
      value = 	color: #bf0101;
}
span.farbe10 {
      value = 	color: #bf0101;
}


} #ende RTE Classen

RTE.classesAnchor {
   internalLink {
      class = internal-link
      type = page
      image = fileadmin/img/icons/internal_link.gif
   }
   externalLink {
      class = external-link
      type = url
      image = fileadmin/img/icons/external_link.gif
   }
   externalLinkInNewWindow {
      class = external-link-new-window
      type = url
      image = fileadmin/img/icons/external_link_new_window.gif
   }
   internalLinkInNewWindow {
      class = internal-link-new-window
      type = page
      image = fileadmin/img/icons/internal_link_new_window.gif
   }
   download {
      class = download
      type = file
      image = fileadmin/img/icons/file.gif
         }
   mail {
      class = mail
      type = mail
image = fileadmin/img/icons/mail.gif
   }
}

# Default-Konfiguration
RTE.default {

   contentCSS = fileadmin/css/typo3-RTE.css
   enableWordClean = 1
   removeTrailingBR = 1
   removeComments = 1
   removeTags = center, font, o:p, sdfield, strike, u
   removeTagsAndContents = style,script
   showButtons = textstyle, textstylelabel, blockstyle, blockstylelabel,bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, chMode, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, showhelp, about
   hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste
   keepButtonGroupTogether = 1
   showStatusBar =  1
 
   inlineStyle.text-alignment (
      p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, td.align-left { text-align: left; }
      p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, td.align-center { text-align: center; }
      p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, td.align-right { text-align: right; }
   )
 
   ignoreMainStyleOverride = 1
 
   proc {
 
      allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center
      denyTags = font
      dontConvBRtoParagraph = 1
      allowTagsOutside = img,hr
      keepPDIVattribs = align,class,style,id
      
      allowedClasses = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail, mono,file,directory,infoHeadline,questionHeadline,stopHeadline,code,note,important,warning,info,question,stop,citation,csc-frame-frame1,csc-frame-frame2,align-center,align-left,align-right,align-justify,underline,strikethrough,Absatzformat1,Absatzformat2,Absatz2_farbe1_linie,Absatz2_farbe2_linie,Absatz2_farbe3_linie,Absatz2_farbe4_linie,Absatz2_farbe5_linie,Absatz2_farbe6_linie,Absatz2_farbe7_linie,Absatz2_farbe8_linie,farbe1,farbe2,farbe3,farbe4,farbe5,farbe6,farbe7,farbe8,farbe9,farbe10,farbeschwarz,farbeweiss,sehr_klein,klein,normal,gross,sehr_gross 
         
      

      HTMLparser_rte {
         allowTags < RTE.default.proc.allowTags
         denyTags < RTE.default.proc.denyTags
         removeTags = font
         removeComments = 1
         keepNonMatchedTags = 0
      }


      entryHTMLparser_db = 1
      entryHTMLparser_db {

         allowTags < RTE.default.proc.allowTags

         denyTags < RTE.default.proc.denyTags

         noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
         rmTagIfNoAttrib = span,div,font

         htmlSpecialChars = 1

         tags {
            p.fixAttrib.align.unset >
            p.allowedAttribs = class,style,align
            div.fixAttrib.align.unset >
            hr.allowedAttribs = class

            b.remap = strong
            i.remap = em

            img >
         }
      }




      # Transformationsweg: Vom RTE in die Datenbank (siehe 28.2)
      exitHTMLparser_db = 1
      exitHTMLparser_db {

         tags.b.remap = strong

         tags.i.remap = em
         keepNonMatchedTags = 1
         htmlSpecialChars = 0
      }
   }
   
classesCharacter = kopfzeile,highlighttext,underline,strikethrough,mono,file,directory,infoHeadline,questionHeadline,stopHeadline,code,note,important,warning,info,question,stop,citation,mono,file,directory,infoHeadline,questionHeadline,stopHeadline,underline,strikethrough,farbe1,farbe2,farbe3,farbe4,farbe5,farbe6,farbe7,farbe8,farbe9,farbe10,farbeschwarz,farbeweiss,sehr_klein,klein,normal,gross,sehr_gross
classesParagraph = align-left, align-center, align-right
  
   showTagFreeClasses = 1

   hideTags = font

   hideTableOperationsInToolbar = 0
   keepToggleBordersInToolbar = 1

   disableSpacingFieldsetInTableOperations = 1
   disableAlignmentFieldsetInTableOperations = 1
   disableColorFieldsetInTableOperations = 1
   disableLayoutFieldsetInTableOperations = 1
   disableBordersFieldsetInTableOperations = 0

   

   
}
RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db

RTE.default.FE < RTE.default
RTE.default.FE.userElements >
RTE.default.FE.userLinks >
# Breite des RTE in Fullscreen-Ansicht
TCEFORM.tt_content.bodytext.RTEfullScreenWidth = 90%


TCEFORM.pages.TSconfig.config.rows = 50
TCEFORM.pages.TSconfig.config.cols = 50


TCEMAIN.permissions.groupid = 1
TCEMAIN.permissions.user = show, editcontent, edit, delete, new
TCEMAIN.permissions.group = show, editcontent, edit, new
mod.SHARED {
  defaultLanguageFlag = de.gif
  defaultLanguageLabel = deutsch
}
RTE.config.tt_content.bodytext.proc.allowedClasses = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail, mono,file,directory,infoHeadline,questionHeadline,stopHeadline,code,note,important,warning,info,question,stop,citation,csc-frame-frame1,csc-frame-frame2,align-center,align-left,align-right,align-justify,underline,strikethrough,Absatzformat1,Absatzformat2,Absatz2_farbe1_linie,Absatz2_farbe2_linie,Absatz2_farbe3_linie,Absatz2_farbe4_linie,Absatz2_farbe5_linie,Absatz2_farbe6_linie,Absatz2_farbe7_linie,Absatz2_farbe8_linie,farbe1,farbe2,farbe3,farbe4,farbe5,farbe6,farbe7,farbe8,farbe9,farbe10,farbeschwarz,farbeweiss,sehr_klein,klein,normal,gross,sehr_gross