TYPO3 – Rich Text Editor ( RTE ) Konfiguration

TYPO3 LogoDa ich viel mit Typo3 arbeite, habe ich mir gedacht, zeig ich euch einmal meine Rich Text Editor ( RTE ) Einstellungen:

[ad#posting]

Fangen wir mit der „Setup“ an:

plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE>

###Content table class disable###
lib.parseFunc_RTE.externalBlocks.table.stdWrap.
HTMLparser.tags.table.fixAttrib.class>

###p in table disable###
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default >
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.
stdWrap.parseFunc =< lib.parseFunc

TS-Config“ Eingaben:

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

}

#Trage hier ein wo das Bild vor dem Link Entfernt bzw. nicht angezeigt werden soll

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 {

# RTE BG-color
mainStyle_bgcolor = #ffffff
mainStyleOverride_add.BODY = { background-color:#ffffff; background-image:none; }

# Zuweisung der CSS-Datei
contentCSS = /fileadmin/templates/namevondercssdatei.css
useCSS = 1

# Dafür sorgen, dass die Style-Angaben der RTE.default.contentCSS oberste Priorität haben
ignoreMainStyleOverride = 0

# Markup options
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags =
removeTagsAndContents =

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

# Tabellen Optionen in der RTE Toolbar
hideTableOperationsInToolbar = 0
keepToggleBordersInToolbar = 1

# Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)
disableSpacingFieldsetInTableOperations = 0
disableAlignmentFieldsetInTableOperations=0
disableColorFieldsetInTableOperations=0
disableLayoutFieldsetInTableOperations=0
disableBordersFieldsetInTableOperations=0

# Do not allow insertion of the following tags
hideTags =

# Buttons die gezeigt/versteckt werden im RTE
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, chMode, inserttag
hideButtons = fontstyle, formatblock, 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; }
)

# Tags die erlaubt werden bzw. verboten werden ( allow / deny )
proc.entryHTMLparser_db.allowTags < RTE.default.proc.allowTags

proc {
# tags die erlaubt 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

# tags die verboten sind
denyTags = font

# br wird nicht zu p konvertiert
dontConvBRtoParagraph = 1

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

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

# Trage hier ein welche tags in zb. span erlaubt sind ( müssen übereinstimmen mit deiner .css )
allowedClasses (
external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
align-left, align-center, align-right, text_red, text_grun
)

# 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 = font

# htmlSpecialChars = 1

## align attribute werden erlaubt

tags {
p.fixAttrib.align.unset >
p.allowedAttribs = class,style,align
div.fixAttrib.align.unset >
hr.allowedAttribs = class
span.fixAttrib.style.unset>

## b und i tags werden ersetzt (em / strong)
b.remap = strong
i.remap = em

## img tags werden erlaubt
img>

## span tags werden erlaubt
span >
}
}

}

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

# Classes: Eigene Stile
classesCharacter = text_red
allowedClasses (text_red)

# Classes: Eigene Stile
classesCharacter = text_grun
allowedClasses (text_grun)

classesImage= rte_image

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

}

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

Bei fragen oder Problemen könnt Ihr gerne die Kommentarfunktion benutzen!

Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel weitergeholfen oder gefallen? Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!Ich bin freiberuflicher TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web etwas mehr als 12 Jahre. Mehr Infos zu der TYPO3 Internetagentur - INGENIUMDESIGN.

Leave a Reply

11 Kommentare

  1. Pingback: GB Bilder » typo3 – Rich Text Editor ( RTE ) Konfiguration

  2. A.Kurz

    Hi,
    habe eine Website zu reparieren. Der Kunde kann keinen fetten Text ausgeben obwohl er im RTE fett angezeigt wird und „bold“ aktiviert ist.
    Bitte um Hilfe! Bitte per E-Mail antworten!

  3. Fullsize

    Hi,

    hab das TS so komplett eingefügt und komme super zurecht. Erstmal Danke dafür.

    Hab jedoch nun das Problem, dass meine Bilder mit Links automatisch nen Rand haben.

    Habe leider nicht die Stelle gefunden, wo das wieder deaktivieren geht.

  4. hobby-prog

    Hallo zusammen,
    ich möchte gerne dass die Redakteure den Tabellen, Zellen und Spalten eine Breite, ein Spacing etc. angeben können. Wie mache ich das?

    Gruß Hobby-Prog

  5. Riccen

    Kann die gerne mal die gesamten TS, CSS Daten und Einträge welche ich vorgenommen habe zukommen lassen. Wenn dir das vieleicht weiterhilft. Danke

  6. Riccen

    Ja, habe im Code ( welchen ich unter RTE ) einblenden kann den Tabellen sep. eine Classe zugewiesen. Leider ohne Erfolg

  7. admin

    Hast du mal probiert, nur deinem table eine class zugeben?

  8. Riccen

    Hat alles super geklappt nur kann wenn ich die Tabellen formatieren möchte ( mit Grau oder Gelb als Hintergrund ) dann übernimmt er das im FE nicht.
    Wo ist da der Fehler

  9. admin

    das sollte funktionieren, sobald du deinen text mit einen absatz umgibst ( p )
    drück einfach am ende „enter“

  10. Hallo und Danke für Deinen Code!

    Ich habe das jetzt bei mir (Typo3 4.2.6) mal ausprobiert. Funktioniert auch alles recht gut. Aber: Jetzt ist die Dropdownlist der text-styles ausgegraut. Wo wird das unterdrückt bzw. wo kann man das wieder aktivieren?

Next Articleblindtextgenerator.de - Text Generator / lorem ipsum