htmlarea / RTE (Konfiguration) - so gehts

lambdaoe schrieb

Hast Du die entsprechenden CSS-Definition auch erstellt und mit der Seite verlinkt?

Habe die CSS von der ersten Seite erstellt und in der root des Webspaces abgelegt. Ist die dort richtig?

lambdaoe schrieb

Schau mal Deine Seite an. Sind
1. die Texte mit den CSS-Klassen/ID's versehen und

Ist damit dieses im Seitenquelltext gemeint?

<!--  CONTENT ELEMENT, uid:12/text [begin] -->
		<a id="c12"></a><br /><b><font color="darkblue"></font></b><br /><br /><p class="align-left">Test</p>
<p class="align-center"><link http:xxx="" -="" external-link-new-window="" ffneteinenexternenlinkineinemneuenfenster="" />Test</link></p>
	<!--  CONTENT ELEMENT, uid:12/text [end] -->

lambdaoe schrieb

2. gibt es diese für diese Seite definiert, d.h. gibt es ein Stylesheet dazu?
Ich vermute dass 2. nicht gegeben ist.

Wenn ja, dann ist dafür noch nichts hinterlegt. Muss dann nur die CSS Datei angepasst werden, muss eine andere dafür angelegt werden oder muss ich das Typo noch beibringen?

Danke schon mal für die schnelle Hilfe. 🙂

In deinem Seitencode hast Du z.B.

<p class="align-center"><link http:xxx="" -="" external-link-new-window="" ffneteinenexternenlinkineinemneuenfenster="" />Test</link>

Da findest Du das class="align-center". Damit der Browser aber weis was er tun soll muss du ihn das auch sagen. D.h. du musst die Klasse align-center definieren.

Dazu gibt es die sogenannten Style-Definitionen. Diese sind im Headerbereich entweder direkt angegeben (nur in besonderen Fällen) oder in Stylessheet die über den Link-Befehl eingebunden werden. Z.B.

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_e45948f2e1.css" />

Lies mal am besten unter http://de.selfhtml.org/css/index.htm nach.

Lies auch mal die Doku für rtehtml bzw. birgitr hat ein paar Kommentare vorher die Einbindung beschrieben.

Gruß.

Vielen Dank schon mal, hab es hin bekommen.

Jetzt habe ich nur noch das Problem, dass mir die Links nicht richtig angezeigt werden. Sieht im Quelltext so aus:

<link 9 _blank external-link-new-window "Öffnet einen externen Link in einem neuen Fenster">Formatierungselemente</link>

Ich denke mir mal, dass da noch ein Paar Zusätze fehlen wie z.B. href und Ähnliches. Die Frage ist nur, wie bekomme ich Typo das beigepult?

Nebenbei werden mir Unterstreichungen mit <//u> vor und nach dem zu unterstreichenden Teil gesetzt werden. Wodurch könnte das bewirkt werden?

Hallo,

ich habe ein Problem mit dem RTE. Hoffe sehr das ihr mir helfen könnt. Es werden keine <span>-Tags innerhalb von <p>-Tags gespeichert. Also

<p><span class="textrot">roter Text</span> anderer Text</p>

wird zu

<p>roter Text anderer Text</p>

Meine TSConfig in der Rootpage:

#*** RTE Classe des Interface (Ausrichtung)
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;
        }
}

#
# *** Entfernt das Bild vor den Links
RTE.classesAnchor {
        internalLink {
                class = internal-link
                type = page
                image >
        }
        externalLink {
                class = external-link
                type = url
                image >
        }
        externalLinkInNewWindow {
                class = external-link-new-window
                type = url
                image >
        }
        internalLinkInNewWindow {
                class = internal-link-new-window
                type = page
                image >
        }
        download {
                class = download
                type = file
                image >
        }
        mail {
                class = mail
                type = mail
                image >
        }
}


