htmlarea / RTE (Konfiguration) - so gehts: Seite 2

toyde · 21. April 2006 19:49

pixelrolf schrieb
So wie ich das verstehe kann man mit RTE.default.contentCSS eine externe Stylesheetdatei einbinden, klappt aber leider nicht.

Oben ist das CSS für den RTE definiert, das siehst Du richtig.

Und so wird für eine Website/ für ein Layout ein Stylesheet eingebunden [constants].

content.stylesheet.file = fileadmin/style.css

Verstehe nicht wieviele Styles Du neben diesen beiden Optionen noch benötigst.

pixelrolf · 21. April 2006 20:13

toyde schrieb
Oben ist das CSS für den RTE definiert, das siehst Du richtig.

Ich benötige genau diese Option für den RTE. Aber genau die funktioniert ja eben nicht.

Im Quelltext (des Backends) sehe ich, dass die Datei ' ... /typo3/stylesheet.css' eingebunden ist. Die Datei die ich einbinden will, erscheint da noch nicht einmal (im Quelltext)
;-).

grüße,
rolf

wurgli · 26. April 2006 11:49

Sollte es jemanden interessieren, es funktioniert auch mit der Version 1.2.0

typo_3_newbie · 26. April 2006 17:29

Hallo, Rolf,

also, Du hast im Backend einen Seiteninhalt zum editieren (mit dem rte(htmlarea)) geöffnet und suchst jetzt in dem Quelltext der Backend-"Webseite" Deine eingebundene "rte_css.css"...?

Bei mir finde ich es ca. in der 5. Zeile nach dem Body-Tag:

<body onmousemove="GL_getMouse(event);" onload="initLayer();" id="typo3-alt-doc-php">

<!-- Wrapping DIV-section for whole page BEGIN -->
<div class="typo3-mediumDoc">
<form action="/typo3/alt_doc.php?&returnUrl=%2Ftypo3%2Fsysext%2Fcms%2Flayout%2Fdb_layout.php%3Fid%3D5&edit[tt_content][1]=edit" method="post" enctype="multipart/form-data" name="editform" onsubmit="return TBE_EDITOR_checkSubmit(1);">
<link rel="alternate stylesheet" type="text/css" href="http://meinedomain/fileadmin/rte_formate.css" />

Da steht bei Dir keins?

Tsconf/FE Cache leeren schon probiert?
welcher Browser? meinen "Browser-Cache"-Tip für den IE aus diesem Thread schon probiert?

PS: Es funktioniert auch mit der Version 1.3.7 und Typo3 4.0 final...

Achim

chris_m · 27. April 2006 20:10

Testweise habe ich die Config aus dem ersten Beitrag in meine TSconfig (Setup) eingefügt und eine entsprechende CSS-Datei hochgeladen.

Leider hat dies überhauptkeine Auswirkungen auf htmlarea, als Textformate stehen wie gehabt nur <important>, <name-of-person> und <detail> zur Auswahl, also die Standardwerte, die auch ohne TSConfiguration angezeigt werden.

Schalte ich in den Demo-Mode wird nur die Standard-Demo-Konfiguration angezeigt.

D.h. der RTE scheint jegliche Einstellung im Template/TSConfig komplett zu ignorieren.

Mein System: Typo3 4.0 und htmlarea 1.3.7

Liberation · 28. April 2006 12:52

Hi habe das alles auch wunderbar konfiguriert nur eins stört mich noch...

Hinter der Schaltfläche "TEXT" Stehen nun alle extra Styles 2 mal.

TEXT: underline, <underline> usw.
wie kann ich das <underline> da jetzt noch ausblenden?

pixelrolf · 29. April 2006 16:51

Hallo Achim,
danke für die Mühe.

typo_3_newbie schrieb
also, Du hast im Backend einen Seiteninhalt zum editieren (mit dem rte(htmlarea)) geöffnet und suchst jetzt in dem Quelltext der Backend-"Webseite" Deine eingebundene "rte_css.css"...?

Bei mir finde ich es ca. in der 5. Zeile nach dem Body-Tag:
Da steht bei Dir keins?

Tsconf/FE Cache leeren schon probiert?
welcher Browser? meinen "Browser-Cache"-Tip für den IE aus diesem Thread schon probiert?

Genau, endlich versteht mich einer ;-)
Im Quelltext wird keine CSS Datei eingebunden, da steht bei mir:

<body onmousemove="GL_getMouse(event);" onload="initLayer();" id="typo3-alt-doc-php">

