Zum Inhalt springen

htmlarea / RTE (Konfiguration) - so gehts

Erstellt am 21. März 2006 · 191 Antworten · letzte Antwort am 28. Februar 2013 · Seite 8 von 10

Tags: Frage

super-mario ·

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

cordman ·

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
	...
}
super-mario ·
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?

m3typo3 ·
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?

cordman ·

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; }
...
ÁndreMansfeld ·

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

cordman ·

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

lemon ·

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

zappzarapp ·

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.

ms_k ·

Hallo Lemon,

wo hast du den die RTE config eingetragen?

Oder klappt das nur nicht mit der Absatzformatierung?

Grüße
ms_k

lemon ·

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

Gin ·

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.

photek ·

Hallo Leute,

jetzt suche ich schon seit Stunden und finde keine Lösung.
Folgendes Problem:

Die Buttons Kursiv, Fett und Unterstrichen werden im RTE angezeigt und zeigen auch die Änderungen brav im RTE-Editor an.
Aber, nach abspeichern sind die Änderungen weg.
D.h. aus den Tags

<span style="font-weight: bold;">Zugang</span>

wird

Zugang

Hat jemand eine Ahnung wie ich das im Griff bekomme, hier im Forum waren schon einige die das gleiche Problem haben...

Gruß,

photek

cordman ·

Hast du das <span>-Tag mit in die Liste der erlaubten Tags aufgenommen?

## RTE Konfiguration
RTE.default { 
        ...
        proc {
                # tags die erlaubt / verboten sind
                allowTags = Tag1, Tag2, ...
        }
        ...
}

Für die Auszeichnung von fettem Text solltest du aber auch besser "<strong>" verwenden, da weder "<span style="font-weight: bold;">" noch "<b>" semantisch wirklich aussagekräftig sind.

hohly ·

Hallo, habe auch ein Problem mit dem RTE.
Wenn ich ein Text formatieren will und ihm eine bestimmte Grösse oder Farbe zuordnen will, verschwindet es nach dem Speichern.
Es geht genauer um den Tag <font> den er nach dem Speichern rausnimmt.

Hier meine PageTSConfig:

# ***************************************************************************************
# "Demo" Page TSconfig for htmlArea RTE
#
# Sets default Page TSConfig with maximal features for users who want to explore the features of the RTE.
#
# TYPO3 CVS ID: $Id: pageTSConfig.txt,v 1.1.2.7 2006/03/13 18:08:40 stanrolland Exp $
# ***************************************************************************************

	## Define labels and styles to be applied to class selectors in the interface of the RTE
	## Partial re-use of color scheme and frame scheme from CSS Styled Content extension
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 {
		name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:frame-frame1
		value = background-color: #EDEBF1; border: 1px solid #333333;
	}
	csc-frame-frame2 {
		name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:frame-frame2
		value = background-color: #F5FFAA; border: 1px solid #333333;
	}
	important {
		name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:important
		value = color: #8A0020;
	}
	name-of-person {
		name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:name-of-person
		value = color: #10007B;
	}
	detail {
		name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:detail
		value = color: #186900;
	}
	component-items {
		name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:component-items
		value = color: #186900;
	}
	action-items {
		name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:action-items
		value = color: #8A0020;
	}
	component-items-ordered {
		name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:component-items
		value = color: #186900;
	}
	action-items-ordered {
		name = LLL:EXT:rtehtmlarea/htmlarea/plugins/DynamicCSS/locallang.xml:action-items
		value = color: #8A0020;
	}
	
}

	## Anchor classes configuration for use by the anchor accesibility feature (htmlArea RTE only)
RTE.classesAnchor {
	externalLink {
		class = external-link
		type = url
		image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/img/external_link.gif
		altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:external_link_altText
		titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:external_link_titleText
	}
	externalLinkInNewWindow {
		class = external-link-new-window
		type = url
		image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/img/external_link_new_window.gif
		altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:external_link_new_window_altText
		titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:external_link_new_window_titleText
	}
	internalLink {
		class = internal-link
		type = page
		image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/img/internal_link.gif
		altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:internal_link_altText
		titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:internal_link_titleText
	}
	internalLinkInNewWindow {
		class = internal-link-new-window
		type = page
		image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/img/internal_link_new_window.gif
		altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:internal_link_new_window_altText
		titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:internal_link_new_window_titleText
	}
	download {
		class = download
		type = file
		image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/img/download.gif
		altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:download_altText
		titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:download_titleText
	}
	mail {
		class = mail
		type = mail
		image = EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/img/mail.gif
		altText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:mail_altText
		titleText = LLL:EXT:rtehtmlarea/htmlarea/plugins/TYPO3Browsers/locallang.xml:mail_titleText
	}
}

	## Default RTE configuration
