class=test eller class="test"

Jeg er ved at lave en lille online html editor. Den laver af en eller anden grund alle om hvis jeg skriver

class="test" laver den det om til class=test

Det virker som om det ikke er et problem da den godt kan læse styles selvom de ikke er i citationstegn men det kan jo være der er problemer i andre browsere...er der?

http://www.music-spot.net/SimsCms/rte_2/demo2.php
her er siden

<span class="test">dfgd</span>

Så vidt jeg ved må man selv bestemme om man vil bruge " i HTML 4, mens man skal bruge dem i XHTML.

Hvis man nu senere om x-antal år når IE understøtter xhtml vælger at konvertere
til xhtml - er det en god ting at man har vænnet sig til at bruge " eller '
... i html 4 er de ikke krævet men "anbefalet" ...

http://www.music-spot.net/SimsCms/rte_2/demo2.php
Den editor jeg er ved at lave fjerner desværre de "" og det er jeg træt af øv
Jeg ved ikke om det kan laves så den ikke fjerner dem men jeg må vel arbejde videre med det

Den fjerner dem ikke i jeg bruger firefox

Hvad er det lige forskellen er på xhtml og html??

[ Den fjerner dem ikke i jeg bruger firefox ]
Det kommer an på om browseren leverer attributter med appostroffer rundt
om sig ... og der kan være lidt forskel fra den ene til den anden ...
(som med så mange andre ting der varierer fra browser til browser...)

[ Hvad er det lige forskellen er på xhtml og html?? ]
... sådan et spørgmål er svært at svare kort på ...
- finder lige et par links så vi ikke får en debat om det igen :D

//Det kommer an på om browseren leverer attributter med appostroffer rundt om sig

--er der så ikke nogen måde jeg kan få Iexplore til at levere med apostroffer?

xhtml check disse:

en tråd med lidt "debat" om xhtml ...
http://www.eksperten.dk/spm/711580#rid6276658

olebole's artikler (anbefales!):
http://www.eksperten.dk/artikler/537
http://www.eksperten.dk/artikler/538

Og en anden lidt om xhtml for / imod ...
http://www.eksperten.dk/spm/699114#rid6183562

... tror ikke det kan uddybes mere ...

takker ...en del læsestof

[ --er der så ikke nogen måde jeg kan få Iexplore til at levere med apostroffer? ]
- kan ikke svare på den ... jeg bruger kun notesblok og har ikke leget
med at hente dataer og attributtter ned fra en designmode editor ...

ok ..men mange tak for hjælpen

- velbekom ... det kan være der kommer en der
har leget lidt mere med designmode senere ;)

<ole>

De manglende gåseøjne omkring attributter er deværre kun en enkelt ting MSHTML ikke kan håndtere i designmode (og for den sags skyld udenfor designmode). Der er ikke så meget at gøre ved det, andet end at scrive et eller flere scripts, der efterfølgende retter koden op  :o|

/mvh
</bole>

ok tak Ole
Jeg vil prøve at lave et script der indsætter "" hvor de burde have været

Ja, det er nu ikke helt så let, som det lyder. Som udgangspunkt kunne man jo lede efter et '=' mellem '<' og '>', men så ryger man ind i problemer med bl.a. query-strenge ... og de behøver ikke nødvendigvis at stå i en 'href'.

Det allersikreste er nok at oprette et XML-dokument-fragment med script. Derefter kan man så traversere gennem HTML'ens elementer - og oprette tilsvarende elementer i XML-dokumentet, samt klone elementernes attributter (altsammen med DOM).

Så vil det eneste, der efterfølgende skal rettes, være elementer af typen 'link', 'meta', 'img', 'input', o.lign, som skal have fjernet slut-tagget i HTML - og i stedet afsluttes med ' />' i XHTML.
Disse sidste rettelser er du dog nødt til at rette på serveren. Glem alt om brug af innerHTML, da det blot reintroducerer dårlig kode.

Til slut gemmes XML-dokumentet som et HTML-dokument ... voilà ... rimelig god kode. Hvorfor der ikke er flere, der benytter sig af denne metode, ved jeg ikke - den ligger ellers lige til højrebenet  ;o)

