Zum Inhalt springen

Umbrüche mit dem RTE

Erstellt am 24. September 2002 · 26 Antworten · letzte Antwort am 16. September 2003 · Seite 1 von 2

Tags: HTML & CSS, Frage

flo ·

Im RichTextEditor werden beim speichern alle
Tags (shift+return) in <p></p> Tags umgewandelt, das ergibt in manchen Fällen unschöhne Zeilenabstände.
wie kann ich die umwandlung verhindern?
Oder wie kann ich den Zeilenabstand sonst noch einstellen?

Blacky ·

Irgendwelche Tags brauchst Du ja in jedem Fall. Die p-Tags sind an sich kein Problem. Wenn Du die Abstände anpassen / verkleinern willst, geht das sehr einfach im Stylesheet:

P {
font-family : Verdana, sans-serif;
font-size : 10px;
color: #FFFFFF;
margin-top : 1px;
margin-bottom : 1px;
}
oder ganz auf null: margin-top : 0px

Gruß
Andreas Schwarzkopf
http://www.meinsystem.de

flo ·

Danke das haut hin!

ich habs vorher schon so versucht:
P {
font-family : Verdana, sans-serif;
font-size : 10px;
color: #FFFFFF;
line-height: 12px ;
}

aber hier bleibt der Abstand unverändert.

nazgul23 ·

hi,

ich habe genau das gleiche Problem, aber ich will das nicht mit css machen, weil wenn ich sag ich will ein <br> dann soll der RTE auch ein <BR> daraus machen und wenn ich sag ich weil einen neuen Absatzt (<P>) dann soll er auch das so machen.

ich hab schon folgendes getestet:

styles.content.RTE_encaps_stylesheets { 
  encapsTagList = div,p,pre,br 
  remapTag.DIV = P 
  nonWrappedTag = P 
  innerStdWrap_all.ifEmpty = &nbsp; 
  defaultAlign.field = text_align 
}

demnach sollte der RTE auch das br anerkennen
->> encapsTagList = div,p,pre,br
bedeutet doch, dass er diese Tags nicht umwandelt (wenn sie um eine Zeile gewrapt sind.)

Warum tut das nicht 🙁

Gruß
nazgul23

Roland-KS ·

--->>> adminguide-33_0.pdf:
RTE.........................................................21
TCEMAIN.................................................21
TCEMAIN_tables.......................................21
TCEFORM................................................22
Rich Text Editor (RTE)..............................24
Introduction.............................................24
Configuration of the toolbar.......................24
Properties and 'transformations'................25
RTE transformations in Content Elements. . .25
Technical description of transformations.......29
Interface configuration................................31
Interface configuration through Page TSconfig
..............................................................31
Configuration of the RTE editor interface. . . .34

nazgul23 ·

hallo Roland,

ich habe mal das durchgelesen. Nun habe ich aber noch ein Problem.
Ich will eine verschachtelte Liste erstellen:

<ul>
  <li>element 1</li>
  <ul>
     <li>element 1.1</li>
     <li>element 1.2</li>
     <li>element 1.3</li>
     <li>element 1.4</li>
  </ul>
<ul>

das geht aber nicht weil ja die ul/ol alle wie die table-Tags rausgefiltert werden.
Es wird dann in <typolist>-Tags umgewandelt und die können nicht verschachtelt werden.
So nun steht aber auf Seite 38, das man die Typolist abschalten kann mit der Eigenschaft "typolist".
unter setup habe ich dann page.typolist=0 eingetragen aber das hat nicht geklapt.

Irgendwie sitzte ich gerade voll auf dem Schlauch 🙁

Gruß
nazgul23

nazgul23 ·

Guten Morgen,

manchmal ist es besser, wenn man mal eine Pause macht #giggle#

ich hab es jetzt rausgefunden. ich habe in die Seite im TSConfig diese Zeile eingetragen:

RTE.default.proc.typolist=0