<!-- Wrapping DIV-section for whole page BEGIN -->
<div class="typo3-mediumDoc">
<form action="/typo3/dummy-3.8.0/typo3/alt_doc.php?&returnUrl=%2Ftypo3%2Fdummy-3.8.0%2Ftypo3%2Fsysext%2Fcms%2Flayout%2Fdb_layout.php%3Fid%3D15&edit[tt_content][37,]=edit" method="post" enctype="multipart/form-data" name="editform" onsubmit="return TBE_EDITOR_checkSubmit(1);">


		<!--
			JavaScript in top of page (before form):
		-->

		<script type="text/javascript">

usw...

Tsconf/FE Cache geleert und auch den IE6 Cache, dateien, Cookies, alles. Ich verwende Typo3 3.8 und RTE.
Aber schon mal gut zu wissen, dass die CSS Datei - wenn, dann an dieser Stelle eingebunden wird. Ist wie verhext ;-)

gruß,
rolf

sopinon · 2. Mai 2006 00:27

Hi all,

Bin auch gerade am customizing meines HTMLarea editors...

Habe die Konfiguration von Karin als Vorlage genommen (Danke übrigens). Klappt eigentlich ganz, doch habe ich etwas Probleme mit meinen DIV-Tags.

Ich würde gerne so etwas realisieren:

<div style="padding-top:10px; padding-bottom:10px;">
  <table .....
  </table>
</div>

Doch wenn ich dies mittels dem Sourcecode button implementiere und speichere, so wird der Code folgendermassen umgewandelt:

<p style="padding-top:10px; padding-bottom:10px;"> </p>
  <table .....
  </table>

Und das kann ich nicht wirklich gebrauchen! 🙁 Welche Einstellungen (Config) benötigt der RTE Editor, damit diese DIV Tags stehen bleiben?

Danke für eure Antworten! Grüsse aus der Schweiz...

Liberation · 2. Mai 2006 10:40

Hi,
was du da zeigst ist aber inline css und nicht ne configuration des rte wie aus Post1.
Wieso willst du überhaupt um eine tabelle ein DIV legen....

Zu meinem post noch mal hat keiner eine Idee wie man das weg bekommt (siehe Bild):
Bild: elite-zocker.de/…/rtehtmlarea.gif

ms_k · 2. Mai 2006 11:07

Hallo Liberation,

würde jetzt vermuten das noch classes / paragraphen definitionen irgendwie doppelt in deiner TsConfig drin sind. Post sie doch einfach mal.

Grüße
Karin

Liberation · 2. Mai 2006 11:14

Nee dran liegt es nicht habe alles mögliche durchprobiert...
sobald man:
## zeigt alle CSS-Klassen die in formate.css vorhanden sind
showTagFreeClasses = 1

setzt sind bei der RTE spalte TEXT alle classen doppelt vorhanden.(bewirken tun sie das selbe)
ist einfach irgendwie ein Schönheitsfehler...

Liberation · 2. Mai 2006 12:27

Hi,
habe den fehler jetzt doch gefunden...
css datei war schult ahtte für alle classen jeweils auch ein:
.underline {
text-decoration: underline;
}
usw. drin.

beispiel css...
.csc-frame-indent {
padding-left: 100px;
}
.csc-frame-indent3366 {
padding-left: 33%;
}
.csc-frame-indent6633 {
padding-right: 33%;
}
.align-left {
text-align: left;
}
.align-center {
text-align:center;
}
.align-right {
text-align:right;
}
.formatblock {
text-align:justify;
}
span.red-text {
color: red;
}
span.blue-text {
color: blue;
}
span.yellow-text {
color: yellow;
}
span.csc-frame-indent {
padding-left: 100px;
}
.csc-frame-indent3366 {
padding-left: 33%;
}
.csc-frame-indent6633 {
padding-right: 33%;
}
.align-left {
text-align: left;
}
.align-center {
text-align:center;
}
.align-right {
text-align:right;
}
.formatblock {
text-align:justify;
}
span.red-text {
color: red;
}
span.blue-text {
color: blue;
}
span.yellow-text {
color: yellow;
}
span.white-text {
color: white;
}
span.important {
color: red;
font-weight:bold;
}
span.underline {
text-decoration: underline;
}
span.important {
color: red;
font-weight:bold;
}
span.csc-frame-indent {
padding-left: 100px;
}
.csc-frame-indent3366 {
padding-left: 33%;
}
.csc-frame-indent6633 {
padding-right: 33%;
}
.align-left {
text-align: left;
}
.align-center {
text-align:center;
}
.align-right {
text-align:right;
}
.formatblock {
text-align:justify;
}
span.red-text {
color: red;
}
span.blue-text {
color: blue;
}
span.yellow-text {
color: yellow;
}
span.white-text {
color: white;
}
span.important {
color: red;
font-weight:bold;
}
span.underline {
text-decoration: underline;
}