...mh avs..det lyder lidt svært!!
Jeg har ingen erfaring med xml endnu overhovedet

..det bliver måske det næste jeg kaster mig over

indtil videre har jeg gjort dette

$search = array('class=style1', 'class=style2','class=style3','class=style4');
$replace = array('class="style1"', 'class="style2"','class="style3"','class="style4"');
$wTags = str_replace($search, $replace, stripslashes($_GET['rte1']));


Ja det nok ikke så fikst men det er hvad jeg kunne komme på...gir et nogle problemer??

Nej, det funker sikkert fint  :)

Det eneste problem du kan få er hvis brugeren i teksten har skrevet:
En class definering lavet sådan her: class=style1 - er forkert
En class definering lavet sådan her: class="style1" - er korrekt

... så vil man få dette i filen:

En class definering lavet sådan her: class="style1" - er forkert
En class definering lavet sådan her: class="style1" - er korrekt

Men ellers som Olebole siger så vil det sikkert virke fint :)
( man kan selvfølgelige lave class navnene mere "usandsynlige" )

Tak for hjælpen
I skal ha points så læg et svar

ok :)

- lagt  :)

Når man tager en innerHTML i IE returnerer den altid class-, id-, name-attributter, m.fl. uden gåseøjne. Derimod er bl.a. href-, style- og proprietære attributter altid escaped. Alle tagNames er desuden uppercase. Der er lidt at rode med  :)

- og tak for point :)

Ja ... tak for points  :)

Nu er mit 'rengørings-objekt' (og, nej ... det har intet med Ajax at gøre *hø-hø*) ved at være færdigt. Sidder lige og piller med indrykningen. Tak for sparket i den retning, simonhans73  ;o)

Første beta ser sådan ud:

