Eigene Klassen im RTE

[ben]

Hallo.

Wie ihr seht, beschäftige ich mich gerade etwas mit dem RTE und versuche das soweit mal alles ans laufen zu bekommen. Wenn dann alles mal läuft, werde ich das auch mal säuberlich aufschreiben.

Aber nun erstmal zum Problem:
Es gibt ja die Möglichkeit, durch das CSS eigene Klassen in die HTMLarea einzubinden. Laut http://ug.typo3-nrw.de/typo3-dynamic_css.html funktioniert dies einfach dadurch, dass ich entsprechende Klasse im CSS definiere, z.B.

 .zitat {
                name  = Zitat
                value = font-weight: normal; color: #000000;background: #EEEEEE;margin-left: 30px; padding: 10px; padding-left: 10px; border-left: 7px solid #6f7589;;
        }
        

Klappt auch wunderbar. Nur leider für jedes Element, auch bei Überschriften wird das angezeigt, obwohl es das nicht soll.
Laut o.g. Link, würde es genügen, wenn ich aus ".zitat" ein "p.zitat" machen würde. Das geht aber nicht, danach wird die Absatzart komplett nicht mehr angezeigt.

Ich will es also möglich machen, die eigenen Klassen nur bestimmten Elementen zuzuordnen.
Konfiguration im TS hat bei mir nur dazu geführt, dass ich keine Klassen mehr auswählen konnte.

Vielleicht hat ja von euch jemand einen Ratschlag.

Danke,
Ben~

[mic_jan]

Hilft dir das vielleicht:
http://ug.typo3-nrw.de/typo3-dynamic_css.html

Gruss,

Michael

[ben]

Heyho.

Den link kenne ich schn. Helfen tut er mir auch nicht, denn ich beziehe mich ja schon in meinem Topic auf den Link und dessen Lösungsvorschlag :)

Dort steht nur, dass man in der CSS Datei einfach .zitat durch p.zitat ersetzten müsste - aber das funktioniert ja leider nicht.

Trotzdem danke :)

Ben~

[mic_jan]

Sorry mit dem Link, hatte wieder Tomaten auf den Augen ;-)

Also bei mir funktioniert das mit einer Klasse für Images problemlos!

Gruss,

Michael

[ben]

Mhmm, ne.

Ich habs jetzt extra nochmal geprüft.

Folgendes steht im Stylesheet:

        img.Bildlinks {
                name  = Bild links
                value = float: left;
                }

Aber es wird im RTE nicht angezeigt. Im übrigen zeigt er mir auch die Namen nicht an, aber ich meine er hätte es mal kurzfristig getan. Bin mir abe rnicht sicher, ob ich da noch Code im TS hatte.

Hier mal der TS Code, vielleicht können wir vergleichen:



## RTE Konfiguration
RTE.default {

# Zuweisung der CSS-Datei
contentCSS = fileadmin/templates/layout1/basis/extensions/htmlarea.css

## Markup options
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags = center, sdfield
removeTagsAndContents = style,script

# Buttons die gezeigt/versteckt werden
showButtons = *
hideButtons = fontstyle, fontsize, lefttoright, righttoleft, inserttag, textcolor, bgcolor,emoticon, line, spellcheck, table, user, acronym, about, strikethrough, underline
toolbarOrder = blockstylelabel, blockstyle, space, textstylelabel, textstyle, bar, linebreak, fontstyle, space, fontsize, space, formatblock, bar, bold, italic, bar, subscript, superscript, bar, left, center, right, justifyfull, bar, orderedlist, unorderedlist, outdent, indent, bar, textcolor, bgcolor, textindicator, bar, emoticon, linebreak, insertcharacter, line, link, image, table, user, acronym, bar, findreplace, spellcheck, bar, chMode, inserttag, removeformat, bar, copy, cut, paste, bar, undo, redo, bar, showhelp, about, linebreak, toggleborders, bar, tableproperties, bar, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, bar, columninsertbefore, columninsertafter, columndelete, columnsplit, bar, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge

# Hält die RTE Icons gegroupt zusammen
keepButtonGroupTogether = 1

# blendet Statusbar in htmlarea aus
showStatusBar = 1

## Add styles Left, center and right alignment of text in paragraphs and cells.
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; }, typohead
)

## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
ignoreMainStyleOverride = 1
hidePStyleItems = PRE