ms_k · 2. Mai 2006 12:47

hehe - zwar keine doppelten in der Tsconfig aber in der CSS 😉

Freut mich das es jetzt funktioniert

Muckster · 3. Mai 2006 23:24

Habe auch so mein Probleme mit der Konfiguration des HTMLArea... #angry#

Leider bekomme ich nicht die Absatz- und Text-Formatierungen angezeigt. Die beiden Pulldowns sind immer disabled, auch nach markieren von Text.

Ich poste mal mein TS-Setup der Root Seite, bin für jeden Tipp dankbar (auch wen ihr andere Fehler seht):

### Spalten ausblenden ###
TCEFORM.tt_content.colPos.removeItems = 1,2,3
mod.SHARED.colPos_list = 0

###RTE:###

## Anchor classes configuration for use by the anchor accessibility feature
RTE.classesAnchor {
	externalLink {
		class = external-link
		type = url
		image = fileadmin/templates/htmlarea/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 = fileadmin/templates/htmlarea/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 = fileadmin/templates/htmlarea/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 = fileadmin/templates/htmlarea/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 = fileadmin/templates/htmlarea/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 = fileadmin/templates/htmlarea/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
	}
}

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

# Breite des RTE in Fullscreen-Ansicht
TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 90%

### RTE Standard-Config ###
RTE.default {
  ## Zuweisung der CSS-Datei
  contentCSS = fileadmin/templates/htmlarea/htmlarea-edited-content.css
	
	## Markup options
	enableWordClean = 1
	removeTrailingBR = 1
	removeComments = 1
	removeTags = center, sdfield
	removeTagsAndContents = style,script
	
	# Buttons die gezeigt/versteckt werden
	showButtons = chMode, textstyle, textstylelabel, 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, copy, cut, paste
	hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, about

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

  # 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
  }
	
  # Classes: Ausrichtung
  classesParagraph (
    align-left, align-center, align-right, box1
  )

  # Classes: Eigene Stile
  classesCharacter = headline
  classesImage= rte_image
	
  # 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 = 0
  disableColorFieldsetInTableOperations = 1
  disableLayoutFieldsetInTableOperations = 1
  disableBordersFieldsetInTableOperations = 0
	
	# FE RTE configuration (htmlArea RTE only)
	FE < RTE.default
	FE.userElements >
	FE.userLinks >
	
  ## Use same processing as on entry to database to clean content pasted into the editor
  enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db

	### Customization of the server processing of the content - also called 'transformations'
  proc {
		# br wird nicht zu p konvertiert
		dontConvBRtoParagraph = 1
	
		# tags sind erlaubt außerhalt von p, div
		allowTagsOutside = img,hr
	
		# 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, box1
    )   

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

Und hier meine CSS, die eingebunden ist:

/* Selectors for the content area of the htmlArea RTE editor */
.htmlarea-content-body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #555555;
	margin:0;
	padding:3px;
	background-color:#ffffff;
}

/* Selectors for the Table Operations plugin */
/* Make borders visible */
/* Make sure we can click in empty cells without too much difficulty */
.htmlarea-showtableborders, .htmlarea-showtableborders td, .htmlarea-showtableborders th {
	padding: 3px; border:1px dashed #316ac5 ! important;
}

/* Selectors for the Abbreviation plugin */
abbr, acronym, span.abbr {
 	width:18px;
 	height:18px;
	background-image:url("images/Acronym/ed_acronym.gif");
	background-repeat:no-repeat;
	background-position:left top;
	white-space:nowrap;
	cursor:help;
	border-bottom:1px dashed #000;
	padding-left:19px;
}

/* styles */
h1 {
	FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-WEIGHT: bold; COLOR: #000000; margin-bottom: 6px
}