<script type="text/JavaScript">
var OC_MarkUpLaundry = { // Version 1.0 Beta
    /*****************************************/
    /*****  OC_MarkUpLaundry 1.0 Beta  *****/
    /*****************************************/
    /*  (C) Copyright - Ole Clausen - 2006  */
    /* Free to use if you leave this notice  */
    /*****************************************/
    /*****************************************/
    /*  The object cleans up markup from an  */
    /*  editor-app in Internet Explorer.    */
    /*  Call getCleanMarkUp and supply a ref */
    /*  to the editor's content element.    */
    /*  A clean markup-string is returned.  */
    /*****************************************/
   
    /*****************************************/
    /*****      PUBLIC PROPERTIES      *****/
    /*****      May be edited here      *****/
    /*****      - or set in code        *****/
    /*****************************************/
    aAttributes: ["id", "name", "class", "style", "href", "type", "value", "src", "target", "action", "method", "enctype",
                  "rowspan", "colspan", "for", "usemap", "area", "coords", "onmouseover", "onmouseout", "onmousemove",
                  "onmousedown", "onmouseup", "onclick", "onkeydown", "onkeypress", "onkeyup", "onchange", "onfocus",
                  "onblur", "onsubmit", "onload", "onerror"
    ],
    bTagsAsXHTML: false,
   
    bFormatMarkUp: true,
    aNoBreakElms: ["b", "strong", "i", "em", "u", "a", "img"],
    aBreakBeforeEndElms: ["table", "thead", "tbody", "tfoot", "tr", "ul", "ol", "pre", "form", "fieldset", "select"],
    aHalfTabs: ["thead", "tbody", "tfoot", "tr"],
    oTabChars: {half:"  ", full:"    "},
   
    /*****************************************/
    /*****    DON'T EDIT BELOW THIS    *****/
    /*****************************************/
   
    _inited: false,
    _aNoEndTagElms: ["area", "base", "br", "col", "hr", "img", "input", "isindex", "param"],
    _oDoc: null, _oDocElm: null,
    _layout: {nb:{}, bbe:{}, fT:{}, hT:{}, ne:{}},
    _hshAttr: {},
    _init: function() {
        for (var i=0,j=this.aAttributes.length; i<j; i++) this._hshAttr[this.aAttributes[i]] = 1;
        for (var i=0,j=this.aNoBreakElms.length; i<j; i++) this._layout.nb[this.aNoBreakElms[i]] = 1;
        for (var i=0,j=this.aBreakBeforeEndElms.length; i<j; i++) this._layout.bbe[this.aBreakBeforeEndElms[i]] = 1;
        for (var i=0,j=this.aHalfTabs.length; i<j; i++) this._layout.hT[this.aHalfTabs[i]] = 1;
        for (var i=0,j=this._aNoEndTagElms.length; i<j; i++) this._layout.ne[this._aNoEndTagElms[i]] = 1;
        this._inited = true;
    },
    _getLineBreak: function() {
        return this._oDoc.createElement("lineBreak");
    },
    _getTab: function(str) {
        var o = this._oDoc.createElement("tab");
        o.appendChild( this._oDoc.createTextNode(str!=""?str:"-") );
        return o;
    },
    _cloneElm: function(contHtml, contXml) {
        var aN, n, nN, o, oB, cD, tx, sParTab, sTab, lnBr;
        aN = contHtml.childNodes;
        for (var i=0,j=aN.length; i<j; i++) {
            n = aN[i];
            nN = n.nodeName.toLowerCase();
            sParTab = sTab = "";
            switch (n.nodeType) {
                case 1: // Element
                    o = this._oDoc.createElement(nN);
                    contXml.appendChild(o);
                    if (!this._layout.nb[nN] && this.bFormatMarkUp) {
                        contXml.insertBefore(this._getLineBreak(), o);
                        if (o.parentNode.previousSibling && o.parentNode.previousSibling.nodeName=="tab") {
                            sParTab = o.parentNode.previousSibling.firstChild.nodeValue;
                        }
                        sParTab = sParTab=="-" ? "" : sParTab;
                        if (!this._layout.nb[nN] && !this._layout.hT[nN]) sTab = sParTab + this.oTabChars.full;
                        else if (this._layout.hT[nN]) sTab = sParTab + this.oTabChars.half;
                        else sTab = sParTab;
                        oTab = this._getTab(sTab);
                        contXml.insertBefore(oTab, o);
                    }
                    if (nN=="script") {
                        cD = this._oDoc.createCDATASection(n.text);
                        o.appendChild(cD);
                    }
                    else if (n.childNodes && n.childNodes.length>0) this._cloneElm(n, o);
                    else if ( (!n.childNodes || n.childNodes.length<1) && !this._layout.ne[nN]) {
                        tx = this._oDoc.createEntityReference("nbsp");
                        try { o.appendChild(tx) };
                        catch(e) { tx = null };
                    }
                                       
                    if (this._layout.bbe[nN] && this.bFormatMarkUp) {
                        o.appendChild(this._getLineBreak());
                        o.appendChild(this._getTab(sTab));
                    }
                   
                    if (n.style&&n.style.cssText!="") o.setAttribute("style", n.style.cssText.toLowerCase());
                    var att = n.attributes;
                    for (x=0,y=this.aAttributes.length; x<y; x++) {
                        attTmp = att.getNamedItem(this.aAttributes[x]);
                        if ( attTmp && typeof attTmp.nodeValue=="string" && attTmp.nodeValue!="" ) {
                            o.setAttribute(this.aAttributes[x], attTmp.nodeValue);
                        }
                    }
                break;
               
                case 3: //Text
                    nV = n.nodeValue;
                    if (nV.match(/[^\s]+/)) {
                        tx = this._oDoc.createCDATASection(nV);
                    }
                    else tx = this._oDoc.createTextNode(nV);
                    contXml.appendChild(tx);
                break;
               
                case 8: // Comment
                    nV = n.nodeValue;
                    o = this._oDoc.createElement("comment");
                    tx = this._oDoc.createCDATASection(nV);
                    o.appendChild(tx);
                    contXml.appendChild(o);
                break
            }
        }
    },
    _cleanTables: function() {
        var aTbls, aTds;
        aTbls = this._oDoc.getElementsByTagName("table");
        for (var i=0,j=aTbls.length; i<j; i++) {
            aTds = aTbls[i].getElementsByTagName("td");
            for (var x=0,y=aTds.length; x<y; x++) {
                if (aTds[x].getAttribute("colspan")=="1") aTds[x].attributes.removeNamedItem("colspan");
                if (aTds[x].getAttribute("rowspan")=="1") aTds[x].attributes.removeNamedItem("rowspan");
            }
        }
    },
    _replaceTabs: function() {
        var o, aTabs = this._oDocElm.getElementsByTagName("tab");
        for (var i=aTabs.length-1; i>=0; i--) {
            if (aTabs[i].firstChild.nodeValue=="-") {
                aTabs[i].parentNode.removeChild(aTabs[i]);
            } else {
                o = this._oDoc.createTextNode( aTabs[i].firstChild.nodeValue );
                aTabs[i].parentNode.replaceChild(o, aTabs[i]);
            }
        }
    },
    getCleanMarkUp: function(contHtml) {
        var xml, aTabs;
        var startT = new Date().getTime();
        if (!this._inited) this._init();
        this._oDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
        this._oDocElm = this._oDoc.createElement("markupFragment");
        this._oDoc.appendChild(this._oDocElm);
        this._cloneElm(contHtml, this._oDocElm);
        this._cleanTables();
        this._replaceTabs();
        xml = this._oDocElm.xml;
        xml = xml.replace(/<\/?markupFragment>/g, "");
        xml = xml.replace(/<lineBreak\s?\/>/g, "\r\n");
        xml = xml.replace(/<comment>([^\/]*)<\/comment>/g, "\r\n\r\n<!-- $1 -->\r\n");
        xml = xml.replace(/<!\[CDATA\[/g, "");
        xml = xml.replace(/\]\]>/g, "");
        if (!this.bTagsAsXHTML) xml = xml.replace(/\s?\/>/g, ">");
        this._oDoc = null;
        return xml + "\r\n";
    }
};
</script>

