---
title: "HTMLArea Eigenes benutzerdefiniertes Element"
url: "https://www.typo3.net/d/41857-htmlarea-eigenes-benutzerdefiniertes-element"
source: "typo3.net"
tags: ["Backend","RTE & CKEditor","Frage"]
created: "2006-04-23"
last_reply: "2006-05-12"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# HTMLArea Eigenes benutzerdefiniertes Element

Backend › RTE & CKEditor · 2 Antworten · gestartet 2006-04-23

## Eröffnungsbeitrag

**T0m** · 2006-04-23 · [Beitrag #1](https://www.typo3.net/d/41857-htmlarea-eigenes-benutzerdefiniertes-element/1)

Hallo

ich will im htmlarea 1.2.0 (mit Typo3 3.8.1) ein benutzerdefniniertes Element einfuegen.
Ich bin schon soweit gekommen, dass er mir das Element im RTE einfuegt, aber wenn ich auf speichern geh, modelt er mir den ganzen Sourcecode um.

[Bild: future-lounge.de/Diagramm1.png](http://www.future-lounge.de/Diagramm1.png)

oben das Resultat welches mir htmlarea liefert.
unten das Resultat welches mir ein HTML Element mit dem Code aus dem benutzerdefinierten Element liefert.

Wenn ich den rte erneut oeffne sieht der Source nochmals anders aus als der, der im Output erscheint.

Vielleicht weiss jemand Rat.
gruss T0m

OUTPUT TYPO3:

```html
<!--  CONTENT ELEMENT, uid:116/text [begin] -->

		<div id="content-element ">
		<!--  Text: [begin] -->
			<p class="bodytext"><span class="vdiagramm1">
</p></br>
<h3>Titel Spalte 1</h3><ul><li>Punkt 1</li><li>Punkt 2</li></ul><p class="bodytext"></span> <span class="vdiagramm2">
</p></br>
<h3>Titel Spalte 2</h3><ul><li>Punkt 1</li><li>Punkt 2</li><li>Punkt 3</li><li>Punkt 4</li></ul><p class="bodytext"></span> <span class="vdiagramm3">

</p></br>
<h3>Titel Spalte 3</h3><ul><li>Punkt 1</li><li>Punkt 2</li></ul><p class="bodytext"></span> <span class="vdiagramm4">
</p></br>
<h3>Titel Spalte 4</h3><ul><li>Punkt 1</li><li>Punkt 2</li><li>Punkt 3</li></ul><p class="bodytext"></span> <span class="vdiagramm5">
</p></br>
<h3>Titel Spalte 5</h3><ul><li>Punkt 1</li><li>Punkt 2</li></ul><p class="bodytext"></span>d</p></br>

		<!--  Text: [end] -->
			</div>
	<!--  CONTENT ELEMENT, uid:116/text [end] -->
		
	<!--  CONTENT ELEMENT, uid:117/html [begin] -->
		<div id="content-element ">
		<!--  Raw HTML content: [begin] -->
			<span class="vdiagramm1"><h3>Titel Spalte 1</h3><ul><li>Punkt 1</li><li>Punkt 2</li></ul></span> 

<span class="vdiagramm2"><h3>Titel Spalte 2</h3><ul><li>Punkt 1</li><li>Punkt 2</li><li>Punkt 3</li><li>Punkt 4</li></ul></span> 
<span class="vdiagramm3"><h3>Titel Spalte 3</h3><ul><li>Punkt 1</li><li>Punkt 2</li></ul></span> 
<span class="vdiagramm4"><h3>Titel Spalte 4</h3><ul><li>Punkt 1</li><li>Punkt 2</li><li>Punkt 3</li></ul></span> 
<span class="vdiagramm5"><h3>Titel Spalte 5</h3><ul><li>Punkt 1</li><li>Punkt 2</li></ul></span>

		<!--  Raw HTML content: [end] -->
			</div>
	<!--  CONTENT ELEMENT, uid:117/html [end] -->
```

Source in htmlarea nach speichern:

```html
<p><span class="vdiagramm1"></span></p>
<h3>Titel Spalte 1</h3>
<ul><li>Punkt 1</li><li>Punkt 2</li></ul>
<p> <span class="vdiagramm2"></span></p>
<h3>Titel Spalte 2</h3>
<ul><li>Punkt 1</li><li>Punkt 2</li><li>Punkt 3</li><li>Punkt 4</li></ul>
<p> <span class="vdiagramm3"></span></p>
<h3>Titel Spalte 3</h3>
<ul><li>Punkt 1</li><li>Punkt 2</li></ul>
<p> <span class="vdiagramm4"></span></p>
<h3>Titel Spalte 4</h3>
<ul><li>Punkt 1</li><li>Punkt 2</li><li>Punkt 3</li></ul>
<p> <span class="vdiagramm5"></span></p>
<h3>Titel Spalte 5</h3>
<ul><li>Punkt 1</li><li>Punkt 2</li></ul>
<p>s</p>
```

mein RTE Config

```typoscript
#*** 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;
        }
}

#
# *** Entfernt das Bild vor den Links
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 {

        # Zuweisung der CSS-Datei
        contentCSS = fileadmin/template/rte/rte_style.css
       
        ## Markup options
        enableWordClean = 1
        removeTrailingBR = 1
        removeComments = 1
        removeTags = center, sdfield, tbody
        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, user, fontsize, justifyfull, formatblock, textindicator, chMode
        hideButtons = fontstyle, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, emoticon, spellcheck, inserttag, outdent, indent, subscript, superscript, acronym, copy, cut, paste, about, showhelp
        
        # 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; }
        )

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

                # 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,style,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,
                        align-left, align-center, align-right, author, vdiagramm1, vdiagramm2, vdiagramm3, vdiagramm4, vdiagramm5
                )       

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

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

                        # htmlSpecialChars = 1
       
                        ## align attribute werden erlaubt
                        .tags {
                                p.fixAttrib.align.unset >
                                p.allowedAttribs = 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 >
                        }
                }

        }

        # 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.userElements {
  10 = Eigene Tabellen
  10 {
    1 = Zeile Weiß 3sp
    1.description = Erzeugt eine weiße Zeile 3spaltig mit schwarzer Schrift und blauem Rahmen
    1.mode = wrap
    1.content = <table class="tabelleeigen" width="100%" border="0" cellspacing="0" cellpadding="1"><tr bgcolor="#FFFFFF"><td width="40%">1</td><td width="30%">2</td><td width="30%">3</td></tr></table>
  }
  20 = Eigene Tabellen
  20 {
    1 = V-Diagramm 5Spalten
    1.description = Erzeugt ein 5-spaltiges V-Diagramm
    1.mode = wrap
    1.content =  <span class="vdiagramm1">Titel Spalte 1<ul><li>Punkt 1</li><li>Punkt 2</li></ul></span> <span class="vdiagramm2">Titel Spalte 2<ul><li>Punkt 1</li><li>Punkt 2</li></ul></span> <span class="vdiagramm3"><h1>Titel Spalte 3</h1><ul><li>Punkt 1</li><li>Punkt 2</li></ul></span> <span class="vdiagramm4"><h1>Titel Spalte 4</h1><ul><li>Punkt 1</li><li>Punkt 2</li></ul></span> <span class="vdiagramm5"><h1>Titel Spalte 5</h1><ul><li>Punkt 1</li><li>Punkt 2</li></ul></span>
  }

}

RTE.default.FE.userLinks >

# Breite des RTE in Fullscreen-Ansicht
TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 80%
```

meine rte_style.css

```html
.vdiagramm1
{
	width:120px;
	padding:5px;
	background-color:#9090bb;
	float:left;
	border: solid 1px red;
}

.vdiagramm2
{
	width:120px;
	margin-top:10px;
	padding:5px;
	background-color:#90bb90;
	float:left;
	border: solid 1px blue;
}

.vdiagramm3
{
	width:120px;
	margin-top:20px;
	padding:5px;
	background-color:#bb9090;
	float:left;
	border: solid 1px green;
}

.vdiagramm4
{
	width:120px;
	margin-top:30px;
	padding:5px;
	background-color:#9090bb;
	float:left;
	border: solid 1px black;
}

.vdiagramm5
{
	width:120px;
	margin-top:40px;
	padding:5px;
	background-color:#90bb90;
	float:left;
	border: solid 1px white;
}
```

## Antworten

### [#2](https://www.typo3.net/d/41857-htmlarea-eigenes-benutzerdefiniertes-element/2) · T0m · 2006-04-26

hab vergessen zu erwaehnen, dass htmlarea im demo Modus laeuft

hat keiner eine Idee/Loesung ?

Post ist auch im typo3forum.de zu finden unter <http://www.typo3forum.net/forum/typo3-3-x-rich-text-editor/11730-problem-mit-eigenem-benutzerdefiniertem-element-htmlarea.html>

### [#3](https://www.typo3.net/d/41857-htmlarea-eigenes-benutzerdefiniertes-element/3) · urs · 2006-05-12

ich möchte auch gerne ein benutzerdefiniertes element einfügen... wie hast du es geschafft, dass es im HTMLarea angezeigt wird? gibt es dazu irgendwo eine manual?

---

Quelle: „HTMLArea Eigenes benutzerdefiniertes Element“, typo3.net, https://www.typo3.net/d/41857-htmlarea-eigenes-benutzerdefiniertes-element
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.