## RTE Konfiguration
RTE.default {

        # Zuweisung der CSS-Datei
        contentCSS = fileadmin/template/main/res/symrise_rte.css
        
        #Zuweisung der eigenen Textklassen
        #classesCharacter = textgruen, textrot, hometeaser
        #classesParagraph = textgruen, textrot, hometeaser
       
        ## Markup options
        enableWordClean = 1
        removeTrailingBR = 1
        removeComments = 1
        removeTags = center, sdfield
        removeTagsAndContents = style,script

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

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

        # blendet Statusbar in htmlarea aus
        showStatusBar =  0

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

        ## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
        ignoreMainStyleOverride = 1
       
        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
                denyTags = font

                # br wird nicht zu p konvertiert
                dontConvBRtoParagraph = 1

                # tags sind erlaubt außerhalt von p, div
                allowTagsOutside = img,hr
				
				# tags sind erlaubt innerhalb von p, div
				allowedTagsInside = span

                # erlaubte attribute in p, div tags
                keepPDIVattribs = align,class,style,id
                
                # die eigenen Klassen erlauben
                #allowedClasses = textgruen, textrot, hometeaser
                #classesParagraph = textgruen, textrot, hometeaser

                # 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, hometeaser, textgruen, textrot
                )       

                # 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 {
                                span.fixAttrib.style.unset = 1
				p.fixAttrib.align.unset = 1
				div.fixAttrib.align.unset = 1
				span.allowedAttribs = class
				p.allowedAttribs = class
				hr.allowedAttribs = class
				b.allowedAttribs = xml:lang
				blockquote.allowedAttribs = xml:lang
				cite.allowedAttribs = xml:lang
				em.allowedAttribs = xml:lang
				i.allowedAttribs = xml:lang
				q.allowedAttribs = xml:lang
				strong.allowedAttribs = xml:lang
				sub.allowedAttribs = xml:lang
				sup.allowedAttribs = xml:lang
				tt.allowedAttribs = xml:lang

                                ## img tags werden erlaubt
                                img >
                        }
                }

        }

        # Classes: Ausrichtung
        classesParagraph (
                align-left, align-center, align-right
        )

        # Classes: Eigene Stile
        classesCharacter = textgruen, textrot, hometeaser
		classesParagraph = textgruen, textrot, hometeaser


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

        # zeigt alle CSS-Klassen die in symrise_rte.css vorhanden sind
        showTagFreeClasses = 1

        # 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%

# Span innerhalb von <P> Tags nicht löschen
RTE.default.proc.HTMLparser_db.tags.span.allowedAttribs = lang, title, span, class

Innerhalb anderer Tags, z.B. <h1> werden <span>-Tags übernommen.

[Edit] Jetzt habe ich doch die Versionen vergessen:
Typo3 4.0.5
htmlArea RTE 1.3.8

da ich nun 1 stunde hier herumgekämpfte habe, frag ich mal nach
ich wollt eigentlich nur Style bzw. CSS Klasse in die Text Auswahl hinzufügen.
wenn ich

RTE.default.showTagFreeClasses = 1

setzte seh ich zwar meine CSS Datei aber beim speichern geht wieder alles verloren #angry#
wenn ich

RTE.classes {
box {
name = box
value = font-color:blue
}
}

hinzufüge wird meine Farbauswahl bei Text auch noch grau! :o
am ende sollte einfach eine Klasse zur Auswahl stehen, die ich anwähle, nachdem ich alles markiert habe und mein RTE packt mir eine Box(in der classe definiert) um den Text!
kann mir da jemand helfen

Ein Bischen Code würde sicherlich helfen den Sachverhalt besser zu verstehen.
Hast du die Klassen denn auch schon erlaubt und eingebunden?

## RTE Konfiguration
RTE.default { 
	...        
        proc {
		...           
                # Listen der erlaubten Klassen
                allowedClasses (
                        box, box2, ...
                )                     
		... 
        }
	... 
        # Einbinden eigener Klassen 
	# Text
        classesCharacter = box
        # Absatz
        classesParagraph = box2
	...
}

