htmlarea / RTE (Konfiguration) - so gehts

Hallo Karin,

in Dreamweaver erstelle ich meine Templates und alle anderen
Inhaltselemente, weil ich hier ja erst mal die notwendigen
CSS-Auszeichnungen erstelle. Vom Workflow her, geht es meiner
Meinung nach hier deutlich schneller. Hier vergebe ich auch
meine Klassen. Wenn dann alles passt, packe ich den Code in
die RTE, damit der Kunde hier seine restlichen Datein eingeben
oder ändern kann.
Und da ich die Klassen sowieso schon in DW angelegt habe, finde
ich es in diesem Fall nicht sinnvoll, dass er mir diese überschreibt,
da ich ich gerade bei größeren Projekten unterschiedlich formatiere
Tabellen habe.

Gut, dann werde ich das auch mal in die "allowedClasses" einfügen.

Dazu vielleicht noch ne andere Frage:
Verschiedene Inhalte = verschiedene Tabellen = verschiedene
Bildgrößen. Nehmen wir an, ich habe eine Seite TEAM, dort sollen
Bilder, die ein Redakteur hochlädt, auf 125 x 185px beschnitten
werden. Auf der Seite EVENT sollen Bilder auf 200 x 200 px
heruntergerechnet werden. Wo finde ich denn dazu Info, was hier
in die TSConfig muss, bzw. wie man sowas generell anstellt?

Danke

Gruß
T.C.

Hallo Toccamonium,

in Dreamweaver erstelle ich meine Templates und alle anderen
Inhaltselemente, weil ich hier ja erst mal die notwendigen
CSS-Auszeichnungen erstelle. Vom Workflow her, geht es meiner
Meinung nach hier deutlich schneller.

Die generellen Templates würde ich auch im Dreamweaver erstellen, aber wofür musst du alle Inhaltselemete immer wieder dort erstellen, wenn du eine globale externe CSS hast. Im RTE definierte Absatz-/Stilvorlagen kannst du doch auf den reinen Content anwenden bzw. der Redakteur. Mir kommt, zumindest deine Beschreibung eher vor wie eine verkomplizierung und nach dem Prinzip wie ich früher meine statischen HTML-Seiten gebaut habe :o .

Mmh - warums setzt du die Tabellen/Inhalte in ein Inhaltselement bzw. den RTE ein!? Nimm doch hierfür einfach ein spezielles Inhaltselement also HTML - wie es von T3 angeboten wird. Dann hast du auch nicht das Problem das irgendwas rausgeparst wird was du haben möchtest bzw. Bildergrößen so sind wie du sie in HTML erstellst.

Generell kannst du mittels Maus rechts klick -> Kontextmenü auf ein Bild im RTE, die Bildgröße der einzelen Bilder anpassen.

Bild max/min Größe kannst du z.B. in der TS deiner Root-Seite definieren.

Viele Grüße
ms_k

Ich hab das Problem, dass cite Tags bei mir nicht funktionieren:
1. Sie werden immer von p Tags gewrapt
2. Und die eckigen Klammern in < usw. umgewandelt, d.h. im Frontend wird <cite> als Text, nicht als Tag ausgegeben.

Zunächst mal hab ich folgende Konfiguration vorgenommen:

showButtons = ..., chMode, inserttag

So dass ich Text markieren und mit einem Tag umgeben kann (funktioniert auch).

Anschließend fügte ich den cite Tag zu den erlaubten Tags hinzu (bzw. da war er schon):

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

Und gab zudem noch an, dass er außerhalb von p tags stehen darf:

allowTagsOutside = img,hr,cite

