[JS] Tags om HTML in tekstarea detecteren

[Reveller]

Ik ben bezig om een soort "ultieme" UBB editor te schrijven voor mijn CMS. Enig verschil is, dat mijn editor HTML in plaats van UBB code genereert. Het is dus eigenlijk een HTML editor, maar als ik het zo noem, denkt iedereen meteen aan een WYSIWYG en dat is dus niet wat ik nu maak.

Wat is graag zou willen is detecteren welke tags er om een bepaald woord of selectie heen staan, zodat ik de state van de menu buttons daarop kan aanpassen. Een voorbeeld van wat ik bedoel:



In dit voorbeeld staat mijn cursor op het woord "onderstreept". Dit woord zal zowel vet als onderstreept worden afgedrukt: onderstreept. Ik vraag me af op welke manier ik kan zien dat deze tags er omheen staan, zodat ik de buttons [b] en [u] uit de toolbar, een andere status kan meegeven (hier: rode omlijsting).

Het laatste is makkelijk: als ik weet welke buttons "aan" moeten, verander ik gewoon de class van die button. Ik heb hiervoor al 2 functies geschreven (zit eraan te denken de editor naar OO om te bouwen):

JavaScript:

String.prototype.removeClass = function(theClass) {
    var regString = "(^| )" + theClass + "\W*";
    var regExpression = new RegExp(regString);

    return this.replace(regExpression, "");
}

String.prototype.addClass = function(theClass) {
    if (this != "") {
        if (!this.classExists(theClass)) {
            return this + " " + theClass;
        }
    }
    else {
        return theClass;
    }
    return this;
}

De grote vraag is dus alleen: HOE kan ik uitlezen door welke tags een woord of selectie omvat wordt? De code van de editor staat hier.

[ Voor 3% gewijzigd door Reveller op 19-11-2006 16:07 ]

[Blaise]

Je kan kijken hoe widgEditor dat gedaan heeft. Dat is een WYSIWYG editor die laat zien door welke omringende tag(s) een zinsdeel wordt omvat.

[ Voor 4% gewijzigd door Blaise op 19-11-2006 18:20 ]

[mcdronkz]

De ultieme editor bestaat al: fckEditor

Modbreak:

En wat heeft dit met het probleem van TS te maken

[ Voor 46% gewijzigd door BtM909 op 27-11-2006 15:26 ]

[Reveller]

@mcdronkz - zoals in de openingspost al staat: ik wil geen WYSIWYG editor. Verder ben ik geen fan van fckEditor, omdat het eindgebruikers veel te veel functies biedt. Die zijn weliswaar te disablen, maar wat is dan het nut van een uitgebreide editor als fck? Daarnaast: de editor is een essentieel onderdeel van een CMS. Voor veel eindgebruikers staat de editor zelfs gelijk aan het CMS. Daarom is het in mijn optiek niet verstandig hier een third-party product voor te gebruiken. Als er ergens een fout optreedt in de werking van de editor, wil ik mijn klant meer uitleg kunnen bieden dan "die heb ik niet geschreven". En om de code van fck te doorgronden is bijna net zoveel werk als je eigen WYSIWYG schrijven, maar dan meteen compatible met je eigen systeem. Dit alles staat los van het feit dat fckEditor opzich een knap stukje javascripten is!

@Blaise - ik zal eens kijken, bedankt voor de tip!

[Reveller]

Ik heb de widgEditor bekeken en zag dat deze de widgToolbarCheckState functie gebruikt om de toolbar te updaten. Het verschil met wat ik wil maken is alleen, dat ik in een plain-text textarea werk, en widgEditor in een iframe werkt.

Als er text geselecteerd is, kan ik met onderstaande code de selectie uitlezen:

JavaScript:

var target = this.textarea;

// Mozilla
target.value.substring(target.selectionStart, target.selectionEnd);

// IE
text = target.cursorPos.text;

Maar ik weet niet hoe ik het woord kan uitlezen waar de cursor in staat (dus: zonder selectie), zoals ik in de startpost uitleg. Wie kan mij op weg helpen?

Nog even de widgEditor functie waar ik het over had:

JavaScript:

function widgToolbarCheckState(theWidgEditor) {
    var theSelection = null;
    var theRange = null;
    var theParentNode = null;
    var theLevel = 0;
    
    var menuListItems = theWidgEditor.theToolbar.theList.childNodes;
    for (var i = 0; i < menuListItems.length; i++) {
        menuListItems[i].className = menuListItems[i].className.removeClass("on");
    }

    if (theDsEditor.theIframe.contentWindow.document.selection) { /* IE */
        theSelection = theWidgEditor.theIframe.contentWindow.document.selection;
        theRange = theSelection.createRange();
        try {theParentNode = theRange.parentElement();}
        catch (e) {return false;}
    }
    else { /* Mozilla */
        try {theSelection = theWidgEditor.theIframe.contentWindow.getSelection();}
    catch (e) {return false;}
        theRange = theSelection.getRangeAt(0);
        theParentNode = theRange.commonAncestorContainer;
    }

    while (theParentNode.nodeType == 3) { // textnode
        theParentNode = theParentNode.parentNode;
    }
    
    while (theParentNode.nodeName.toLowerCase() != "body") {
        switch (theParentNode.nodeName.toLowerCase()) {
            case "a":
                theWidgEditor.theToolbar.setState("Link", "on");
                break;
                
            case "strong":
                theWidgEditor.theToolbar.setState("Bold", "on");
                break;
        }
        
        theParentNode = theParentNode.parentNode;
        theLevel++;
    }
    
    return true;            
}

[TimDJ]

kun je niet beter een standaard edittor gebruiken? bepaalde html tags toestaan en dan achteraf na de post de code omzetten naar UBB?

Modbreak:

En wat heeft dit met het probleem van TS te maken

[ Voor 20% gewijzigd door BtM909 op 27-11-2006 15:26 ]

[Reveller]

@FAD - bedankt voor je reaktie, ook al heeft die niets met het gepresenteerde probleem te maken.