Konfiguration für htmlarea RTE (TYPO3 4.4.x)

16. September 2010, Felix Nagel in TYPO3

Rich Text Editoren gehören zu den wichtigsten Werkzeugen eines Content Management System -- leider auch zu den am schwierigsten zu konfigurierenden. TYPO3 macht da keine Ausnahme.

 

Aufgrund dieses Bugs im TYPO3 Bugtracker, den wir bei verschiedenen Installationen ebenfalls beobachten konnten, habe ich unsere RTE Konfiguration nochmal überprüft, die Kommentare verbessert und biete sie hier zum Download an. Sie wurde für den htmlarea RTE, der mit TYPO 4.4.2 mitgeliefert wird, konzipiert.

 

Das Typoscript gehört in die Page TS um seine Wirkung zu entfalten. Bitte beachtet das dies nur die Konfiguration des RTE selbst ist, nicht die RTE processing rules die ihr in folgendem Ordner finden könnt:

typo3\sysext\rtehtmlarea\res\proc\pageTSConfig.txt

 

 

Updates:

 

20.10.2010 - fehlendes Komma

09.11.2010 - Code mode Button anstatt insert Tag

29.07.2011 - Bilder im RTE

12.11.2011 - Neue Konfiguration inkl. passenden process rules

												# This is a modified version by Felix Nagel - FelixNagel.com
												# original file could be found under: \typo3\sysext\rtehtmlarea\res\typical\pageTSConfig.txt
												# based upon htmlare delivered with TYPO3 4.4.4, updated to work with 4.5.4
												# last update: 29.07.2011
												# ***************************************************************************************
												# "Typical" Page TSconfig for htmlArea RTE and Classic RTE
												#
												# Sets Page TSConfig with most commonly used features representing a good start for typical sites.
												#
												# @author  Stanislas Rolland <stanislas.rolland(arobas)fructifor.ca>
												#
												# TYPO3 SVN ID: $Id: pageTSConfig.txt 5131 2009-03-06 17:53:40Z stan $
												# ***************************************************************************************
												# Define labels and styles to be applied to class selectors in the interface of the RTE
												# The examples included here make partial re-use of color scheme and frame scheme from CSS Styled Content extension
												RTE.classes >
												RTE.classes.ui-state-highlight {
												name = Hinweis
												}
												RTE.classes.ui-state-error {
												name = Warnung
												}
												RTE.classes.small {
												name = Kleine Schrift
												}
												RTE.classes.ui-helper-hidden-accessible {
												name = Barrierefrei verstecken
												}
												# Anchor classes configuration for use by the anchor accesibility feature (htmlArea RTE only)
												# removed anchor images via image >
												RTE.classesAnchor {
												externalLink {
												class = external-link
												type = url
												titleText = LLL:EXT:rtehtmlarea/res/accessibilityicons/locallang.xml:external_link_titleText
												image >
												}
												externalLinkInNewWindow {
												class = external-link-new-window
												type = url
												titleText = LLL:EXT:rtehtmlarea/res/accessibilityicons/locallang.xml:external_link_new_window_titleText
												image >
												}
												internalLink {
												class = internal-link
												type = page
												titleText = LLL:EXT:rtehtmlarea/res/accessibilityicons/locallang.xml:internal_link_titleText
												image >
												}
												internalLinkInNewWindow {
												class = internal-link-new-window
												type = page
												titleText = LLL:EXT:rtehtmlarea/res/accessibilityicons/locallang.xml:internal_link_new_window_titleText
												image >
												}
												download {
												class = download
												type = file
												titleText = LLL:EXT:rtehtmlarea/res/accessibilityicons/locallang.xml:download_titleText
												image >
												}
												mail {
												class = mail
												type = mail
												titleText = LLL:EXT:rtehtmlarea/res/accessibilityicons/locallang.xml:mail_titleText
												image >
												}
												}
												# Default RTE configuration
												RTE.default {
												# START added configs (not included in stdandard file)
												# add CSS file for rte
												contentCSS = fileadmin/templates/v3.0/css/rte.css
												# disable right click
												disableRightClick = 1
												# acronym sys folder (id, not needed for admins as webmounts is used)
												buttons.acronym.pages = 306
												buttons.lockBEUserToDBmounts = 1
												# image in RTE relevant
												# please note you need to enable images in the EM and add width and height to RTE.default.proc.entryHTMLparser_db.tags.img.allowedAttribs
												# media_ prefix when using DAM, see http://bugs.typo3.org/bug_view_advanced_page.php?bug_id=13902
												buttons.image.options.removeItems = magic, dragdrop, media_magic, media_dragdrop
												buttons.image.options.plain.maxWidth = 980
												buttons.image.options.plain.maxHeight = 1000
												buttons.image.properties.removeItems = align, border, float, paddingTop, paddingRight, paddingBottom, paddingLeft
												# END added configs
												# Markup options (htmlArea RTE only)
												enableWordClean = 1
												removeTrailingBR = 1
												removeComments = 1
												removeTags = center, font, o:p, sdfield, u
												removeTagsAndContents = link, meta, script, style, title
												# Toolbar options
												# The TCA configuration may add buttons to the toolbar
												# The following buttons are specific to Classic RTE: class
												# The following buttons are specific to htmlArea RTE: blockstylelabel, blockstyle, textstylelabel, textstyle,
												#    insertcharacter, findreplace, removeformat, toggleborders, tableproperties,
												#    rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit,
												#    columninsertbefore, columninsertafter, columndelete, columnsplit,
												#    cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
												# Original showButtons
												# showButtons (
												# class, blockstylelabel, blockstyle, textstylelabel, textstyle,
												# formatblock, bold, italic, subscript, superscript,
												# orderedlist, unorderedlist, outdent, indent, textindicator,
												# insertcharacter, link, table, findreplace, chMode, removeformat, undo, redo, about,
												# toggleborders, tableproperties,
												# rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit,
												# columninsertbefore, columninsertafter, columndelete, columnsplit,
												# cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge,
												# hMode, underline, strikethrough, superscript, lefttoright, righttoleft, left, center, right, justifyfull, inserttag,  removeformat, copy, cut, paste
												# )
												# modified showButtons array (should be sufficient in most use cases)
												# row 1: text styles and tools
												# row 2: standard buttons
												# row 3: table operations
												showButtons (
												blockstyle, formatblock, bar, copy, cut, paste, findreplace, bar, undo, redo, bar, linebreak,
												link, image, bar, bold, italic, underline, strikethrough, bar, subscript, superscript, bar, orderedlist, unorderedlist, acronym, insertcharacter, bar, removeformat, chMode
												)
												hideButtons (
												class, blockstylelabel, textstylelabel, textstyle, about
												outdent, indent, textindicator, hMode, lefttoright, righttoleft, left, center, right, justifyfull, inserttag
												table,toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
												)
												# need to use one line! Just copy showButtons into one line!
												toolbarOrder = blockstyle, formatblock, copy, cut, paste, findreplace, bar, undo, redo, bar, linebreak, link, image, bar, bold, italic, underline, strikethrough, bar, subscript, superscript, bar, orderedlist, unorderedlist, acronym, insertcharacter, bar, removeformat, chMode
												# More toolbar options (htmlArea RTE only)
												keepButtonGroupTogether = 0
												# Enable status bar (htmlArea RTE only)
												showStatusBar =  1
												# Hide infrequently used paragraph types in the paragraph type selector (formatblock button)
												hidePStyleItems = h5,h6,pre,address,div
												# Add default example styles
												# Left, center, right and justify alignment of text in block elements
												# inlineStyle.text-alignment (
												# p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, div.align-left, address.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, div.align-center, address.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, div.align-right, address.align-right { text-align: right; }
												# p.align-justify, h1.align-justify, h2.align-justify, h3.align-justify, h4.align-justify, h5.align-justify, h6.align-justify, div.align-justify, address.align-justify { text-align: justify; }
												# )
												# Two frame examples taken from the example CSS file of CSS Styled Content extension and applied to p and table block elements.
												# inlineStyle.frames (
												# p.csc-frame-frame1, table.csc-frame-frame1 { background-color: #EDEBF1; padding: 2px 4px 2px 4px; border: 1px solid #333333; }
												# p.csc-frame-frame2, table.csc-frame-frame2 { background-color: #F5FFAA; padding: 2px 4px 2px 4px; border: 1px solid #333333; }
												# )
												# Bullet styles for unordered lists.
												# inlineStyle.ul (
												# ul.component-items { color: #186900; list-style-type: circle; }
												# ul.action-items { color: #8A0020; list-style-image: url(img/red_arrow_bullet.gif); }
												# )
												# Numbering styles for ordered lists.
												# inlineStyle.ol (
												# ol.component-items-ordered { color: #10007B; list-style-type: lower-roman; }
												# ol.action-items-ordered { color: #8A0020; list-style-type: lower-greek; }
												# )
												# Three inline text colors taken from the color scheme of CSS Styled Content extension.
												# inlineStyle.inline-text (
												# span.important { color: #8A0020; }
												# span.name-of-person { color: #10007B; }
												# span.detail { color: #186900; }
												# )
												# Default selectors for the default configuration of the link accessibity feature.
												# inlineStyle.accessibility (
												# a.external-link {}
												# a.external-link-new-window {}
												# a.internal-link {}
												# a.internal-link-new-window {}
												# a.download {}
												# a.mail {}
												# )
												# Default selector for indentation.
												# inlineStyle.indentation (
												# div.indent { margin-left: 2em; }
												# )
												# Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only).
												# When RTE.default.contentCSS is not specified, file EXT:rtehtmlarea/res/contentcsss/default.css is used.
												ignoreMainStyleOverride = 1
												# List all class selectors that are allowed on the way to the database
												proc.allowedClasses (
												ui-state-highlight,
												ui-state-error,
												ui-helper-hidden-accessible,
												small,
												linkbutton,
												linkbutton-block
												)
												# classesParagraph, classesTable, classesTD, classesLinks, classesCharacter
												# Classic RTE: Specify the list of class selectors that should be presented in the RTE interface:
												# htmlArea RTE: Restrict the list of class selectors presented by the RTE to the following:
												# classesParagraph (
												# align-left, align-center, align-right,
												# csc-frame-frame1, csc-frame-frame2
												# )
												# classesTable = csc-frame-frame1, csc-frame-frame2
												# classesTD = align-left, align-center, align-right
												# classesLinks = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail
												# classesCharacter = important, name-of-person, detail
												# Configuration of the anchor accessibility feature (htmlArea RTE only)
												# These classes should also be in the list of allowedClasses.
												classesAnchor = linkbutton, linkbutton-block
												classesAnchor.default {
												page =
												url =
												file =
												mail =
												}
												# Configuration specific to the TableOperations feature (htmlArea RTE only)
												# Remove the following fieldsets from the table operations dialogs
												disableAlignmentFieldsetInTableOperations = 1
												disableSpacingFieldsetInTableOperations = 1
												disableColorFieldsetInTableOperations = 1
												disableLayoutFieldsetInTableOperations = 1
												disableBordersFieldsetInTableOperations = 1
												# Show borders on table creation
												buttons.toggleborders.setOnTableCreation = 1
												# Configuration specific to the bold and italic buttons (htmlArea RTE only)
												# Add hotkeys associated with bold and italic buttons
												buttons.bold.hotKey = b
												buttons.italic.hotKey = i
												}
												# front end RTE configuration for the general public (htmlArea RTE only)
												RTE.default.FE < RTE.default
												RTE.default.FE.showStatusBar = 0
												RTE.default.FE.hideButtons = chMode, blockstyle, textstyle, underline, strikethrough, subscript, superscript, lefttoright, righttoleft, left, center, right, justifyfull, table, inserttag, findreplace, removeformat, copy, cut, paste
												RTE.default.FE.FE >
												RTE.default.FE.userElements >
												RTE.default.FE.userLinks >
												