Was mach ich falsch :-(?

Update: Problem Nr. 2 habe ich nun gelöst, offenbar musste ich das Template Setup noch

tt_content.text.20.parseFunc.denyTags = 
tt_content.text.20.parseFunc.allowTags = *

hinzufügen.

Bleibt noch Problem Nr. 1.

So, jetzt muss ich auch mal fragen, da ich schon total verzweifele....
Ich habe mir den Thread schon mehrmals durchgelesen, mein Problem konnte aber nicht gelöst werden.
Bei mir wird die rte-CSS nicht mit eingebunden, ich habe die RTE Anweisungen und die RTE-CSS Datei aufs Nötigste beschränkt:

TS Config

RTE.default {

## Zuweisung der CSS-Datei
contentCSS = /fileadmin/rte_css.css

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

## List all class selectors that are allowed on the way to the database
proc.allowedClasses (
author, external-link
)

classesCharacter = author, kasten, important
}

rte_css.css

.author {
font-size:11px;
font-weight:bold;
font-style:normal;
color:#961207;
}

span.author {
font-size:11px;
font-weight:bold;
font-style:normal;
color:#961207;
}

Edit:

Im Debugmodus steht:

[HTMLArea::initIframe]: Override CSS set to: http://127.0.0.1/typo3temp/rtehtmlarea_css_dffac98b3175880c8c50347c30aeac2a.css
[HTMLArea::initIframe]: Content CSS set to: http://127.0.0.1/fileadmin/rte_css.css

/Edit

Natürlich habe ich den Cache bei jeder Änderung gelöscht. Das Absatz- oder Textmenue bleibt grau hinterlegt.

Danke und sonnige Grüße,

Photek
Typo3 V.4.0, Firefox, MAC OSX

Hallo Photek,

ist die CSS-Klasse (rte_css.css), die die du auch in deine Seite einbindest oder hast du noch eine weitere CSS-Datei!? Dann müßtest du nämlich die rte_css.css in deiner Haupt-CSS inkludieren - ala:

@import url("rte_css.css");

Viele Grüße
ms_k

Hallo ms_k!

Hm, ich dachte eigentlich, dass die RTE CSS und die Seiten CSS auch nicht abhängig von einander funktionieren können, zumindest testweise, sonst wäre es auch unnsinnig.

Ich habe die RTE CSS in die Seiten CSS importiert, wie Du es beschrieben hast, es funktioniert immer noch nicht. #angry#
Auch dann nicht, wenn die RTE und Seiten CSS identisch sind = rte_css.css.

Gruß,

photek

hi Photek,

Hm, ich dachte eigentlich, dass die RTE CSS und die Seiten CSS auch nicht abhängig von einander funktionieren können, zumindest testweise, sonst wäre es auch unnsinnig.

warum soll diese Prinzip unsinnig sein? Globalisierte bzw. Zentralisierte Layout-Definitionen, funktioniert nach dem Prinzip externe CSS-Dateien.
Die benutzen CSS Definitionen müssen irgendwie in der geparsten T3 HTML-Seite eingebunden sein, denn unbekannte CSS-Klassen - können logischer Weise nicht dargestellt werden.

Der RTE greift auch nur auf deine extern definierte CSS-Klasse zu und schreibt HTML-Tags ala:

<p class=deineKlasse>text</p>

es werden kein direkte CSS-Formats draus, wie z.B.

<p style="color:red;">text</p>.

Ob du nun eine RTE eigene CSS mit denen für die Redakteuere bestimmten Klassen erstellst, diese in deine Haupt-CSS inkludierst oder die Klassen da reinkopierst oder per TypoScript zusätzlich einbindest oder direkt in deinem HTML-Template - ist total egal. Hauptsache das System kennt deine CSS-Definitionen. Sonst können sie auch nicht angewendet und dargestellt werden.

Generell würde ich mal schauen:

1. ob die CSS richtig definiert sind (RTE baut nämlich class=[deineKlasse] rein und keine ID etc)
2. die CSS überhaupt in deiner HTML-Seite eingebunden wird mit <link ...>
3. der RTE die Klasse beim speichern behält, dann wäre es nämlich noch ein TSconfig PRoblem.

Grüße
ms_k

Hallo zusammen,
habe den Thread gelesen, aber ich sehe keine Lösung für mein Problem:

In meiner CSS Datei habe ich den Bodytag mit eine Hintergrundgrafik versehen.

Wenn ich jetzt einen Text anlegen will erscheinzt diese Hintergrundgrafik im
rte_htmlarea, obwohl ich den Text in eine Tabellenzelle einfüge, die einen weißen
Hintergrund hat. Das nervt, weil die Hintergrundgrafik sich leider mit der Schirtffarbe beißt und diese kaum erkennbar ist.
Wie kann ich definieren, dass der bodytag im rte_htmlarea überschrieben wird?

Gruß
kccm24

Hallo, ich habe auch ein Problem:

Habe bei mir die Align-Buttons aktiviert und nach einem Tag Recherche liefen die dann auch endlich mit:

RTE.default.proc {
entryHTMLparser_db.tags.img >

#- TAGS ALLOWED OUTSIDE P & DIV
allowTagsOutside = hr, address, img, size, span

entryHTMLparser_db = 1
entryHTMLparser_db.tags {
		p.fixAttrib.align.unset >
		div.fixAttrib.align.unset >
		p.allowedAttribs = class, style, align
		span.fixAttrib.style.unset >
	}
}

Heute musste ich dann noch eine Text-Klasse definieren. Das hat dann auch nach ein paar Stunden hingehauen:

RTE.default {
        # Zuweisung der CSS-Datei
        contentCSS = fileadmin/template/sonstiges/css_htmlarea.css 
        useCSS = 1
        

        showButtons = bold, italic, underline, 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, copy, cut, paste, fontsize,  left, center, right, textcolor, fontstyle, textstyle, textstylelabel

        

        hideButtons =  strikethrough,lefttoright, righttoleft, bgcolor, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, formatblock, blockstyle, blockstylelabel
        
        #Meine CSS-Klasse ist mit span versehen, also brauche ich keine 1!!
        showTagFreeClasses = 0

        ignoreMainStyleOverride = 0

        removeTags =
        removeTagsAndContents =
        hideTags =

        classesCharacter = roter-startseiten-text
        allowedClasses (roter-startseiten-text)
}

Tja, aber nun ist es vorbei mit den Align-Button, da funktioniert nämlich mal wieder die Speicherung nicht mehr, wie schon zuvor, als ich einen Tag nach der Lösung gesucht habe...

Habe dann in diesem Thread noch diese Lösung für Align gefunden:

entryHTMLparser_db.tags {
                span >
	}

funktioniert aber natürlich auch nicht. Ich krieg noch ein Schreikrampf bei diesem .... Editor #angry#

Zu meinem Problem siehe hier:
#470992

Mahlzeit zusammen,

erstmal danke an ms_k für den [HowTo]-Trööt. Allerdings habe ich noch zwei Sachen wo ich nicht weiter komme.

1. Problemerle
onkelfusspilz hat das Problem schon auf der ersten Seite angesprochen

2.) Wenn ich im RTE eine Tabelle einfüge und dann rechte Maustaste "Tabelleneigenschaften" auswähle, so gibt es dort ein Feld "Überschrift". Sieht auch ok aus im RTE aber im FE steht dann <caption>Tabellen-Überschrift</caption> (und zwar wirklich der Tag!)

