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


  • pixelrolf pixelrolf
    R2-D2
    0 x
    64 Beiträge
    1 Hilfreiche Beiträge
    21. 04. 2006, 14:32

    hallo,

    und danke erstmal Karin für die Mühe :)

    Das Einbinden einer externen CSS Datei klappt leider noch nicht. Daher versuche ich mal systematisch vorzugehen. Im Seiten TSconfig steht zunächst noch gar nichts.

    Die Datei fileadmin/projekt1/css/rte_css.css soll eingebunden werden.

    [TS]RTE.default {
    contentCSS = fileadmin/projekt1/css/rte_css.css
    }
    [/TS]

    Es werden aber weder die Formatierungen aus der CSS-Datei übernommen, noch kann ich im Quellcode erkennen, dass die Datei eingebunden wird. Ist der Pfad viell. nicht richtig? Hab schon zig Varianten durchprobiert.

    Die Methode über mainStyleOverride_add.H1 = ... usw. funktioniert zwar, finde ich aber nicht so praktisch.

    Welche Einträge benötigt man noch zusätzlich um zunächst mal nur die CSS-Datei zu 'finden'. Müssen noch explizit Tags zugelassen werden?

    danke schon mal,
    lg rolf
    :)

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    21. 04. 2006, 16:03

    Hallo, Rolf,

    Die Lösung Deines Problems ist wahrscheinlich, dass Du in Deine "Haupt"-CSS-Datei ganz oben folgende Zeile einfügen musst:

    1. @import url("rte_css.css");

    Je nachdem, wo Du Deine Haupt-CSS-Datei liegen hast, musst Du evtl. noch den Pfad ergänzen (fileadmin/projekt1/css/rte_css.css). wahrscheinlich liegt Deine rte_css aber im selben Verzeichnis und Du kannst mein Bsp. direkt verwenden.

    Warum?

    RTE.default {
    contentCSS = fileadmin/projekt1/css/rte_css.css
    }

    Bringt nur dem RTE die CSS-Formate bei, damit dieser die Formate verwenden kann.
    Dein Front-End weiss nichts von der CSS-Datei. Bzw. hasst Du diese mit TypoScript nicht eingebunden.

    Daher ist es die einfachste Möglichkeit die rte_css.css über Dein Haupt-Template zu importieren.

    Ich hoffe das hilft...

    Achim

    [/quote]

  • 0 x
    102 Beiträge
    0 Hilfreiche Beiträge
    21. 04. 2006, 16:56

    Ich hab es also auch noch geschaft den TS text ans rechte Ort zu schreiben. Habe nun aber noch ein Weiteres problem. Wenn ich den RTE fürs FE editiert habe und dan dem BE-Benutzer weitere rechte zuschreiben will akzeptiert er mir diese nicht. Hat da jemand eine Idee was da faul sein könnte?

    Hab im TS auch options.RTEkeyList = stehen wie im Post von Sandra auf seite 2 steht...

    BE und FE Cash geleert ab und an gemeldet funkt nicht...

    Danke für eure Tips. #paralyzed#

  • pixelrolf pixelrolf
    R2-D2
    0 x
    64 Beiträge
    1 Hilfreiche Beiträge
    21. 04. 2006, 19:27

    Hallo typo_3_newbie,
    danke, aber ich fürchte hier handelt es sich um ein Missverständnis. :)
    Die CSS-Datei ist schon für die Einstellungen im Backend gedacht.
    So wie ich das verstehe kann man mit RTE.default.contentCSS eine externe Stylesheetdatei einbinden, klappt aber leider nicht.

    lg
    rolf

  • toyde toyde
    Jedi-General
    0 x
    1971 Beiträge
    0 Hilfreiche Beiträge
    21. 04. 2006, 19:49

    [quote="pixelrolf"]So wie ich das verstehe kann man mit RTE.default.contentCSS eine externe Stylesheetdatei einbinden, klappt aber leider nicht.[/quote]
    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].
    [TS]content.stylesheet.file = fileadmin/style.css[/TS]
    Verstehe nicht wieviele Styles Du neben diesen beiden Optionen noch benötigst.

  • pixelrolf pixelrolf
    R2-D2
    0 x
    64 Beiträge
    1 Hilfreiche Beiträge
    21. 04. 2006, 20:13

    [quote="toyde"]
    Oben ist das CSS für den RTE definiert, das siehst Du richtig.
    [/quote]

    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 wurgli
    Jedi-Meister
    0 x
    396 Beiträge
    0 Hilfreiche Beiträge
    26. 04. 2006, 11:49

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

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    26. 04. 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:

    1. <body onmousemove="GL_getMouse(event);" onload="initLayer();" id="typo3-alt-doc-php">
    2.  
    3. <!-- Wrapping DIV-section for whole page BEGIN -->
    4. <div class="typo3-mediumDoc">
    5. <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);">
    6. <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 chris_m
    T3PO
    0 x
    31 Beiträge
    0 Hilfreiche Beiträge
    27. 04. 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