nun geht's, aber nur auf dieser Seite.

So nun taucht das nächste Prob auf, wie mache ich diese Einstellung so, dass es für alle Seiten gilt??

Wenn ich es im Template unter Constans oder Setup eintrage geschiet nichts.

Viele Grüße
nazgul23

bk ·

hallo nazgul23,

du musst es in die erste seite deines navigationbaumes (direkt unter der weltkugel) eintragen, dann wird es für die unterseiten auch angewendet.

mfg

bk

nazgul23 ·

Hi,

Da hab ich mich wohl zu früh gefreut 🙁

Das Übertragen auf die Oberste Seite hat funktioniert, aber jetzt taucht ein anderes Prob auf.
Ich kann jetzt meine Listen Schachteln und dann wird das auch richtig angezeigt, aber es wird vom RTE der <LI>-Teil mit einem <P>-Tag gewrapt. Dies hat zur Folge, das zwischen den Listenelementen immer eine Leerzeile ist. In der CSS-Datei habe ich für den P-Tag folgendes stehen:

P {
	font-family : Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
	font-size : 11px;
	line-height : 140%;
	color: #333333;
	padding-bottom : 0px;
}

egal wie ich an line-height und padding-bottom rumspiele hat es keine auswirkung auf diese Leerzeile.

Ich komme einfach nicht weiter :o
Ich mach jetzt Feierabend, das hat heute keinen Sinn mehr 😢

Gruß
nazgul23

nazgul23 ·

hi,

ich hab theoretisch ein lösung zu meinem Prob:
ich will die <P>-Tags durch <Div>-Tags ersetzten.

Ich hab es so versucht:

styles.content.RTE_encaps_stylesheets.remapTag.P = DIV

Das funktioniert aber nicht #paralyzed#

Ist das der falsche Schlüssel???

Gruß
nazgul23

dj.​picasso ·

Hi nazgul23,

wenn ich das richtig verstanden habe, dann schmeißt Du bei der Nutzung von CSS etwas durcheinander.

Du sagst, du möchtest Listen per CSS steuern (<LI>) versuchst dies aber über den <p>-tag im Style-Sheet. Das kann nicht funktionieren, außer Du erweiterst es. Ich trage dafür meist direkt am Anfang meines Style Sheets folgendes ein. Beispiel:

/* Allgemeine Definition der Schrifttypen */
h1, h2, h3, h4, h5, h6, p {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 10 px;
font-style: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-indent: 0px;
letter-spacing: normal;
line-height: normal;
margin: 0px 0px 0px 0px;
}

/* Allgemeine Definition der Listen */
ul, ol, dd {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 10 px;
font-style: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
text-indent: 0px;
letter-spacing: normal;
line-height: normal;
margin: 0px 0px 0px 20px;
}

Hier hättest Du dann Deine normalen Schriften von den Listen getrennt. Kurze Info falls nicht bekannt: margin 0px 0px 0px 20px;
bedeutet Rand oben, rechts, unten, links.

Falls Du keine CrossBrowser-Abfrage für Dein StyleSheet machst, solltest Du zumindest standardmäßig ca. 20px linker Rand angeben, da sonst unter dem MS IE Deine Punkte im linken Rand untergehen.

Danach kannst Du dann ja Deine individuellen Listen benennen und kannst jede Liste entsprechend anders einrücken.

Kleiner Tip: Mit <div> (Containern) springen viele nach Belieben um und des öfteren wissen diejenigen dann nicht was sie tun (weil es ja irgendwie funktioniert). Der eigentliche Sinn dieser Container ist aber das Arbeiten im "3-dimensionalen" HTML sowie die daraus resultierende Steuerung/Positionierung über Styles - sprich das Arbeiten mit Ebenen/Layern/Z-Indizees.

Hier aber wiederum vorsicht ohne CrossBrowser Abfragen. Das geht nämlich sonst in den meisten Fällen in die Hose. Auch bei Formularen und Hyperlinks kann sich das sehr schnell aufgrund der unterschiedlichen DOM-Strukturen der Browser negativ auswirken.