Ich hab dazu leider keine Lösung finden können. Gibts hier schon Lösungsansätze?

2. Problemerle
Die Absatzeigenschaften funktionieren ja erst am einen öffnenden <p>-Tag der allerdings bei Neuanlegen eines Datensatzes nicht vorhanden ist. D.h. der Redakteur muss erst einmal eine Zeilenschaltung machen. Gibts ne Möglichkeit den <p>-Tag schon inital zu setzen?

Uuups und noch eins:

Wenn ich nach einer Tabelle eine Zeilenschaltung/Return einfüge, werden mir nach dem schließenden <table>-Tag zwei mal <p></p><p></p> reingebaut. Ist doch Käse. Kann ich da irgendwo schrauben?

Hi Dani,

also Eine Gegenfrage nochmal zu Problem 1:
Was hättest denn gerne an der Stelle statt dem <caption> wenn du eine Tabellenüberschrift einfügst. Laut SELFHTML ist das doch legitim :o

zu Problem 2:
nach dem Speichern fügt er auch um eine einzeiliges Wortstück eine Absatzformatierung, ala <p>

mmh Problem uups *lach*:
tritt bei mir auch auf, hat mich bislang aber nicht gestört, weil ich eh Absätze am Ende brauche bzw. nach Tabellen als sinnvoll erachte. Daher sorry hab ich keine Lösung dafür ;-).

Viele Grüße
ms_k

Servus ms_k, erstmal Danke für deine Antwort.

zu Problem 1:
Das <caption>hallo</caption> steht so im FE und nicht im Quelltext!
Nach dem speichern der Seite steht's im BE noch kurz über der Tabelle (als Head so wie es sein soll) - im FE dann so wie oben beschrieben. Nach nochmaligen Aufruf der Seite im BE stehts dann ebenfalls so drin: caption>hallo</caption>

zu Problem 2:
eigentlich schade. Muss mal halt dem Redakteur richtig verkaufen dass er erst speichern muss um Änderungen zu machen. Wäre kofortabler, sprich userfreundlicher gewesen wenn der Redakteur gleich loslegen könnte.