RTE.default.contentCSS = fileadmin/css/style.css
RTE.default.useCSS = 1
RTE.default.proc.allowedClasses (
	box_top,box_content,box_bottom,box
)
RTE.default.classesCharacter = box,box_top,box_content,box_bottom
#zeigt alle klassen aus CSS
RTE.default.showTagFreeClasses = 1
#RTE.config.tt_content.bodytext.types.bullets.disable = 1

damit funktioniert die ganze sache eigentlich grundlegend, nur wüste ich zu gern wie ich meinem RTE sage das er keine span sondern div Tags nehmen soll?
wo muss ich da was eintrage?

Dafür sollte man das <p>-Tag nehmen, da dies auch semantisch korrekt ist.

cordman schrieb

Dafür sollte man das <p>-Tag nehmen, da dies auch semantisch korrekt ist.

Welche Möglichkeiten gibt es, diese selbst definierten Styles nur auf bestimmte Tags anzuwenden. Mit dem oben angeführten Beispiel werden ja nur Absätze berücksichtigt. Wie kann ich das Beispiel umschreiben damit ich A-Tags in Absätzen fürmatiren kann?

Mach es doch per CSS indem du z.B. eine Klasse für Links in Absätzen dafür anlegst.

p a { Eigenschaft; }
p a:zustand1 { Eigenschaft; }
p a:zustand2 { Eigenschaft; }
...

Weiß jemand, wie ich den Dateiennamen ausblenden kann?
Also das z.B. PDF Symbol soll zwar gezeigt werden, aber der Name dahinter nicht.
Noch schöner wäre es, wenn immer z.B. "hier downloaden" dahinter stehen würde.
Das Symbol bekomme ich über TS weg :-) , aber den Namen #paralyzed#

Typo4.04 -> htmlArea RTE 1.4.3

Danke Andreas

Ist hartcodiert in "typo3/sysext/css_styled_content/pi1/class.tx_cssstyledcontent_pi1.php".
Aber macht es Sinn den Dateinamen zu entfernen?

Das wirkt sich doch auf die Zugänglichkeit der Links aus. :o

Hi Leute!

Also ich nutze Typo3 4.1 mit RTE 1.5.1 und habe alles genau so eingetragen, wie es Karin auf der 1. Seite beschrieben hat. Allerdings tut sich in meinem RTE gar nichts, ich kann die beschriebenen Klassen zu keiner Zeit auswählen.
Auch andere Tutorials von anderen Seiten haben keine Wirkung gezeigt.
Wo könnte hier noch der Fehler liegen? Oder ist die Version 1.5.1 komplett anders?

Viele Grüße

Lemon

Also wenn du sicher bist, dass die CSS Datei am richtigen Ort ist, kannst du auf jeden Fall mal den Browser Cache löschen und probieren ob sich dann etwas tut.

oder einmal komplett ausloggen, chache löschen und wieder rein.

Hallo Lemon,

wo hast du den die RTE config eingetragen?

Oder klappt das nur nicht mit der Absatzformatierung?

Grüße
ms_k

Hi Leute!

Hatte jetzt Zeit, alles an Cache zu löschen, was ich finden konnte, sowohl im Browser als auch in Typo3. Und jetzt klappts endlich.
NUR: ich sehe jetzt im RTE nur die Formatierungsmöglichkeit, die in meiner rte.css steht. Die Standard-Formatierungen wie z.B. "align-left" oder die verschiedenen Überschriften stehen mir jetzt nicht mehr zur Verfügung.
Dabei stehen doch z.B. die align-Formatierungen doch explizit zu Beginn von Karin's Anleitung.

Viele Grüße

Lemon

mach doch eine eigene abatzklasse mit float links rechts 😉

Stehen die Klassen denn auch in deiner CSS-Datei?

Ui, weiß zwar nciht, ob bereits jemand das angemerkt hat, aber wenn man die br-tags nicht zu p-tags konvertiert haben möchte, dann muss man br-tags auch außerhalb von p-tags zulassen.
Das fehlte noch in der Ausgangskonfiguration.