CSS-Formatierung wird nicht überschrieben

Mein RTE überschreibt vorhandene CSS-Formatierungen nicht. Als Beispiel mal das hier:

<span class="text">Bla bla bla</span>

Wenn ich nun die Formatierung ändern möchte und das Ganze markiere und ändere speichert er folgendes ab:

<span class="text textklfett">Bla bla bla</span>

Er überschreibt also die bisherige Formatierung nicht.

Wie kann ich ihm das abgewöhnen?

Meine RTE-Konfiguration:

mod.SHARED.colPos_list = 0
TCEFORM.tt_content.colPos.removeItems = 1,3
TCEFORM.tt_content.header_layout.removeItems = 0,1,2,3,4,5,100


RTE.default.contentCSS = fileadmin/inc/f_style.css
RTE.default.useCSS = 1 

RTE.default.enableWordClean = 1
RTE.default.disableEnterParagraphs = 0 

RTE.default.hideButtons =  linebreak, fontstyle, space, fontsize, space, formatblock, bar, bold, italic, underline, bar, strikethrough, subscript, superscript, bar, undo, redo, bar, outdent, indent, bar, textcolor, bgcolor, textindicator, bar, emoticon, line, table, user, acronym, bar, spellcheck, findreplace, bar, inserttag, removeformat, bar, copy, cut, paste, bar, showhelp, about, linebreak,toggleborders,tableproperties, bar, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, bar,
columninsertbefore, columninsertafter, columndelete, columnsplit, bar, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge

#fontstyle, fontsize werden ins html geschrieben, deshalb rausgenommen
#lefttoright, righttoleft nicht benötigt
#inserttag rausgenommen, damit redakteure damit keinen unsinn treiben

#PRE nicht benötigt, deshalb rausgenommen
#H1 aus semantischen Gründen rausgenommen (Überschrift Inhaltselemente ist schon h1)
RTE.default.hidePStyleItems = PRE, H1 

#Für sauberes html rausgenommen
RTE.default.hideTags = font, font (full) 

# siehe oben ausführlich
RTE.default.showTagFreeClasses = 1
RTE.default.classesCharacter = center,text,textmt,textklfett,preise,preise_kl,mainnavi,mainnavi_red
RTE.default.classesAnchor = mailto 

RTE.config.tt_content.bodytext.proc.allowedClasses = center,text,textmt,textklfett,preise,preise_kl,mainnavi,mainnavi_red
RTE.default.showStatusBar = 1 

RTE.default.proc {
// TRANSFORMATION METHOD
overruleMode = ts_css 
preserveTables=1


// LINES CONVERSION
dontConvBRtoParagraph = 1 

// TAGS ALLOWED OUTSIDE P & DIV
allowTagsOutside = img,hr 

// TAGS ALLOWED
allowTags = table, thead, tbody, tr, th, td, img, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, nobr, hr, tt, q, cite, abbr, acronym 

// TAGS DENIED
denyTags = font 

// ALLOWED P & DIV ATTRIBUTES
keepPDIVattribs = align,class,style 

// CONTENT TO RTE
HTMLparser_rte {
// TAGS ALLOWED
allowTags < RTE.default.proc.allowTags
removeTags = font 

// DO NOT REMOVE UNMATCHED TAGS
keepNonMatchedTags = 0 

} 

// CONTENT TO DATABASE
entryHTMLparser_db = 1
entryHTMLparser_db { 

// XHTML COMPLIANCE
xhtml_cleaning = 1 

// CLEAN TAGS 

noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
tags.hr.allowedAttribs = class
// REMAP B AND I TAGS
tags.b.remap = strong
tags.i.remap = em 

rmTagIfNoAttrib = span,div,font 

htmlSpecialChars = 1
} 

}

Ist denn das Aussehen der Klasse "text textklfett" überhaupt in einer CSS definiert? Wenn nein, weißt Du was zu tun ist.

Ja klar, da gibt es mehrere unterschiedliche Formatierungen.

Das CSS für die beiden Schriften sieht so aus:

