Zum Inhalt springen

SPAN in P verschwindet

Erstellt am 12. September 2006 · 4 Antworten · letzte Antwort am 20. Februar 2007

Tags: Frage

smagt ·

Hilfe! Ich kämpfe seit längerem mit htmlArea bzw. der Parser, habe fast alle Problemchen loesen koennen, ausser dieses. Meine Konfiguration: typo3 4.0.2, htmlarea 1.4.2, und die Konfiguration für RTE wie in diesem Forum beschrieben und ein wenig angepasst, denn mein tsconfig sieht so aus:

#*** 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/fonts.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, chMode
        hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, inserttag, 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; }
        )
 
        ## 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 = span, 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ßerhalb von p, div
                allowTagsOutside = img,hr,table,div,br,span
 
                # 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
                )       
 
                # 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 = span,div,font
 
                        # htmlSpecialChars = 1
        
                        ## align attribute werden erlaubt
                        tags {
                       	     span.fixAttrib >
                       	     span.allowedAttribs = class
                       	     
                                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 = rot, blau
        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%

Das Problem: SPAN-tags (mit "class=...") innerhalb von P-tags werden beim speichern geloescht (sind dann auch nicht im DB vorhanden), und das moechte ich nicht. Innerhalb H1 (usw) oder DIV (die nach speichern natürlich in P verwandelt werden) Tags werden die SPAN-Tags jedoch beibehalten! Das heisst,

<h1><span class="red">red</span></h1>

bleibt, jedoch

<p><span class="red">red</span></p> wird <p>red</p>

Warum wird SPAN in P-Tags geloescht? Was kann ich dagegen tun?

Danke,

Patrick

bw_chris ·

Hi @ all!

[Forum durchsucht und gelesen / "Gegoogled" / EXT: htmlArea RTE gelesen / EXT: htmlArea RTE nochmal gelesen und Beispiele probiert]

Selbes Problem! Innerhalb der <p>-Tags werden die <span>-Tags gelöscht. In <li>-Tags macht er es komischerweise nicht.

Ich verwende die <span>-tags für Accessibility; sprich für screen reader. Die <span>-Tags sind klassenlos, es werden die Attribute title="" und lang="" verwendet.

Konfiguration:

Firefox 2.0.0; MSIE 6.0.2800.1106; Typo3 4.0.4; Apache 2.2.3; PHP 5.2.0; MySQL cli API 5.0.26; EXT: htmlArea RTE 1.4.3; XHTML 1.0 Transitional;

## ...
RTE.default.proc.allowTags = ... span ...
## ...
entryHTMLparser_db.noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
entryHTMLparser_db.rmTagIfNoAttrib = div,font
## ...

THX in advance! ... So long! - Chris

bw_chris ·

Hi @ all!

Diese Zeile sollte die Lösung sein:

HTMLparser_db.tags.span.allowedAttribs = class, style, lang, title

Ich hab sie an den Anfang meiner Page TSconfig gesetzt.

Hier zur Kontrolle:

RTE.default {
  showButtons = chMode, inserttag
}

RTE.default.proc {

  HTMLparser_db.tags.span.allowedAttribs = class, style, lang, title
  
  # Use CSS-Styled-Content
  overruleMode = ts_css
  
  # Hold <br />-Tags
  dontConvBRtoParagraph = 1
  
  # Remap <div>-Tags
  remapParagraphTag = p
  
  # Tags outside the <p>-Tags
  allowTagsOutside = img, hr, address
  
  # Allowed tags
  allowTags (
    a, abbr, acronym, address, blockquote, b, br, caption, cite, code, div, em,
    h1, h2, h3, h4, h5, h6, hr, i, img, li, link, ol, p, pre, q, sdfield,
    span, strong, sub, sup, table, tbody, td, th, tr, tt, ul
  )
  
  # Delete all deny rules
  denyTags >
  
  # 
  keepPDIVattribs = xml:lang
  
  } # END RTE.default.proc.allowTags

} # END RTE.default.proc

RTE.config.tt_content.bodytext >
RTE.config.tt_content.bodytext.proc.overruleMode = ts_css
RTE.config.tt_content.bodytext.types.text.proc.overruleMode = ts_css
RTE.config.tt_content.bodytext.types.textpic.proc.overruleMode = ts_css

Damit hält er die <span>-Tags mit den Attributen class, style, lang oder title beim Speichern.

Ich hoffe es hilft jenen, die wie ich tagelang auf der Googletour waren und die lists.netfielders.de Archive auswendig gelernt haben.

So long - Chris

[Admin note:] Ich weiß nicht, wie man einen Thread als gelöst markiert. Wenn nötig bitte nachholen.

genese ·

Im manual.sxw, das zu meinem html RTE gehört wird ein Beispiel mit span tags gemacht. Möglicherweise sind die folgenden Zeilen entscheidend:

		## Allow align and style attributes on p and span tags
	proc.entryHTMLparser_db.tags {
		p.fixAttrib.align.unset >
		div.fixAttrib.align.unset >
		p.allowedAttribs = class,style,align
		span.fixAttrib.style.unset >
	}

Ich habe das allerdings nicht ausprobiert, vieleicht lohnt sich ein Blick in das Manual.