mmh Problem uups *lach* *prust*:
Mich störts ja auch nicht - aber immer diese (kommenden Rückfragen des Redakteurs (warum geht des ned)) #angry#

hi dani,

sorry hatte bei Problem 1 das FE überlesen:

tu doch den <caption>-tag einfach mal zu den proc.allowTags = ...
und entryHTMLparser_db.noAttrib = ...

Obwohl ich den Tag nicht darin hatte/habe funktioniert es bei mir, vielleicht gehts dann auch bei dir.

Mit was für einer T3 bzw. RTE Version arbeitest du denn?

Viele Grüße
ms_k

PS: Einfach manche Frage überhören und den Redakteur mit neuen Spielsachen glücklich machen, hehe *g* weisst schon die Ablenktaktik

Guten Morgen ms_k,

großes Danke für den Tipp - funktioniert wenn ich das in proc.allowTags = ...
und entryHTMLparser_db.noAttrib = ... eingebe. Super

T3-Intallation ist 3.8.0 und htmlArea 1.1.3

Ich bin ja gespannt welche kleinen Stolperfallen sich da noch auftun, wär ja langweilig wenn alles auf Anhieb klappen würde ;-)).

Jetzt misch ich mich hier auch mal ein...

Habe den Code vom Anfang übernommen und das meiste funktioniert (Danke an ms_k!!!). Nur 2 Dinge nerven mich schon lange:

1) Wenn ich nur eine Zeile Text schreibe (ohne Absatz), erscheint das Pop-Down Menu "Paragraph" immer noch grau (deaktiviert) obwohl ich den einen Satz auch gerne mit einem css Format versehen würde... 😢 ("Text" bleibt auch deaktiviert) bis ich die Enter Taste drücke, dann aktivierts wie von geisterhand ... 😉

2) Ich habe in meinem CSS die Links so modifiziert, dass immer ein Pfeilchen automatisch vor jeden Link gesetzt wird. Der RTE schnallt das aber irgendwie nicht, der setzt das Pfeilchen immer vor den ganzen Satz wo der Link drin ist resp . wenn ich mit <BR> umbreche sogar vor dem gesamten Absatz... #paralyzed#

Hatte da jemand schon dieselben Probleme und/oder weiss ne Lösung?

Danke und Grüsse

Estro

Hallo,

1) Wenn ich nur eine Zeile Text schreibe (ohne Absatz), erscheint das Pop-Down Menu "Paragraph" immer noch grau (deaktiviert) obwohl ich den einen Satz auch gerne mit einem css Format versehen würde... icon_cry.gif("Text" bleibt auch deaktiviert) bis ich die Enter Taste drücke, dann aktivierts wie von geisterhand ... 😉

das scheint noch ein besonderes Feature zu sein, denn erst wenn man speichert wird bei einer einzeiligen Geschichte ein <p>-Tag gesetzt und erst sobald ein Tag vorhanden ist - werden die Format- und Stilvorlagen aktiviert. Also dafür hab ich auch noch keine Lösung, aber ich finde mit der <enter> bzw. speichern-Variante lässt es sich leben 😃 .

2) Ich habe in meinem CSS die Links so modifiziert, dass immer ein Pfeilchen automatisch vor jeden Link gesetzt wird. Der RTE schnallt das aber irgendwie nicht, der setzt das Pfeilchen immer vor den ganzen Satz wo der Link drin ist resp . wenn ich mit <BR> umbreche sogar vor dem gesamten Absatz..

post doch mal auszüge aus deinem HTML-Quellcode bzw. CSS-Code, denn momentan würd ich eher auf definitionsfehler dort tippen.

Grüße
ms_k

Hallo!

Vielen Dank für deine Antwort!

das scheint noch ein besonderes Feature zu sein, denn erst wenn man speichert wird bei einer einzeiligen Geschichte ein <p>-Tag gesetzt und erst sobald ein Tag vorhanden ist - werden die Format- und Stilvorlagen aktiviert. Also dafür hab ich auch noch keine Lösung, aber ich finde mit der <enter> bzw. speichern-Variante lässt es sich leben.

