---
title: "Typo3 4.0.1 + htmlArea 1.3.7: Bilder mit <div>-Tags umschliessen"
url: "https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen"
source: "typo3.net"
tags: ["Backend","RTE & CKEditor","Frage"]
created: "2006-09-11"
last_reply: "2007-12-05"
replies: 8
solved: false
page: 1
pages: 1
lang: "de"
---

# Typo3 4.0.1 + htmlArea 1.3.7: Bilder mit <div>-Tags umschliessen

Backend › RTE & CKEditor · 8 Antworten · gestartet 2006-09-11

## Eröffnungsbeitrag

**dieselboy71** · 2006-09-11 · [Beitrag #1](https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen/1)

Hallo,

Bilder, die ich im RTE anlege, sollen immer mit einem <div>-Tag umschlossen werden. Das Ergebnis sollte in etwa so aussehen:

```html
<div class="image"><img src=" ..." alt="" /></div>
```

Im Forum habe ich nix passendes gefunden. Meine Versuche wie z.B.

```typoscript
RTE.default.tags.img.wrap = <div class="images">|</div>
```

haben auch nicht viel gebracht. Kann mir da jemand weiterhelfen?

Danke.

Daniel

## Antworten

### [#2](https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen/2) · T0m · 2006-09-11

Hallo

hast du die class "images" als allowed class hinzugefuegt ?
vielleicht liegts daran

Gruessle T0m

### [#3](https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen/3) · silverzone · 2006-11-13

geht bei mir auch nicht.. hast du es gelöst?

meine config sieht so aus:

```typoscript
#----------------------------------------------------------------------

# RTE-KONFIGURATION
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 Konfiguration
RTE.default {
        # Zuweisung der CSS-Datei
        contentCSS = fileadmin/template/rte_formate.css
       
        ## Markup options
        enableWordClean = 1
        removeTrailingBR = 1
        removeComments = 1
        removeTags = center, sdfield
        removeTagsAndContents = style,script

        # Buttons die gezeigt/versteckt werden
        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, fontstyle, formatblock, strikethrough,lefttoright, righttoleft, textindicator, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym
       #  hideButtons = fontstyle, formatblock, strikethrough,lefttoright, righttoleft, textindicator, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym,

        # Hält die RTE Icons gegroupt zusammen
        keepButtonGroupTogether = 1

        # blendet Statusbar in htmlarea aus
        showStatusBar =  1

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

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

                # 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, bilder,
                        align-left, align-center, align-right, author
                )       

                # html parser einstellungen
           
          HTMLparser_rte {

                   denyTags = font   
                        # tags die erlaubt/verboten sind
                        allowTags < RTE.default.proc.allowTags
                        #denyTags < RTE.default.proc.denyTags

                        # tags die untersagt sind
                        removeTags = font, span

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

                        # htmlSpecialChars = 1
       
                        ## align attribute werden erlaubt
                        tags {
                                p.fixAttrib.align.unset >
                                p.allowedAttribs = class,style,align
                                td.allowedAtribs = class, style, align
                                table.allowedAtribs = class, style, align
                                div.fixAttrib.align.unset >

                                hr.allowedAttribs = class

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

                                ## img tags werden erlaubt
                                img >
                        }
                }
         tags.img.wrap = <div class="bilder">|</div>

        }

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

        # Classes: Eigene Stile
        classesCharacter = author
        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
        }

        # zeigt alle CSS-Klassen die in formate.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%

#-----------------------------------------------------------------------------------
# Header anpassen
TCEFORM.tt_content.header_layout.altLabels.4 = Links
TCEFORM.tt_content.header_layout.altLabels.5 = Mitte
TCEFORM.tt_content.header_layout.removeItems = 1,2,3
```

### [#4](https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen/4) · udowald · 2007-10-03

Hallo,
das Problem von silverzone habe ich auch, weshalb ich diesen Thread nochmal aufgreife. Bilder lassen sich im RTE nicht mir div umschließen.  :o

Habt ihr eine Lösung?

udowald

### [#5](https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen/5) · udowald · 2007-10-04

Hi,

hier die Lösung für RTE normal! div, span, img sollen erhalten bleiben.

```typoscript
RTE.default {
  proc.entryHTMLparser_db.tags.span.fixAttrib.style.unset > 
  proc.entryHTMLparser_db.tags.div.fixAttrib.style.unset >
  proc.entryHTMLparser_db.tags.img.fixAttrib.style.unset >
  proc.overruleMode >
}
```

hier für Nutzer der Extensions: fdfx_2cols und fdfx_3cols.
Das zweite Textfeld wird nicht gleich dem ersten und dritten geparsed.
Diese Zeilen müssen zusätzlich eingefügt werden.

```typoscript
RTE.config.tt_content.bodytext {
 proc.entryHTMLparser_db.tags.span.fixAttrib.style.unset >
 proc.entryHTMLparser_db.tags.div.fixAttrib.style.unset >
 proc.entryHTMLparser_db.tags.img.fixAttrib.style.unset >
 proc.overruleMode >
}
```

So sollten div und span und img in allen 3 Texteingabefeldern beim speichern erhalten bleiben.

udowald

### [#6](https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen/6) · imu · 2007-10-04

hm... und wie werden die divs eingefügt?

Hier mal meine Lösung (kommt ins TSconfig):

```typoscript
RTE.default.userElements {

    # Category with various elements

  10 = Bilder Ausrichten
  10 {

      # An image is inserted


      # The selection is wrapped with <p class> tags.

    2 = Bild Links
    2.description = Das Bild links ausrichten.
    2.mode = wrap
    2.content = <p class="align-left">|</p>

    3 = Bild Mitte
    3.description = Das Bild zentrieren.
    3.mode = wrap
    3.content = <p class="align-center">|</p>

    4 = Bild Rechts
    4.description = Das Bild rechts ausrichten.
    4.mode = wrap
    4.content = <p class="align-right">|</p>

  }

  

}
```

Damit wird ein user-Button (benuterdefinierter Button) für den RTE erzeugt.
Klickt man drauf, geht ein kleiner Wizard auf, in dem drei Links angezeigt werden. Also: Bild markieren, dann Wizard aufrufen, gewünschte Ausrichtung anklicken, in den Quellcode wird - in diesem Falle das p-tag - hinzugefügt.
geht genauso mit anderen Tags ...

"user" muß unter der auflistung showButtons mit aufgeführt sein, damit dieser
zusätzliche Button auch angezeigt wird.

Ach ja, die Definition funktioniert bei mir nur, wenn ich sie an den Anfang stelle des TSconfig stelle, habe aber nicht weiter getestet, woran das liegt...

### [#7](https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen/7) · udowald · 2007-10-05

Hallo,

@imu:

Eine Absatzklasse für Bilder würde ich nicht über ein Userelement anlegen, sondern das allg. Absatzformat verwenden, das du für alle <p>-formate im Absatzdropdownmenü vom RTE auswählst. Das <p> um dein Bild bekommst mit Return wenn der crusor direkt hinter dem Bild steht. Das userelement ist eher für Sachen gedacht die im Standard nicht gehen wie z.B. Bild oder Contentboxen oder spezielle <span> zuweisungen oder scripts. Aber vieleicht brauchst du eine extra class für deine Bilder.

udowald

### [#8](https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen/8) · imu · 2007-10-05

...also ich hatte das probiert. Nur wurden die normalen Absatzformate (p align-left, p align-center usw.) ausgeblendet, sobald ich ein Bild im RTE markiert hatte, um es zu formatieren ... Und nur ein p Tag ums Bild - ohne Klasse, war mir zuwenig - eben wegen Ausrichtung oder verschiedener Gestaltung der Bilder ...

### [#9](https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen/9) · udowald · 2007-12-05

Hallo nochmal,

ich hatte geschrieben:

*Eine Absatzklasse für Bilder würde ich nicht über ein Userelement anlegen, sondern das allg. Absatzformat verwenden, das du für alle <p>-formate im Absatzdropdownmenü vom RTE auswählst.....*

Das ist natürlich ein Schmarn!! Ich verwende jetzt auch den Vorschlag von Imu wenn ich ein Absatzformat <p>|</p> um das Bild haben möchte. Bilder über die Standard Absatzformate zu positionieren funktioniert nicht vernünftig.

Sorry@imu

Die ursprüngliche Frage war aber wie man ein <div>|</div> um das Bild bekommt.
Dies funktioniert meines Wissens eben nur durch die schon beschriebene RTE Konfiguration. Dann funktionieren die Userelements auch mit <div class="test">|</div>, genau so wie Imu es mit den <p> beschrieben hat.

Grüße udowald

---

Quelle: „Typo3 4.0.1 + htmlArea 1.3.7: Bilder mit <div>-Tags umschliessen“, typo3.net, https://www.typo3.net/d/49697-typo3-401-htmlarea-137-bilder-mit-div-tags-umschliessen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.