Ciao
DJ Picasso

nazgul23 ·

hi dj.picasso,

nicht ganz 😉

Also ich will eigentlich nur meine Listen verschachteln können.
Das geht aber mit der Standardeinstellung von RTE nicht (weil er listen in <typolist> umwandelt und dann die verschachtelung auflöst).

Mein nächster Gedanke war dann, dass ich die typolisten ausschalte.
Dies habe ich im TSConfig im Seitentitel der Rootseite so gemacht:

RTE.default.proc.typolist=0

Desweiteren habe ich im Template unter Setup dies geändert (weil die Listen im tt_content mit Tabellen generiert werden):

tt_content.bullets.20.default.wrap = <UL> | </UL>
tt_content.bullets.20.default.split.1.wrap = <LI> | </LI>

Das ist für die Listen ohne RTE.

tt_content.text.20.parseFunc.tags.typolist.default.wrap = <UL> | </UL>
tt_content.text.20.parseFunc.tags.typolist.default.split.1.wrap = <LI> | </LI>

Und das für die Listen im RTE, aber Eigentlich ist das ja überflüssig, weil ich es ja abgeschaltet habe.

Das Verschachteln hat dann funktioniert, aber weil der RTE um jede Zeile wraped habe ich jetzt um jedes Listenelement den Font-Tag und darum den P-Tag.
Daraus ergibt sich das Problem, dass die Listenelemente nicht zusammen sind, sondern eine Leerzeile dazwischen ist und das ist sehr unschön #paralyzed#

Folgendes habe ich getestet:
- die HTML-Seite local gespeichert und
-- versucht per CSS einstellung die leerzeile wegzubekommen -> geht nicht
-- die P-Tags durch DIV-Tags entfernt --> die Leerzeile ist weg.

Und dann habe ich mir gedacht, weil ich das wrapen nicht wegbekomme wollte ich die P-Tags durch Div-Tags ersetzten. Aber wie o.O

ich hab mir auch schon den Adminguide unter die Lupe genommen, entweder bin ich blind oder mein Englisch ist nicht so gut, um das zu verstehen 🙁

Was könnte ich sonst machen um die Leerzeilen wegzubekommen o.O

der RTE hat schon komische angewohnheiten 😉

Viele Grüße
nazgul23

dj.​picasso ·

Hi nazgul23,

also erst einmal muß ich gestehen, dass ich noch ein Newbee bin, was das arbeiten mit Typo3 angeht. Deshalb triffst Du mich natürlich mit Deinem Code an meiner schwachen Stelle. Aber ich arbeite dran 😃 .

Mit Deinem CSS Problem habe ich das mal mit einer statischen HTML Seite getestet. Kein Problem bei mir.

Hier mal der HTML-Code:

<ul class="test">
<li>Liste1</li>
<li>Liste2</li>
<ul class="test">
<li>Liste1</li>
<li>Liste2</li>
<li>Liste3</li>
<li>Liste4</li>
<li>Liste5</li>
</ul>
<li>Liste3</li>
<li>Liste4</li>
<li>Liste5</li>
</ul>
<p class="txt1">Dies ist ein normaler Text</p>

Mit dem Quelltext, den ich dir schon gepostet hatte und der Ergänzung (nur Beispielhaft!!):