proc {
# tags die erlaubt / verboten sind
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, typohead
denyTags = font

# br wird nicht zu p konvertiert
dontConvBRtoParagraph = 1

# tags sind erlaubt außerhalt von p, div
allowTagsOutside = img,hr, typohead

# erlaubte attribute in p, div tags
keepPDIVattribs = align,class,style,id

# List all class selectors that are allowed on the way to the database
allowedClasses (
external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
align-left, align-center, align-right, author
)

# zeigt alle CSS-Klassen die in formate.css vorhanden sind
showTagFreeClasses = 1
# Classes: Ausrichtung
classesParagraph (
align-left, align-center, align-right, kommentar
)

# Classes: Eigene Stile
classesCharacter = author, kommentar
classesImage= rte_image


# Classes für Links (These classes should also be in the list of allowedClasses)
classesAnchor = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail
classesAnchor.default {
page = internal-link
url = external-link-new-window
file = download
mail = mail
}



# html parser einstellungen
HTMLparser_rte {

# tags die erlaubt/verboten sind
allowTags < RTE.default.proc.allowTags
denyTags < RTE.default.proc.denyTags

# tags die untersagt sind
removeTags = font

# entfernt html-kommentare
removeComments = 1

# tags die nicht übereinstimmen werden nicht entfernt (protect / 1 / 0)
keepNonMatchedTags = 0
}


# Content to database
entryHTMLparser_db = 1
entryHTMLparser_db {

# tags die erlaubt/verboten sind
allowTags < RTE.default.proc.allowTags
denyTags < RTE.default.proc.denyTags

# CLEAN TAGS
noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center

rmTagIfNoAttrib = span,div,font

# htmlSpecialChars = 1

## align attribute werden erlaubt
.tags {
p.fixAttrib.align.unset >
p.allowedAttribs = class,style,align

div.fixAttrib.align.unset >

hr.allowedAttribs = class

# b und i tags werden ersetzt (em / strong)
b.remap = strong
i.remap = em

## img tags werden erlaubt
img >
}
}

}

# Do not allow insertion of the following tags
hideTags = font

# Tabellen Optionen in der RTE Toolbar
hideTableOperationsInToolbar = 0
keepToggleBordersInToolbar = 1

# Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)
disableSpacingFieldsetInTableOperations = 1
disableAlignmentFieldsetInTableOperations=1
disableColorFieldsetInTableOperations=1
disableLayoutFieldsetInTableOperations=1
disableBordersFieldsetInTableOperations=0
}

# Use same processing as on entry to database to clean content pasted into the editor
RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db

# FE RTE configuration (htmlArea RTE only)
RTE.default.FE < RTE.default
RTE.default.FE.userElements >
RTE.default.FE.userLinks >

# Breite des RTE in Fullscreen-Ansicht
TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 80%
RTE.default.proc.entryHTMLparser_db = 1
RTE.default.proc.entryHTMLparser_db {
tags.h1.remap = typohead type="1"
tags.h2.remap = typohead type="2"
tags.h3.remap = typohead type="3"
tags.h4.remap = typohead type="4"
tags.h5.remap = typohead type="5"
tags.h6.remap = typohead type="6"
}

[mic_jan]

Irgendwie fehlt mir sowas hier:
RTE.default.contentCSS = fileadmin/template/css/rte.css
RTE.default.useCSS = 1
RTE.default.classesImage = bildobenlinks, bildobenrechts

bei dir.

Oder habe ich was übesehen?

Gruss,

Michael

[ben]

Sehr gut, der Rest stand zwar da, aber die Klassenzeile wars nochmal explizit.

Vielen Dank.

Noch eine Nachfrage: Werden bei dir die Beschreibungen der CSS-Klassen angezeigt oder auch nur die Namen? Wie gesagt, irgendwann hats mal kurz funktioniert.... :)

Grüße,
Ben~

[ben]

Ah aber ein muss ich mal sagen: Sehr zuverlässig ist das nicht.
Daher auch die Probleme: Manchmal werden die Formate so einfach nicht angezeigt. Dann muss man den Text zwei, dreimal öffnen, bis htmlarea wieder die speziellen Formate anzeigt.

Verwendet man NUR allgemeine Formate, funtkionierts... mhmm

[zefix]

Hi,
ich versuche mich auch gerade an eigenen Klassen.
Nur wird bei mir (typo3 4.0) im RTE die Pulldowns Absatz und Text nur ausgegraut angezeigt.
Wie bekomme ich die denn erst mal aktiviert?
Ich bin zwar der Anleitung der typo3-UG gefolgt, aber wo ich "Enable all editor options" einstellen soll, weis ich leider nicht.
So sieht meine TS-Config im Mometn aus:


RTE.default {
contentCSS = fileadmin/rte.css
dontConvBRtoParagraph = 1
showStatusBar = 0
showTagFreeClasses = 1
classesCharacter = textRot, textLarge
}
RTE.config.tt_content.bodytext.proc.allowedClasses = textRot, textLarge

[Garonne]

Kann mir irgendwer mal sagen wo zum Geier ich das eintragen soll? Bei mir passiert nämlich trotz 99% Kopie des Beispieles (nach Anpassung des CSS-Pfades und Anpassung der Klassen) absolut garnichts.