htmlarea / RTE (Konfiguration) - so gehts [Gelöst]

  • ms_k ms_k
    Jedi-Ritter
    0 x
    133 Beiträge
    0 Hilfreiche Beiträge
    21. 03. 2006, 13:38

    Hallo Allerseits,

    da anscheinend viele das selbe Problem haben, wie ich hatte poste ich hier mal meine komplete RTE konfiguration. Mit angelegten Text- bzw. Absatzstilvorlagen.

    Hoffe das hilft einigen über Ihre RTE Probleme hinweg.
    [b]htmlArea RTE Version 1.1.3[/b]
    [b]TSconfig-Eintrag:[/b]

    1. #*** RTE Classe des Interface (Ausrichtung)
    2. RTE.classes {
    3. align-left {
    4. name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft
    5. value = text-align: left;
    6. }
    7. align-center {
    8. name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter
    9. value = text-align: center;
    10. }
    11. align-right {
    12. name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright
    13. value = text-align: right;
    14. }
    15. }
    16.  
    17. #
    18. # *** Entfernt das Bild vor den Links
    19. RTE.classesAnchor {
    20. internalLink {
    21. class = internal-link
    22. type = page
    23. image >
    24. }
    25. externalLink {
    26. class = external-link
    27. type = url
    28. image >
    29. }
    30. externalLinkInNewWindow {
    31. class = external-link-new-window
    32. type = url
    33. image >
    34. }
    35. internalLinkInNewWindow {
    36. class = internal-link-new-window
    37. type = page
    38. image >
    39. }
    40. download {
    41. class = download
    42. type = file
    43. image >
    44. }
    45. mail {
    46. class = mail
    47. type = mail
    48. image >
    49. }
    50. }
    51.  
    52.  
    53. ## RTE Konfiguration
    54. RTE.default {
    55.  
    56. # Zuweisung der CSS-Datei
    57. contentCSS = rte_formate.css
    58.  
    59. ## Markup options
    60. enableWordClean = 1
    61. removeTrailingBR = 1
    62. removeComments = 1
    63. removeTags = center, sdfield
    64. removeTagsAndContents = style,script
    65.  
    66. # Buttons die gezeigt/versteckt werden
    67. showButtons = 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, about
    68. hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste
    69.  
    70. # Hält die RTE Icons gegroupt zusammen
    71. keepButtonGroupTogether = 1
    72.  
    73. # blendet Statusbar in htmlarea aus
    74. showStatusBar = 0
    75.  
    76. ## Add styles Left, center and right alignment of text in paragraphs and cells.
    77. inlineStyle.text-alignment (
    78. 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; }
    79. 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; }
    80. 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; }
    81. )
    82.  
    83. ## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
    84. ignoreMainStyleOverride = 1
    85.  
    86. proc {
    87. # tags die erlaubt / verboten sind
    88. 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
    89. denyTags = font
    90.  
    91. # br wird nicht zu p konvertiert
    92. dontConvBRtoParagraph = 1
    93.  
    94. # tags sind erlaubt außerhalt von p, div
    95. allowTagsOutside = img,hr
    96.  
    97. # erlaubte attribute in p, div tags
    98. keepPDIVattribs = align,class,style,id
    99.  
    100. # List all class selectors that are allowed on the way to the database
    101. allowedClasses (
    102. external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
    103. align-left, align-center, align-right, author
    104. )
    105.  
    106. # html parser einstellungen
    107. HTMLparser_rte {
    108.  
    109. # tags die erlaubt/verboten sind
    110. allowTags < RTE.default.proc.allowTags
    111. denyTags < RTE.default.proc.denyTags
    112.  
    113. # tags die untersagt sind
    114. removeTags = font
    115.  
    116. # entfernt html-kommentare
    117. removeComments = 1
    118.  
    119. # tags die nicht übereinstimmen werden nicht entfernt (protect / 1 / 0)
    120. keepNonMatchedTags = 0
    121. }
    122.  
    123.  
    124. # Content to database
    125. entryHTMLparser_db = 1
    126. entryHTMLparser_db {
    127.  
    128. # tags die erlaubt/verboten sind
    129. allowTags < RTE.default.proc.allowTags
    130. denyTags < RTE.default.proc.denyTags
    131.  
    132. # CLEAN TAGS
    133. noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
    134.  
    135. rmTagIfNoAttrib = span,div,font
    136.  
    137. # htmlSpecialChars = 1
    138.  
    139. ## align attribute werden erlaubt
    140. tags {
    141. p.fixAttrib.align.unset >
    142. p.allowedAttribs = class,style,align
    143.  
    144. div.fixAttrib.align.unset >
    145.  
    146. hr.allowedAttribs = class
    147.  
    148. # b und i tags werden ersetzt (em / strong)
    149. b.remap = strong
    150. i.remap = em
    151.  
    152. ## img tags werden erlaubt
    153. img >
    154. }
    155. }
    156.  
    157. }
    158.  
    159. # Classes: Ausrichtung
    160. classesParagraph (
    161. align-left, align-center, align-right
    162. )
    163.  
    164. # Classes: Eigene Stile
    165. classesCharacter = author
    166. classesImage= rte_image
    167.  
    168.  
    169. # Classes für Links (These classes should also be in the list of allowedClasses)
    170. classesAnchor = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail
    171. classesAnchor.default {
    172. page = internal-link
    173. url = external-link-new-window
    174. file = download
    175. mail = mail
    176. }
    177.  
    178. # zeigt alle CSS-Klassen die in formate.css vorhanden sind
    179. showTagFreeClasses = 1
    180.  
    181. # Do not allow insertion of the following tags
    182. hideTags = font
    183.  
    184. # Tabellen Optionen in der RTE Toolbar
    185. hideTableOperationsInToolbar = 0
    186. keepToggleBordersInToolbar = 1
    187.  
    188. # Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)
    189. disableSpacingFieldsetInTableOperations = 1
    190. disableAlignmentFieldsetInTableOperations=1
    191. disableColorFieldsetInTableOperations=1
    192. disableLayoutFieldsetInTableOperations=1
    193. disableBordersFieldsetInTableOperations=0
    194. }
    195.  
    196. # Use same processing as on entry to database to clean content pasted into the editor
    197. RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db
    198.  
    199. # FE RTE configuration (htmlArea RTE only)
    200. RTE.default.FE < RTE.default
    201. RTE.default.FE.userElements >
    202. RTE.default.FE.userLinks >
    203.  
    204. # Breite des RTE in Fullscreen-Ansicht
    205. TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 80%

    [b]rte_formate.css (heisst bei mir halt so):[/b]

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

    [b]Konfiguration in den Extensions-Einstellungen:[/b]
    Default configuration settings: Demo
    Enable images in the RTE: haken gesetzt
    Enable compressed scripts: haken nicht gesetzt

    So denn, dann viel Spass und gutes gelingen
    Karin 8-)


  • ms_k ms_k
    Jedi-Ritter
    0 x
    133 Beiträge
    0 Hilfreiche Beiträge
    14. 08. 2006, 10:42

    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 :D .

    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

  • Estrobyn Estrobyn
    R2-D2
    0 x
    80 Beiträge
    0 Hilfreiche Beiträge
    14. 08. 2006, 13:59

    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#
    [HTML].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;
    }[/HTML]

    Liebe Grüsse

    Estro

  • ms_k ms_k
    Jedi-Ritter
    0 x
    133 Beiträge
    0 Hilfreiche Beiträge
    14. 08. 2006, 16:38

    hi,

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

    Seite 1: Zeile: 101-104
    [TS]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])

    [/TS]

    und seite 1, zeile 165

    [TS]# Classes: Eigene Stile
    classesCharacter = [deineKlasse][/TS]

    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

  • Estrobyn Estrobyn
    R2-D2
    0 x
    80 Beiträge
    0 Hilfreiche Beiträge
    14. 08. 2006, 17:27

    Salü!

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

    Ja, das habe ich alles gemacht...
    [TS]# 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
    ) [/TS]
    und
    [TS]# Classes: Eigene Stile
    classesCharacter = author, bodytextlink, bodytext
    classesImage= rte_image[/TS]

    Der Quelltext sieht wie folgt aus:

    [HTML]<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>[/HTML]
    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
    [TS]# 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
    ) [/TS]
    und
    [TS]# Classes: Eigene Stile
    classesCharacter = author, bodytextlink, bodytext
    classesImage= rte_image[/TS]
    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:
    [HTML]<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>[/HTML]

    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

  • ms_k ms_k
    Jedi-Ritter
    0 x
    133 Beiträge
    0 Hilfreiche Beiträge
    16. 08. 2006, 08:40

    hi,

    hast du evtl. eine generelle A-tag Definition die in deiner CSS ist, die die Klasse bodytextlink noch überschreibt?

    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)?

    äh in deinem geposteten Quellcode ist es doch schon so

    #
    <!-- 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]-->

    oder war das der wunschquellcode *g*.

    Grüße ms_k


  • 0 x
    17. 08. 2006, 11:35

    Hi Leute,

    ich stehe vor einem Problem. Ich möchte die RTE HTMLArea gerne für einen Kunden anpassen. Damit dieser leichter von mir definierte Klassen verwenden kann.

    Wie ist es möglich evtl. Einrückungen vorzunehmen im Dropdownmenü?

    Bsp:
    Tabellenstil1

    Klasse1
    Klasse2
    Klasse3

    Tabellenstil2
    Klasse4
    Klasse5
    Klasse6

    Dies würde die Auswahl der richtigen Klasse enorm erleichtern.

    Ich arbeite ebenfalls mit der rte_formate.css hier aus dem Forum und der im ersten Post zur Verfügung gestellten Konfiguration.

    Gruß MoRpH2k2

    PS: Ich musste die Quote Funktion nutzen um eine Einrückung hinzubekommen ;) Sowohl Tabs als auch leerzeichen wurden ignoriert ;)

  • briem briem
    T3PO
    0 x
    27 Beiträge
    0 Hilfreiche Beiträge
    28. 08. 2006, 14:55

    Wie bekomme ich den alttext von Links weg?
    Ich meine damit "Öffnet einen internen Link" usw.
    Ich möchte auf diese Texte gänzlich verzichten.
    Danke im vorraus

  • marelinchen marelinch...
    Jedi-Ritter
    0 x
    121 Beiträge
    0 Hilfreiche Beiträge
    04. 10. 2006, 08:35

    hallo weiss jemand wo ich die extension in version 1.2 downloaden kann.
    auf typo3.org ist nur die neuste 1.4

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    04. 10. 2006, 08:42

    [quote="marelinchen"]
    hallo weiss jemand wo ich die extension in version 1.2 downloaden kann.
    auf typo3.org ist nur die neuste 1.4
    [/quote]
    extension manager > suche nach der ext > klick auf den titel > link oben dropdown version auswählen > update/o.ä. klicken

    georg