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


  • 0 x
    24 Beiträge
    0 Hilfreiche Beiträge
    03. 02. 2007, 20:08

    [quote="lambdaoe"]
    Hast Du die entsprechenden CSS-Definition auch erstellt und mit der Seite verlinkt?
    [/quote]
    Habe die CSS von der ersten Seite erstellt und in der root des Webspaces abgelegt. Ist die dort richtig?

    [quote="lambdaoe"]
    Schau mal Deine Seite an. Sind
    1. die Texte mit den CSS-Klassen/ID's versehen und
    [/quote]
    Ist damit dieses im Seitenquelltext gemeint?
    [HTML]<!-- CONTENT ELEMENT, uid:12/text [begin]-->
    <a id="c12"></a><br /><b><font color="darkblue"></font></b><br /><br /><p class="align-left">Test</p>
    <p class="align-center"><link http:xxx="" -="" external-link-new-window="" ffneteinenexternenlinkineinemneuenfenster="" />Test</link></p>
    <!-- CONTENT ELEMENT, uid:12/text [end]-->[/HTML]

    [quote="lambdaoe"]
    2. gibt es diese für diese Seite definiert, d.h. gibt es ein Stylesheet dazu?
    Ich vermute dass 2. nicht gegeben ist.
    [/quote]
    Wenn ja, dann ist dafür noch nichts hinterlegt. Muss dann nur die CSS Datei angepasst werden, muss eine andere dafür angelegt werden oder muss ich das Typo noch beibringen?

    Danke schon mal für die schnelle Hilfe. :)

  • lambdaoe lambdaoe
    R2-D2
    0 x
    119 Beiträge
    0 Hilfreiche Beiträge
    04. 02. 2007, 20:55

    In deinem Seitencode hast Du z.B.

    [HTML]<p class="align-center"><link http:xxx="" -="" external-link-new-window="" ffneteinenexternenlinkineinemneuenfenster="" />Test</link>[/HTML]

    Da findest Du das [u][i]class="align-center"[/i][/u]. Damit der Browser aber weis was er tun soll muss du ihn das auch sagen. D.h. du musst die Klasse [u][i]align-center[/i][/u] definieren.

    Dazu gibt es die sogenannten Style-Definitionen. Diese sind im Headerbereich entweder direkt angegeben (nur in besonderen Fällen) oder in Stylessheet die über den Link-Befehl eingebunden werden. Z.B. [HTML]<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_e45948f2e1.css" />[/HTML]

    Lies mal am besten unter [url]http://de.selfhtml.org/css/index.htm[/url] nach.

    Lies auch mal die Doku für rtehtml bzw. birgitr hat ein paar Kommentare vorher die Einbindung beschrieben.

    Gruß.

  • 0 x
    24 Beiträge
    0 Hilfreiche Beiträge
    08. 02. 2007, 19:56

    Vielen Dank schon mal, hab es hin bekommen.

    Jetzt habe ich nur noch das Problem, dass mir die Links nicht richtig angezeigt werden. Sieht im Quelltext so aus:

    [HTML]<link 9 _blank external-link-new-window "Öffnet einen externen Link in einem neuen Fenster">Formatierungselemente</link>[/HTML]

    Ich denke mir mal, dass da noch ein Paar Zusätze fehlen wie z.B. href und Ähnliches. Die Frage ist nur, wie bekomme ich Typo das beigepult?

    Nebenbei werden mir Unterstreichungen mit <//u> vor und nach dem zu unterstreichenden Teil gesetzt werden. Wodurch könnte das bewirkt werden?

  • bedunet bedunet
    Padawan
    0 x
    56 Beiträge
    0 Hilfreiche Beiträge
    23. 02. 2007, 12:52

    Hallo,

    ich habe ein Problem mit dem RTE. Hoffe sehr das ihr mir helfen könnt. Es werden keine <span>-Tags innerhalb von <p>-Tags gespeichert. Also
    [HTML]<p><span class="textrot">roter Text</span> anderer Text</p>[/HTML]
    wird zu
    [HTML]<p>roter Text anderer Text</p>[/HTML]

    Meine TSConfig in der Rootpage:
    [TS]#*** 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;
    }
    }

    #
    # *** Entfernt das Bild vor den Links
    RTE.classesAnchor {
    internalLink {
    class = internal-link
    type = page
    image >
    }
    externalLink {
    class = external-link
    type = url
    image >
    }
    externalLinkInNewWindow {
    class = external-link-new-window
    type = url
    image >
    }
    internalLinkInNewWindow {
    class = internal-link-new-window
    type = page
    image >
    }
    download {
    class = download
    type = file
    image >
    }
    mail {
    class = mail
    type = mail
    image >
    }
    }

    ## RTE Konfiguration
    RTE.default {

    # Zuweisung der CSS-Datei
    contentCSS = fileadmin/template/main/res/symrise_rte.css

    #Zuweisung der eigenen Textklassen
    #classesCharacter = textgruen, textrot, hometeaser
    #classesParagraph = textgruen, textrot, hometeaser

    ## Markup options
    enableWordClean = 1
    removeTrailingBR = 1
    removeComments = 1
    removeTags = center, sdfield
    removeTagsAndContents = style,script

    # Buttons die gezeigt/versteckt werden
    showButtons = textstyle, textstylelabel, formatblock, 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, chMode, insertag
    hideButtons = fontstyle, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste

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

    ## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
    ignoreMainStyleOverride = 1

    proc {

    # tags die erlaubt / verboten sind
    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
    denyTags = font

    # br wird nicht zu p konvertiert
    dontConvBRtoParagraph = 1

    # tags sind erlaubt außerhalt von p, div
    allowTagsOutside = img,hr

    # tags sind erlaubt innerhalb von p, div
    allowedTagsInside = span

    # erlaubte attribute in p, div tags
    keepPDIVattribs = align,class,style,id

    # die eigenen Klassen erlauben
    #allowedClasses = textgruen, textrot, hometeaser
    #classesParagraph = textgruen, textrot, hometeaser

    # 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, hometeaser, textgruen, textrot
    )

    # 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 {
    span.fixAttrib.style.unset = 1
    p.fixAttrib.align.unset = 1
    div.fixAttrib.align.unset = 1
    span.allowedAttribs = class
    p.allowedAttribs = class
    hr.allowedAttribs = class
    b.allowedAttribs = xml:lang
    blockquote.allowedAttribs = xml:lang
    cite.allowedAttribs = xml:lang
    em.allowedAttribs = xml:lang
    i.allowedAttribs = xml:lang
    q.allowedAttribs = xml:lang
    strong.allowedAttribs = xml:lang
    sub.allowedAttribs = xml:lang
    sup.allowedAttribs = xml:lang
    tt.allowedAttribs = xml:lang

    ## img tags werden erlaubt
    img >
    }
    }

    }

    # Classes: Ausrichtung
    classesParagraph (
    align-left, align-center, align-right
    )

    # Classes: Eigene Stile
    classesCharacter = textgruen, textrot, hometeaser
    classesParagraph = textgruen, textrot, hometeaser

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

    # zeigt alle CSS-Klassen die in symrise_rte.css vorhanden sind
    showTagFreeClasses = 1

    # 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=1
    disableColorFieldsetInTableOperations=1
    disableLayoutFieldsetInTableOperations=1
    disableBordersFieldsetInTableOperations=0
    }

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

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

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

    # Span innerhalb von <P> Tags nicht löschen
    RTE.default.proc.HTMLparser_db.tags.span.allowedAttribs = lang, title, span, class[/TS]

    Innerhalb anderer Tags, z.B. <h1> werden <span>-Tags übernommen.

    [Edit]Jetzt habe ich doch die Versionen vergessen:
    Typo3 4.0.5
    htmlArea RTE 1.3.8

  • super-mario super-mar...
    Padawan
    0 x
    46 Beiträge
    0 Hilfreiche Beiträge
    26. 02. 2007, 16:17

    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
    [TS]RTE.default.showTagFreeClasses = 1[/TS]
    setzte seh ich zwar meine CSS Datei aber beim speichern geht wieder alles verloren #angry#
    wenn ich
    [TS]RTE.classes {
    box {
    name = box
    value = font-color:blue
    }
    }[/TS]
    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 cordman
    Jedi-Ritter
    0 x
    144 Beiträge
    0 Hilfreiche Beiträge
    26. 02. 2007, 19:44

    Ein Bischen Code würde sicherlich helfen den Sachverhalt besser zu verstehen.
    Hast du die Klassen denn auch schon erlaubt und eingebunden?

    [TS]## RTE Konfiguration
    RTE.default {
    ...
    proc {
    ...
    # Listen der erlaubten Klassen
    allowedClasses (
    box, box2, ...
    )
    ...
    }
    ...
    # Einbinden eigener Klassen
    # Text
    classesCharacter = box
    # Absatz
    classesParagraph = box2
    ...
    }
    [/TS]

  • super-mario super-mar...
    Padawan
    0 x
    46 Beiträge
    0 Hilfreiche Beiträge
    27. 02. 2007, 11:12

    [TS]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
    [/TS]
    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?

  • cordman cordman
    Jedi-Ritter
    0 x
    144 Beiträge
    0 Hilfreiche Beiträge
    27. 02. 2007, 12:04

    Dafür sollte man das <p>-Tag nehmen, da dies auch semantisch korrekt ist.

  • m3typo3 m3typo3
    Jedi-Ritter
    0 x
    131 Beiträge
    0 Hilfreiche Beiträge
    28. 02. 2007, 14:25

    [quote="cordman"]
    Dafür sollte man das <p>-Tag nehmen, da dies auch semantisch korrekt ist.
    [/quote]

    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?