TYPO3 4.4.4 htmlarea TSconfig

Die Kommentarfunktion ist für diesen Artikel deaktiviert.

5 Kommentare

Felix Nagel

20. Oktober 2010

Danke!

@mtness

Freut mich das dir der post weitergeholfen hat. Ich wusste doch das noch mehr Leute anm RTE verzweifeln :-)

Und vielen Dank für den Hinweis. Ich hab das mal ergänzt.

 

@ginka

Sorry, ich konnte immer noch keine Zeit finden mir das ganze mal auf einer Test Installtion mit Mehrsprachigkeit anzusehen.

 

Kammst du da weiter? Funktionieren andere Language Paramater Aktionen, also andere locallang.xml Anweisungen?

Wenn es hart auf hart kommt überschreib den title doch per globalvar condition. So müsste es auf jeden Fall gehen.


mtness

20. Oktober 2010

bugfix

Hi - zunächst vielen vielen Dank dafür, dass Du hier eine gescheite RTE-config verfügbar machst! Dieses Thema macht mich schon seit Jahren kirre.

Gerade Bin ich hier nämlich auch dabei, die Konfiguration ein für alle Mal rund zu machen...


Dabei ist mir ein kleiner Fehler aufgefallen, der Button für unordered lists wird nämlich nicht angezeigt, in Zeile 123 fehlt ein Komma am Schluß.