.text{ font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 145%; color: #666666; text-decoration:none;}

.textklfett{font-family: Arial, Helvetica, sans-serif;	font-size: 12px;  font-weight: bold;  color: #666666; text-decoration:none; }

Das ist doch richtig so. Du erlaubst beide Klassen .text und .textklfett. also kann man auch beide Klassen gleichzeitig auswählen. Das ist wie mit fett und kursiv in Word...dort kannst du ja auch beide gleichzeitig auswählen. Wär ja blöd wenn du auf fett klickst und kursiv verschwindet...

Wenn du das aber unbedingt haben möchtest, dann könntest du vielleicht mit: fixAttrib.[attribute].list Glück haben. Definiere dort deine beiden Klassen. Nach dem Speichern sollte dann zumindest eine Klasse verschwunden sein und nur noch die erste definierte Klasse vorhanden sein. Wie schon gesagt, das klappt nur nach dem Speichern NICHT schon während des Schreibens.

https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Functions/Index.html

froemken

Aber mal angenommen, der Redakteur hat versehentlich den Text rot und fett markiert, möchte diesen dann aber lieber doch grün haben. Wenn nun beiden Klassen existieren, was macht er dann?

Im Quelltext würde ja dann stehen: <span class=" textrotfett gruen">Bla bla bla</span>

In der gleichen Selectbox steht bei mir auch ein "Entferne text" bzw. "Entferne textklfett". Hilft das nicht weiter?

Ich hab hier die Alpha 4.3 installiert, deshalb weiß ich nicht, ob dieser Eintrag auch bei dir ist.

Ich habe exakt das gleiche Problem wie Cherry und noch keine Lösung.

(Der Verweis von froemken bringt rein gar nichts. Das heißt so viel wie: Schau doch selbst, wie du zurecht kommst. Das ist keine Lösung).

OffTopic: So ein großes Durcheinander sowohl was das Programmsystem selbst als auch vor allem die Doku von Typo3 betrifft, habe ich in meinen 30 Jahren als Entwickler noch nicht erlebt. Typo3 ist ein Wirrwarr sondersgleichen. In Gegensatz zu professionellen Systemen wie J2EE, .NET oder Flex, wo ich gerne bereit bin, ein paar Hundert Euro für professionelle Entwicklungssysteme und ausführliche Dokumentation zu bezahlen, ist das hier nicht mal Amateurliga, wobei hier geschenkt noch recht teuer ist, wenn ich meine Zeit rechne, die ich mit Suchen in der völlig unstrukturierten und lückenhaften Doku von Typo3 vergeude. Aber ich muss leider damit zurecht kommen.

Also: Ich brauche eine Lösung (und keinen Link auf irgend etwas anderes), wie es möglich ist, dass Mehrfachauszeichnen von Klassen zu unterbinden.

Hat jemand was?

Und bitte nicht auf den Button "Blockstil entfernen" hinweisen. Den kenne ich. Ist aber zu fehlerträchtig für meine Kunden. Wenn der Kunde ein Blockstil auswählt, soll dieser - und nur dieser - auch zugewiesen werden.

Herzlichen Dank.

P.S Ich bitte meinen Ärger zu entschuldigen, aber mit Typo3 kommt man einfach nicht vom Fleck.

Meine Prognose: Wenn sich Typo3 nicht mächtig ins Zeug legt, wird es vom neuen Sharepoint in Windeseile überholt werden. Wenn ich meine Zeit gegenrechne, die für die Einarbeitung und Konfiguration von Typo3 brauche, habe ich längst zwei, drei MOSS-Lizenzen.

Ich hab keine Rückmeldung erhalten, ob das mit der Eigenschaft: "list" nun funktioniert oder nicht. Hat das mal einer ausprobiert?!
Bzgl. OffTopic kann ich beide Seiten verstehen.

Eine Seite: In diesem Array-WirrWarr die richtige Eigenschaft zu finden ist ein Grauß. Verschiedene Dokumentationen für ein System, mehrere Kategorien und Einstellungen, da blickt definitiv kein Anfänger durch.

Andere Seite: Hat man einmal begriffen, dass TYPO3 in mehrere Kategorien aufgeteilt ist (APIs), dann weiß man zumindest schon mal in welcher Doku man suchen muss. Hat man dann noch erkannt wie das mit den Eigenschaft-Arten (stdWrap, getText und Co.) funktioniert, dann habe ich dafür direkt nen Link in meinen Browserlesezeichen.

Weiterhin finde ich heute (nach 2 Jahren) die Doku von TYPO3 (nicht unbedingt die jeder Ext.) sehr angenehm, was noch lange nicht heißen soll, dass der Weg bis dahin sehr lange gedauert hat.

Stefan

Konnte das von froemken nicht (noch nicht) probieren.
Aber irgendwie ziemlich kompliziert klingt das schon.....

Mal `ne andere Frage: Gibt es diese Probleme bei anderen nicht? probiert es mal aus, würde mich (und sicher crashpad auch) über Rückinfos freuen.

Ich hab den Code ein bissl aufgeräumt (Strukturell) und nur eine Zeile hinzugefügt:

tags.span.class.list = text, textklfett

Heißt: Man kann zwar immer noch mehrere auswählen, aber in der Datenbank landet definitiv nur ein Eintrag.

mod.SHARED.colPos_list = 0
TCEFORM.tt_content.colPos.removeItems = 1,3
TCEFORM.tt_content.header_layout.removeItems = 0,1,2,3,4,5,100
RTE.default {
	contentCSS = fileadmin/templates/style/rte.css
	useCSS = 1
	enableWordClean = 1
	disableEnterParagraphs = 0
	hideButtons =  linebreak, fontstyle, space, fontsize, space, formatblock, bar, bold, italic, underline, bar, strikethrough, subscript, superscript, bar, undo, redo, bar, outdent, indent, bar, textcolor, bgcolor, textindicator, bar, emoticon, line, table, user, acronym, bar, spellcheck, findreplace, bar, inserttag, removeformat, bar, copy, cut, paste, bar, showhelp, about, linebreak,toggleborders,tableproperties, bar, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, bar, columninsertbefore, columninsertafter, columndelete, columnsplit, bar, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
	hidePStyleItems = PRE, H1
	hideTags = font, font (full)
	showTagFreeClasses = 1
	classesCharacter = center,text,textmt,textklfett,preise,preise_kl,mainnavi,mainnavi_red
	classesAnchor = mailto
	tt_content.bodytext.proc.allowedClasses = center,text,textmt,textklfett,preise,preise_kl,mainnavi,mainnavi_red
	showStatusBar = 1

	proc {
		overruleMode = ts_css
		preserveTables = 1
		dontConvBRtoParagraph = 1
		allowTagsOutside = img,hr
		allowTags = table, thead, tbody, tr, th, td, img, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, nobr, hr, tt, q, cite, abbr, acronym
		denyTags = font
		keepPDIVattribs = align,class,style

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

		entryHTMLparser_db = 1
		entryHTMLparser_db {
			xhtml_cleaning = 1
			noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
			tags {
				hr.allowedAttribs = class
				b.remap = strong
				i.remap = em
				span.fixAttrib.class.list = text, textklfett
				rmTagIfNoAttrib = span,div,font
				htmlSpecialChars = 1
			}
		}
	}
}

Danke, froemken

es ist zwar noch nicht ganz so wie gewünscht, aber immerhin wird in der Tat nur ein Tag abgespeichert. Allerdings immer nur das, das zuerst in der Tag-liste steht. Immerhin wird verhindert, dass zwei Klassen abgespeichert werden.

Man kommt aber dennoch nicht umhin, zuerst den Blockstil zu entfernen und dann den neuen zuzuweisen, wenn man dediziert eine bestimmte Klasse zuweisen will. Schließlich kennt der Kunde die Regel ja nicht, nach welcher die eine Klasse ausgewählt wird.

Nun, ich hoffe, das bekommen meine Kunden hin ...

Ich muss aber nochmals auf die wirkliche miese Doku des RTE und generell von Typo3 hinweisen.

Woher soll ich den wissen, was zum Beispiel das Bandwurm-Object lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class bedeutet, wie es sich aufbaut, wie die Vererbung aussieht und so weiter und so weiter. Und ich habe wirklich keine 2 Jahre Zeit, um mich einzuarbeiten, ich muss nach 2 Wochen ein fertiges System liefern ...

Nochmals danke.

crashpad schrieb

es ist zwar noch nicht ganz so wie gewünscht, aber immerhin wird in der Tat nur ein Tag abgespeichert. Allerdings immer nur das, das zuerst in der Tag-liste steht.

Es muss natürlich heißen: aber immerhin wird in der Tat nur eine Klasse abgespeichert. Allerdings immer nur das, das zuerst in der Klassenliste steht.

So...hab jetzt auch nochmal die Doku durchwühlt und nichts hinsichtlich diesen "Problems" gefunden. Ich würde die Anfrage einfach mal als Feature-Request bei bugs.typo3.org eintragen. Hab grad den RTE mit ALLEN erdenklichen Funktionen anzeigen lassen und selbst dort konnte ich sämtliche Einstellungen einfach durch Neuauswahl definieren, NUR in der Textauswahl wird der 2te Span-Tag angezeigt.

Also...nach meinem derzeiten Kenntnissstand geht es nicht und sowas sage ich sehr ungern.

froemken

So, ich habe jetzt aus Wut die Datei htmlarea.js im Pfad typo3\sysext\rtehtmlarea\htmlarea gehackt und jetzt funktioniert es wie gewünscht. Hier die betreffende Funktion innerhalb der Javascript-Datei:

/*
 * Add a class name to the class attribute
 */
HTMLArea._addClass = function(el, addClassName) {
	HTMLArea._removeClass(el, addClassName);
	if (el.className && HTMLArea.classesXOR) {
		var classNames = el.className.trim().split(" ");
		for (var i = classNames.length; --i >= 0;) {
			if (HTMLArea.classesXOR[addClassName] && HTMLArea.classesXOR[addClassName].test(classNames[i])) {
				HTMLArea._removeClass(el, classNames[i]);
			}
		}
	}
	switch (addClassName) {
		case "Titel":
		case "Zwischentitel":
		case "Text":
			el.className = addClassName;
			break;
		default:
			if (el.className) el.className += " " + addClassName;
				else el.className = addClassName;
	};
};

Die Zeilen 14 bis 20 habe ich selbst hinzugefügt. Hier wird auf meine Klassen (Text, Titel, Zwischentitel) getestet, die ich in der Combobox zur Auswahl anbiete, und diese werden dann nicht dem Klassenpfad addiert wie in default, sondern die Klasse wird komplett ersetzt.

Der default-Zweig ist der ursprüngliche Code an dieser Stelle.

Damit das Script funktioniert, muss sowohl der Cache in typo3\typo3temp\rtehtmlarea als auch der Browsercache geleert werden, dann mit F5 (IE) den Browser aktualisieren, dann wird das neue Javascript aktiv.

Funktioniert so weit wunderbar.

Respekt! :p