.test {font-size: 12px; font-weight: bold; text-align:left; color: #000000; margin: 0px 0px 0px 20px;}

bekomme ich zwei Listen, die entsprechend versetzt und ohne Leerzeichen dargestellt werden (sowohl Netscape 6.x, MSIE 5.X als auch MSIE 6.X).
Auch nach den beiden Listen erscheinen in meinen Browsern keine Abstände, sondern direkt die Zeile mit dem Text.
Daher sollte es doch eigentlich reichen wenn Du Deine <UL> Einträge ergänzt.
Falls Du dann jedoch weitere Einstellungen über Fonts in Deinen Listen einträgst, kann das natürlich dazu führen, dass Deine Listendarstellung wieder über den Haufen geworfen wird.

Ciao
DJ Picasso

Ach ja, falls Du die Darstellung der Punkte innerhalb der Listen unterschiedlicher Art haben möchtest, funktioniert natürlich mittlerweile (früher mal ein Problem von Netscape) folgendes:

<ul>
<li class="test">Liste21</li>
<ul>
<li class="test2">Liste31</li>
<li class="test3">Liste32</li>
<li class="test4">Liste33</li>
<li class="test5">Liste34</li>
</ul>
<li class="test">Liste22</li>
<li class="test">Liste23</li>
<li class="test">Liste24</li>
</ul>

nazgul23 ·

Hallo

Also wenn ich jetzt im RTE eine Liste erstelle siehter Cod z.b. im RTE so aus:

<ul>
  <li>Liste1</li>
  <li>Liste2</li>
  <ul>
    <li>Liste1</li>
    <li>Liste2</li>
    <li>Liste3</li>
    <li>Liste4</li>
    <li>Liste5</li>
  </ul>
  <li>Liste3</li>
  <li>Liste4</li>
  <li>Liste5</li>
</ul>

das ist ja ganz schön und gut, aber wenn ich dann im FE den Code anschaue sieht er so aus:

<ul>
  <P style="margin:0 0 0 0;"><font face="Arial..." size="2" color="black"><li>Liste1</li></font></P>
  <P style="margin:0 0 0 0;"><font face="Arial..." size="2" color="black"><li>Liste2</li></font></P>
  <ul>
  <P style="margin:0 0 0 0;"><font face="Arial..." size="2" color="black"><li>Liste1</li></font></P>
  <P style="margin:0 0 0 0;"><font face="Arial..." size="2" color="black"><li>Liste2</li></font></P>
  <P style="margin:0 0 0 0;"><font face="Arial..." size="2" color="black"><li>Liste3</li></font></P>
  <P style="margin:0 0 0 0;"><font face="Arial..." size="2" color="black"><li>Liste4</li></font></P>
  <P style="margin:0 0 0 0;"><font face="Arial..." size="2" color="black"><li>Liste5</li></font></P>
  </ul>
  <P style="margin:0 0 0 0;"><font face="Arial..." size="2" color="black"><li>Liste3</li></font></P>
  <P style="margin:0 0 0 0;"><font face="Arial..." size="2" color="black"><li>Liste4</li></font></P>
  <P style="margin:0 0 0 0;"><font face="Arial..." size="2" color="black"><li>Liste5</li></font></P>
</ul>

Warum das gemacht wir, steht im Adminguid. Aber egal was ich in style im P-Tag eintrage (hab es Statisch getestet) es verändert sich nichts auf Bezug der Leerzeile. 🙁

Und wie bekomme ich die P-Tags weg oder wie kann ich sie durch Div-Tag ersetzten? Dann würde es funktionieren.

Ist es jetzt verständlich, was ich will o.O

Viele Grüße
nazgul23

dj.​picasso ·

Hi,

habe mir mal das Adminguide angesehen (Seite 25 ff) und bin derzeit nur am Staunen. :o

Muß Dich daher etwas vertrösten, da ich mir die Dinge erst etwas verständlicher machen muß.
Ich hoffe das ist ok.

Auf jeden Fall macht der Code, den Du als Resultat erhälst keinen Sinn. Das kann ja nicht funktionieren.

Wenn ich irgendetwas herausbekommen habe, dann melde ich mich.
Ciao
DJ Picasso

nazgul23 ·

ja das wäre echt super.

irgendwie hab ich da eine denckblockade und ich komme nicht weiter 😢

Vielen Dank für deine bisherigen bemühungen 🙂

Viele Grüße
nazgul23