So, jetzt muss ich mal weiter die blockstyles unter meine Kontrolle bringen.


HTH! Viele Grüße, mtness.


ginka

30. September 2010

Statisch funktioniert.

Hallo Felix,


danke für deine Antwort! Ja, statisch funktioniert es. Hier ein Ausschnitt meiner TSconfig Definition:


RTE.classesAnchor {

internalLink {

class = internal-link

type = page

titleText = Interner Link

image >

}

}


Allerdings denke ich bei fremdsprachigen Seiten nicht immer dran, das title-Attribut manuell in der entsprechenden Sprache zu setzen. Deswegen wäre es toll, wenn ich das in der locallang.xml einmal definieren könnte und mich dann nicht mehr drum kümmern müsste.


Danke & viele Grüße

ginka


Felix Nagel

29. September 2010

Statisch möglich?

Hey ginka,

funktioniert es denn wenn du einen title statisch angibst?

Also bei meinem obigen Beispiel sowas in die Richtung:

 

<code>
RTE.classesAnchor {
    linkbutton {
        class = linkbutton
        type = url
        titleText = TEst 123
        image &gt;
    }
}
</code>


ginka

25. September 2010

Ich interessiere mich dafür, das title-Attribut von Links in Abhängigkeit der im Frontend ausgewählten Sprache zu setzen (L=0, L=1 etc., Sprachumschaltung als solches funktioniert).


Ich habe den oben unter RTE.classesAnchor genannten Teil in das TSconfig-Feld meiner Rootpage kopiert und auch die Datei rtehtmlarea/res/accessibilityicons/locallang.xml erweitert, jedoch vergeblich. Der RTE vergibt keinerlei title-Attribute beim Setzen von Links.


Habe ich was übersehen?


Danke & viele Grüße

ginka