Man kan ændre i de properties, der er anført som 'public', eller sætte dem i kode på formen:
    OC_MarkUpLaundry.bTagsAsXHTML = true;

De properties, der står efter 'bFormatMarkUp' er kun aktuelle, hvis denne er sat til true.
'aBreakBeforeEndElms' indeholder tegNames på de elementer, hvor slut-tagget skal stå på en ny linje.
'oTabChars' indeholder to forskellige tabs - full og half. Mange foretrækker at bruge indrykning med f.eks. to mellemrum ved nogle tags - og en 'TAB' ved andre.

Resten skulle være til at regne ud ... kik på navnene  ;o)

- nå ja ... et eksempel på, hvordan objektet kan bruges i praksis. Her kalder jeg et contentEditable div med id="editor" og fylder den oprensede og indrykkede kode ned i et hidden form-felt ved submit:

<script type="text/JavaScript">
var OC_MarkUpLaundry = { // Version 1.0 Beta
... ... ...
... ... ...
... ... ...
};

function setMarkup(oInp) {
    var editor = document.getElementById('editor');
    oInp.value = OC_MarkUpLaundry.getCleanMarkUp(editor);
    return true;
}
</script>

<form ........... onsubmit="return setMarkup(this.htmlTxt)">
    <input type="hidden" name="htmlTxt">
    <button type="submit">TEST</button>
</form>

- ups ... denne linje:
    var startT = new Date().getTime();

- i 'getCleanMarkUp' metoden kan slettes. Den stammer fra en speed-test ... og nogen hurtigløber er 'tøsen' jo ikke ligefrem. Den er ca. 1/2 sekund om at tygge sig igennem 50k kode - hvilket jeg ikke er tilfreds med.
Naturligvis tager det tid at arbejde sig rekursivt ned gennem en kode og opbygge en tilsvarende klon, men jeg ville gerne have den til at blive mere effektiv. Nå ... wtf ... der er sjældent ret mange kald af en funktion af den type, så indtil videre ...  :)

Læg mærke til, at style-elementer og andre, der har hjemme i head-elementet, ikke er understøttet. Det er et bevidst valg, da den slags editors bør anvendes til dokument-fragmenter, der indsættes i elementer i en template.

Man kan tilpasse de forskellige public arrays, så kun de elemnter og attributter, som er valide indenfor den standard, der skrives mod, er i array'et. Dem, der er tilstede nu, er blot nogle, jeg har siddet og testet med. Der er sikkert en del at rette.

I det hele taget er det en beta  ;o)

Det ser spændende ud Ole.
Jeg venter lige lidt med at bruge den, men det er jo rart a vide den er der