[TYPO3-german] HTMLArea 1.2.0 eigenes Benutzerdefiniertes Element
T0m
typo3mailing at future-lounge.de
Tue Apr 25 18:14:21 CEST 2006
Hallo
ich will im htmlarea 1.2.0 (demo-Modus) (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.
ein kleines Bild zur Illustration
http://www.future-lounge.de/Diagramm1.png
oberhalb von "dd" das Resultat welches mir htmlarea liefert.
unterhalb von "dd" das Resultat welches mir ein HTML Element mit dem
Code aus dem benutzerdefinierten Element liefert.
Wenn ich das benutzerdefinierte Element in dem htmlarea einfuege sieht
es aus wie der untere Teil
Klick ich auf speichers sieht es so aus wie der obere Teil.
Vielleicht weiss jemand Rat.
gruss T0m
OUTPUT TYPO3:
<!-- 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 vor speichern:
<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>dd
Source in htmlarea nach speichern:
<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
#*** 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 = 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%[/HTML]
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;
}
More information about the TYPO3-german
mailing list