Ja, das denke ich mir auch. Also für mich ist es kein Problem. Es kamen von anderen Benutzern des Backend immer die gleichen Fragen, wieso dass es nicht funktioniert, etc. Aber sowas mit dem <p> Tag habe ich au vermutet... Vielleicht gibt's ja doch irgendwann ne Lösung. Bei mir ist es meistens so: Sobald ich mich eine zeitlang nicht damit befasse kommt mir plötzlich die Lösung in den Sinn 😉

post doch mal auszüge aus deinem HTML-Quellcode bzw. CSS-Code, denn momentan würd ich eher auf definitionsfehler dort tippen.

Hier ist der CSS Code. Den habe ich bei einer anderen Website auch schon eingesetzt, dazumal aber noch mit dem alten RTE und der letzten Version von TYPO3... Da hat's geklappt... #paralyzed#

.bodytextlink{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none; 
	color: #152665;
	list-style-type: none;
	background: url(img/pfeil_link.gif) no-repeat left center;
	padding: 0 0 0 10px;
}

Liebe Grüsse

Estro

hi,

also meine CSS-Klassen sehen auch so aus, hast du die Klasse im TSconfig definiert ala:

Seite 1: Zeile: 101-104

proc.
		# 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, [deinKlasse]
		)

und seite 1, zeile 165

# Classes: Eigene Stile
classesCharacter = [deineKlasse]

Die Klasse ist auch in deiner RTE definierten CSS und Sonstigen CSS bekannt?

Wie sieht denn dein generierter HTML-Quellcode aus.

Grüße
ms_k

Salü!

PS: Kannst gleich nach unten scrollen, das erste Problem ist gelöst! 😉

Ja, das habe ich alles gemacht...

# 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, bodytextlink, bodytext
                )

und

        # Classes: Eigene Stile
        classesCharacter = author, bodytextlink, bodytext
        classesImage= rte_image

Der Quelltext sieht wie folgt aus:

<td id="content_bodytext" class="bodytext">
	<!--  CONTENT ELEMENT, uid:2/text [begin] -->
		
		<!--  Text: [begin] -->
			<p class="bodytextlink">Auf diesen Seiten stellt sich die <a href="http://www.seite.ch" title="Opens external link in new window" target="_top" class="external-link-new-window" >Sekundarschule</a> vor.</p>

		<!--  Text: [end] -->
			
	<!--  CONTENT ELEMENT, uid:2/text [end] -->
		
	
		</td>

Der Pfeil erscheint (sowohl im RTE als auch auf der Page) vor dem ganzen Text und nicht nur vor dem Link, obwohl ich explizit zuerst das zu verlinkende Wort markiert habe und dann "bodytextlink" auswählte (der Link ist ja auch nur auf dem einen Wort)... Ich nehme an, weil da ein <p> Tag fehlt und der RTE Klassen nur <p> Tags zuweisen kann? Vielleicht muss man dem sagen, dass die Klasse "bodytextlink" den <a> Tags zugeordnet werden soll?

Grüsse und danke!

Estro

-------------------
OMG - Jetzt habe ich den Fehler entdeckt.......

Ich habe anstatt das "Text" Pop-Down-Feld das "Paragraph" Pop-Down Feld benutzt... Oje, ist mir das peinlich... Aber ich glaube, es hat daran gelegen, dass ich die eigenen Klassen nicht sauber verlinkt habe im Config des RTE, sprich der TIPP mit

# 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, bodytextlink, bodytext
                )

und

        # Classes: Eigene Stile
        classesCharacter = author, bodytextlink, bodytext
        classesImage= rte_image

war Gold wert!!! Damit ist das Text-Pop-Down Menu erst erschienen...

Vielen herzlichen Dank!!!

Hmm... Lustigerweise funktioniert jetzt der "hover"-Effekt des so markierten Links aber nicht mehr... 🙁
Quelltext dazu:

<td id="content_bodytext" class="bodytext">
	<!--  CONTENT ELEMENT, uid:2/text [begin] -->
		
		<!--  Text: [begin] -->
			Auf diesen Seiten stellt sich die <a href="startseite.html" title="Opens internal link in current window" target="_top" class="bodytextlink" >Sekundarschule</a> vor.
		<!--  Text: [end] -->

			
	<!--  CONTENT ELEMENT, uid:2/text [end] -->
		
	
		</td>

Kann man eigentlich die Klassen beim Link-Setzen auch gleich umbenennen und die eigenen einfügen (z.B. "internal-link-new-window" mit meinem "bodytext" ersetzen)?

Liebe Grüsse

Estro