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
    06. 07. 2006, 14:37

    hi Photek,

    Hm, ich dachte eigentlich, dass die RTE CSS und die Seiten CSS auch nicht abhängig von einander funktionieren können, zumindest testweise, sonst wäre es auch unnsinnig.

    warum soll diese Prinzip unsinnig sein? Globalisierte bzw. Zentralisierte Layout-Definitionen, funktioniert nach dem Prinzip externe CSS-Dateien.
    Die benutzen CSS Definitionen müssen irgendwie in der geparsten T3 HTML-Seite eingebunden sein, denn unbekannte CSS-Klassen - können logischer Weise nicht dargestellt werden.

    Der RTE greift auch nur auf deine extern definierte CSS-Klasse zu und schreibt HTML-Tags ala:

    [HTML]<p class=deineKlasse>text</p>
    [/HTML]

    es werden kein direkte CSS-Formats draus, wie z.B.

    [HTML]<p style="color:red;">text</p>.
    [/HTML]

    Ob du nun eine RTE eigene CSS mit denen für die Redakteuere bestimmten Klassen erstellst, diese in deine Haupt-CSS inkludierst oder die Klassen da reinkopierst oder per TypoScript zusätzlich einbindest oder direkt in deinem HTML-Template - ist total egal. Hauptsache das System kennt deine CSS-Definitionen. Sonst können sie auch nicht angewendet und dargestellt werden.

    Generell würde ich mal schauen:

    1. ob die CSS richtig definiert sind (RTE baut nämlich class=[deineKlasse]rein und keine ID etc)
    2. die CSS überhaupt in deiner HTML-Seite eingebunden wird mit <link ...>
    3. der RTE die Klasse beim speichern behält, dann wäre es nämlich noch ein TSconfig PRoblem.

    Grüße
    ms_k

  • kccm24 kccm24
    Padawan
    0 x
    55 Beiträge
    0 Hilfreiche Beiträge
    24. 07. 2006, 23:02

    Hallo zusammen,
    habe den Thread gelesen, aber ich sehe keine Lösung für mein Problem:

    In meiner CSS Datei habe ich den Bodytag mit eine Hintergrundgrafik versehen.

    Wenn ich jetzt einen Text anlegen will erscheinzt diese Hintergrundgrafik im
    rte_htmlarea, obwohl ich den Text in eine Tabellenzelle einfüge, die einen weißen
    Hintergrund hat. Das nervt, weil die Hintergrundgrafik sich leider mit der Schirtffarbe beißt und diese kaum erkennbar ist.
    Wie kann ich definieren, dass der bodytag im rte_htmlarea überschrieben wird?

    Gruß
    kccm24

  • mediaman mediaman
    R2-D2
    0 x
    123 Beiträge
    0 Hilfreiche Beiträge
    25. 07. 2006, 16:32

    Hallo, ich habe auch ein Problem:

    Habe bei mir die Align-Buttons aktiviert und nach einem Tag Recherche liefen die dann auch endlich mit:

    [TS]RTE.default.proc {
    entryHTMLparser_db.tags.img >

    #- TAGS ALLOWED OUTSIDE P & DIV
    allowTagsOutside = hr, address, img, size, span

    entryHTMLparser_db = 1
    entryHTMLparser_db.tags {
    p.fixAttrib.align.unset >
    div.fixAttrib.align.unset >
    p.allowedAttribs = class, style, align
    span.fixAttrib.style.unset >
    }
    }
    [/TS]

    Heute musste ich dann noch eine Text-Klasse definieren. Das hat dann auch nach ein paar Stunden hingehauen:

    [TS]

    RTE.default {
    # Zuweisung der CSS-Datei
    contentCSS = fileadmin/template/sonstiges/css_htmlarea.css
    useCSS = 1

    showButtons = bold, italic, underline, 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, copy, cut, paste, fontsize, left, center, right, textcolor, fontstyle, textstyle, textstylelabel

    hideButtons = strikethrough,lefttoright, righttoleft, bgcolor, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, formatblock, blockstyle, blockstylelabel

    #Meine CSS-Klasse ist mit span versehen, also brauche ich keine 1!!
    showTagFreeClasses = 0

    ignoreMainStyleOverride = 0

    removeTags =
    removeTagsAndContents =
    hideTags =

    classesCharacter = roter-startseiten-text
    allowedClasses (roter-startseiten-text)
    }
    [/TS]

    Tja, aber nun ist es vorbei mit den Align-Button, da funktioniert nämlich mal wieder die Speicherung nicht mehr, wie schon zuvor, als ich einen Tag nach der Lösung gesucht habe...

    Habe dann in diesem Thread noch diese Lösung für Align gefunden:
    [TS]entryHTMLparser_db.tags {
    span >
    }[/TS]
    funktioniert aber natürlich auch nicht. Ich krieg noch ein Schreikrampf bei diesem .... Editor #angry#

  • mediaman mediaman
    R2-D2
    0 x
    123 Beiträge
    0 Hilfreiche Beiträge
    26. 07. 2006, 14:39

    Zu meinem Problem siehe hier:
    http://www.typo3.net/forum/list/list_post//47099/?page=1#pid176895

  • Danii Danii
    Sternenflotten-Admiral
    0 x
    201 Beiträge
    0 Hilfreiche Beiträge
    01. 08. 2006, 13:43

    Mahlzeit zusammen,

    erstmal danke an ms_k für den [HowTo]-Trööt. Allerdings habe ich noch zwei Sachen wo ich nicht weiter komme.

    1. Problemerle
    onkelfusspilz hat das Problem schon auf der ersten Seite angesprochen

    2.) Wenn ich im RTE eine Tabelle einfüge und dann rechte Maustaste "Tabelleneigenschaften" auswähle, so gibt es dort ein Feld "Überschrift". Sieht auch ok aus im RTE aber im FE steht dann <caption>Tabellen-Überschrift</caption> (und zwar wirklich der Tag!)

    Ich hab dazu leider keine Lösung finden können. Gibts hier schon Lösungsansätze?

    2. Problemerle
    Die Absatzeigenschaften funktionieren ja erst am einen öffnenden <p>-Tag der allerdings bei Neuanlegen eines Datensatzes nicht vorhanden ist. D.h. der Redakteur muss erst einmal eine Zeilenschaltung machen. Gibts ne Möglichkeit den <p>-Tag schon inital zu setzen?

    Uuups und noch eins:

    Wenn ich nach einer Tabelle eine Zeilenschaltung/Return einfüge, werden mir nach dem schließenden <table>-Tag zwei mal <p></p><p></p> reingebaut. Ist doch Käse. Kann ich da irgendwo schrauben?

  • ms_k ms_k
    Jedi-Ritter
    0 x
    133 Beiträge
    0 Hilfreiche Beiträge
    01. 08. 2006, 15:36

    Hi Dani,

    also Eine Gegenfrage nochmal zu Problem 1:
    Was hättest denn gerne an der Stelle statt dem <caption> wenn du eine Tabellenüberschrift einfügst. Laut SELFHTML ist das doch legitim :o

    zu Problem 2:
    nach dem Speichern fügt er auch um eine einzeiliges Wortstück eine Absatzformatierung, ala <p>

    mmh Problem uups *lach*:
    tritt bei mir auch auf, hat mich bislang aber nicht gestört, weil ich eh Absätze am Ende brauche bzw. nach Tabellen als sinnvoll erachte. Daher sorry hab ich keine Lösung dafür ;-).

    Viele Grüße
    ms_k

  • Danii Danii
    Sternenflotten-Admiral
    0 x
    201 Beiträge
    0 Hilfreiche Beiträge
    01. 08. 2006, 16:07

    Servus ms_k, erstmal Danke für deine Antwort.

    zu Problem 1:
    Das <caption>hallo</caption> steht so im FE und nicht im Quelltext!
    Nach dem speichern der Seite steht's im BE noch kurz über der Tabelle (als Head so wie es sein soll) - im FE dann so wie oben beschrieben. Nach nochmaligen Aufruf der Seite im BE stehts dann ebenfalls so drin: caption>hallo</caption>

    zu Problem 2:
    eigentlich schade. Muss mal halt dem Redakteur richtig verkaufen dass er erst speichern muss um Änderungen zu machen. Wäre kofortabler, sprich userfreundlicher gewesen wenn der Redakteur gleich loslegen könnte.

    mmh Problem uups *lach* *prust*:
    Mich störts ja auch nicht - aber immer diese (kommenden Rückfragen des Redakteurs (warum geht des ned)) #angry#

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

    hi dani,

    sorry hatte bei Problem 1 das FE überlesen:

    tu doch den <caption>-tag einfach mal zu den proc.allowTags = ...
    und entryHTMLparser_db.noAttrib = ...

    Obwohl ich den Tag nicht darin hatte/habe funktioniert es bei mir, vielleicht gehts dann auch bei dir.

    Mit was für einer T3 bzw. RTE Version arbeitest du denn?

    Viele Grüße
    ms_k

    PS: Einfach manche Frage überhören und den Redakteur mit neuen Spielsachen glücklich machen, hehe *g* weisst schon die Ablenktaktik

  • Danii Danii
    Sternenflotten-Admiral
    0 x
    201 Beiträge
    0 Hilfreiche Beiträge
    02. 08. 2006, 09:32

    Guten Morgen ms_k,

    großes Danke für den Tipp - funktioniert wenn ich das in proc.allowTags = ...
    und entryHTMLparser_db.noAttrib = ... eingebe. Super

    T3-Intallation ist 3.8.0 und htmlArea 1.1.3

    Ich bin ja gespannt welche kleinen Stolperfallen sich da noch auftun, wär ja langweilig wenn alles auf Anhieb klappen würde ;-)).