RTE.default {
		##H4,H5,H6 in der Auswahl ausblenden
	hidePStyleItems = H4, H5, H6
	allowTags = font,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
	
		## Markup options (htmlArea RTE only)
	enableWordClean = 1
	removeTrailingBR = 1
	removeComments = 1
	##Oleg-removeTags = center, o:p, sdfield
	##Oleg-removeTagsAndContents = style,script
		
     		## Allow img tags
	proc.entryHTMLparser_db.tags.img >

	
		## Allow align attribute
	proc.entryHTMLparser_db.tags {
		p.fixAttrib.align.unset >
		div.fixAttrib.align.unset >
		 font.allowedAttribs = size,color
		p.allowedAttribs = class,style,align
		span.fixAttrib.style.unset >
	}
	
		## Toolbar options
	showButtons = *
	
		## More toolbar options (htmlArea RTE only)
	keepButtonGroupTogether = 1
	
		## Enable status bar (htmlArea RTE only)
	showStatusBar =  1
	
		## Add default example 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; }
	)
		## Two frame examples taken from the example CSS file of CSS Styled Content extension and applied to p and table block elements.
	inlineStyle.frames (
		p.csc-frame-frame1, table.csc-frame-frame1 { background-color: #EDEBF1; padding: 2px 4px 2px 4px; border: 1px solid #333333; }
		p.csc-frame-frame2, table.csc-frame-frame2 { background-color: #F5FFAA; padding: 2px 4px 2px 4px; border: 1px solid #333333; }
	)
		## Bullet styles for unordered lists.
	inlineStyle.ul (
		ul.component-items { color: #186900; list-style-type: circle; }
		ul.action-items { color: #8A0020; list-style-image: url(img/red_arrow_bullet.gif); }
	)
		## Numbering styles for ordered lists.
	inlineStyle.ol (
		ol.component-items-ordered { color: #10007B; list-style-type: lower-roman; }
		ol.action-items-ordered { color: #8A0020; list-style-type: lower-greek; }
	)
		## Three inline text colors taken from the color scheme of CSS Styled Content extension.
	inlineStyle.inline-text (
		span.important { color: #8A0020; }
		span.name-of-person { color: #10007B; }
		span.detail { color: #186900; }
	)
	
		## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
	ignoreMainStyleOverride = 1
	
		## For this demo, do not remove font, strike and u tags
	proc.entryHTMLparser_db.removeTags := removeFromList(strike,u)
#original->proc.entryHTMLparser_db.removeTags := removeFromList(font,strike,u)	
	
		## List all class selectors that are allowed on the way to the database
	proc.allowedClasses (
		external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
		align-left, align-center, align-right,
		csc-frame-frame1, csc-frame-frame2,
		component-items, action-items,
		component-items-ordered, action-items-ordered,
		important, name-of-person, detail
	)
	
		## classesParagraph, classesTable, classesTD, classesLinks, classesCharacter
		## Classic RTE: Specify the list of class selectors that should be presented in the RTE interface:
		## htmlArea RTE: Restrict the list of class selectors presented by the RTE to the following:
	classesParagraph (
		align-left, align-center, align-right, 

	)
	classesTable = csc-frame-frame1, csc-frame-frame2
	classesTD = align-left, align-center, align-right
	classesLinks = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail
	classesCharacter = important, name-of-person, detail
	
		## Configuration of the anchor accessibility feature (htmlArea RTE only)
		## 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
	}
	
		## Show all applicable class selectors available in the style sheet file (htmlArea RTE only)
	showTagFreeClasses = 1
	
		## Configuration specific to the table button or TableOperations feature (htmlArea RTE only)
		## Use the context menu instead of the toolbar for table operations, but keep toggleborders button in toolbar
	hideTableOperationsInToolbar = 1
	buttons.toggleborders.keepInToolbar = 1
	
		## Configuration specific to the inserttag button or QuickTag feature (htmlArea RTE only)
		## Do not allow insertion of the following tags
	buttons.inserttag.denyTags = font, underline, strike, table
	
		## Configuration specific to the spellcheck button or SpellCheck feature (htmlArea RTE only)
		## Enable the use of personal dictionaries
	enablePersonalDicts = 1
}

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

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

	## tt_content TCEFORM configuration
	## Let use all the space available for more comfort.
TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 100%

habe bei allowTags den font-tag erlaubt und bei

proc.entryHTMLparser_db.tags {
		p.fixAttrib.align.unset >
		div.fixAttrib.align.unset >
		 font.allowedAttribs = size,color

sind die Attribute size und color auch erlaubt.
Versteh nicht wo ich noch was verbiete oder warum er den font-Tag rausnimmt.

MfG
Oleg

cordman ·

Vermutlich deswegen:

## Do not allow insertion of the following tags
buttons.inserttag.denyTags = font, underline, strike, table

Aber mal so nebenbei: Wieso benutzt du <font>?

Das ist ja nicht mehr wirklich zeitgemäß und du könntest einfacher über eigene Klassen für Absätze arbeiten 😉

Grüße