H1, H2, H3, H4, H5, P, TD, UL, OL, BLOCKQUOTE, INPUT, TEXTAREA, SELECT { font-family: Arial, Helvetica, sans-serif; } 
PRE { font-family: monospace; }
P, PRE { margin: 0px 0px 0px 0px; }
P, TD, UL, OL { font-size: 11px; }
img (margin: 8px 0px)
P { font-size: 11px; color: #555555; }
P A { font-weight: bold; }
img {border: 0px}

.headline {
	font-family: Arial, Helvetica, sans-serif;	font-size: 14px; color: red;
}

.box1 {
	background-color: #DDDDDD; 
	border: 1px solid #555555; 
	padding: 5px;
	margin-bottom: 12px;
}

Muckster · 3. Mai 2006 23:29

Und noch ne Frage zum Setup:

Ist eigentlich die Reienfolge wichtig? Vielleicht funktionierts deswegen nicht...

sissi · 4. Mai 2006 11:36

hi

die reihenfolge ist in dem fall egal. typo3 geht das setup von oben nach unten durch wobei eine definition die weiter unten nochmal gemacht wird die drüber überschreibt.

also:

page.15 = TEXT
page.15 = IMAGE

folge: page.15 ist dann ein Image.

Zu deinem RTE-Problem:

In der Zeile hideButtons = blendest du ja so ziemlich alles aus was nur geht (hide heisst ja verstecken). das mal auskommentieren, dann funzt es. findest du übrigens alles in der Doku zum RTEHTMLAREA.

grüsse
sissi

Muckster · 5. Mai 2006 00:44

Hallo Sissi,

danke erstmal, aber das von oben nach unten abgearbeitet wird ist mir schon klar. Auch das dadurch die gleiche Definition überschrieben wird. Meine Frage war ja, ob nicht manche Definitionen andere voraussetzen, d.h. es funktioniert nur wenn weiter oben etwas bestimmtes definiert wurde.... Kann mir sonst nicht vorstellen, warum mein Setup nicht rockt.

Den ich verstecke nicht mit hideButtons so ziemlich alles, sondern nur folgende:

hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, about

Diese erlaube ich (wobei ich glaube das ich diese benötige: textstyle, textstylelabel, blockstyle, blockstylelabel)

showButtons = chMode, textstyle, textstylelabel, 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, copy, cut, paste

Hab auch mal hideButtons komplett auskommentiert und kann die Pulldowns trotz allem nicht benützen...

Lieg ich da jetzt komplett falsch? Hoffe mir kann noch jemand weiterhelfen #paralyzed#

EDIT:

Ok, ich gebs zu: Lesen bildet o.O Aber bei Typo3 kommt man ja gar nicht mehr aus dem lesen raus, kennt sicher jeder. Und die Konfiguration des HTMLArea (und nicht nur von diesem essentiellen Plugin) ist meiner Meinung nach auch eher mangelhaft...was solls. Hier die Definition, die mir gefehlt hat:

FAQ: Why does the text style selection list remain empty?
This selection list should display the classes specified by RTE.default.classesCharacter. The specified classes must be defined in the CSS style sheet contained in the file specified by RTE.default.contentCSS.
If RTE.default.classesCharacter is empty, classes associated with the span tag are used. Classes not associated with any tag in the contentCSS style sheet will be displayed only if
RTE.default.showTagFreeClasses = 1

Ist aber siche nicht meine letzte Frage dazu, komme ja noch zum rendering im FE.

Liberation · 5. Mai 2006 10:29

RTE.default.showTagFreeClasses = 1
ist auf seite 1 im How To achon mit aufgeführt. 😃

MasterChief · 8. Mai 2006 15:42

Hi,

bei mir passiert nichts, wenn ich den Typocode, von Post1 nehme und in mein TSPage kopiere. Meine Frage was muss ich machen, damit er mir die eigenen Klassen einbaut in die Absatz-Box?

Ich benutze Typo3 3.8.1 und htmlArea RTE 1.1.6

Gruß Dominik

delldog · 9. Mai 2006 00:03

Hi,

ich komme mit der Konfiguration des htmlarea auch nicht weiter:
Ich habe ebenfalls den Code aus dem dem ersten Posting nach ...
- TSconfig der root-page (die Seite, wo ich "ist Anfang der Webseite" angewählt habe. Diese Seite befindet sich direkt unterhalb der Weltkugel)
- TSConfig des Admin
- TSConfig eines normalen Redakteur
- TSConfig einer Seite, wo ich dann den HTMLarea aufgerufen habe,
- ins Template (wir auch im Object-Browser unter TSSetup angezeigt)
kopiert.

Absolut keinerlei Auswirkungen im HTMLArea 1.4 in T3/ V4.0 sowohl im Firefox 1.5 als auch im IE 6.0. Caches sind sowohl im T3 als auch in den Browsern gelöscht.

Auch kein Effekt, wenn ich den Classic-RTE aktiviere bzw. deaktiviere.

Wäre froh, wenn jemand noch einen Rat für mich hätte.

Gruss Stephan.