[dHTML] Rich text edit - selectie probleem

[r0bert]

Ik las net een topic hiero over een wysiwyg gevalletje in JS. Ik wou zelf ook even zoiets gaan maken, voor de lol, maar loop nu tegen een probleempje aan.

1)
Namelijk wil ik graag bij het vet maken van een (gedeelte van) een woord switchen tussen vet en originele staat van de tekst.

In het ergste geval krijg je dus zo'n tekstje:
"een lastige zin vind ik"

Vervolgens selecteerde user "een lastige zin" en drukt op 'vet'.

Nu zijn er 2 mogelijke resultaten:

• een lastige zin vind ik"
• een lastige zin vind ik"

Maargoed, daar gaat het me niet zozeer om, het gaat me erom hoe ik de html eromheen op kan vragen? Ik heb nu dit scriptje gemaakt:

code:

function fnDoSelectAct()
{
    objSelection    = document.frames['elContentEdit'].document.selection;
    
    if (objSelection)
        objSelection    = objSelection.createRange();
    
    objSelection.text.doFormat('b');
}

String.prototype.doFormat = function(strType)
{
    switch(strType)
    {
        case 'b':
            this.pasteHTML('<b>' + this + '</b>');
        break;
    }
}

Zoals je ziet kan ik de tekst wel bold maken, maar hoe kan ik nou zien wanneer de tekst al bold IS en ik deze terug moet veranderen? De 'text' attribute geeft namelijk geen html tags mee. (Dat is dus prob 1)

2)
Probleem 2 is, dat ik graag wil controleren of er DIRECT (afgezien van whitespace) voor of na de selectie al een 'element' staat. (Om daar de eigenschappen aan te hangen ipv een extra element creeeren).

[faabman]

r0bert schreef op 18 maart 2004 @ 12:59:
Zoals je ziet kan ik de tekst wel bold maken, maar hoe kan ik nou zien wanneer de tekst al bold IS en ik deze terug moet veranderen? De 'text' attribute geeft namelijk geen html tags mee. (Dat is dus prob 1)

.parentElement .parentNode

2)
Probleem 2 is, dat ik graag wil controleren of er DIRECT (afgezien van whitespace) voor of na de selectie al een 'element' staat. (Om daar de eigenschappen aan te hangen ipv een extra element creeeren).

^^

hier gevonden...

[ Voor 14% gewijzigd door faabman op 18-03-2004 13:13 ]

[r0bert]

Waar moet ik .parentNode dan aan hangen?

En die DOM-cores had ik natuurlijk ook al doorgekeken maar daarmee kwam ik er niet uit

[Bosmonster]

execCommand('Bold') ?

[r0bert]

Dat wou ik dus juist niet Wou alles netjes gaan doen, zodat je lekkere CSS krijgt en geen onnodige elementen. Bold was een voorbeeldje, maar wil het natuurlijk graag gaan combineren met vele andere functies/eigenschappen

[ Voor 34% gewijzigd door r0bert op 18-03-2004 14:33 ]

[Bosmonster]

hehe.. dan weet je nog niet wat IE doet met code in een content-editable Die maakt ie zelf opnieuw op en dan kun je je mooie CSS wel vergeten. Bovendien verschilt dit dus nog eens per browser/IE-versie.

Beste wat je kunt doen (en hier zijn al wat discussies over geweest), is het component de dingen af laten handelen met execCommand en vervolgens gewoon een code-cleaning script schrijven. De code-cleaning heb je door de her-opmaak toch al nodig namelijk.

[ Voor 9% gewijzigd door Bosmonster op 18-03-2004 14:57 ]

[r0bert]

Maar ik gebruik toch helemaal geen contenteditable?

[djluc]

r0bert schreef op 18 maart 2004 @ 15:03:
Maar ik gebruik toch helemaal geen contenteditable?

Wat dan wel?

[r0bert]

Normaal iframe

http://www.robertdewilde.nl/temp/editcontent.html

[ Voor 75% gewijzigd door r0bert op 18-03-2004 15:10 ]

[Bosmonster]

Dat wordt lastig typen dan Om het over afbeelding-functionaliteit nog maar niet te hebben..

[ Voor 72% gewijzigd door Bosmonster op 18-03-2004 16:57 ]

[r0bert]

Het gaat me niet om invoer.. Het gaat puur om opmaak. Gegevens komen uit een database bijvoorbeeld en deze kunnen door de gebruiker opgemaakt worden (vet, achtergrondkleur, textkleur etc..)

[r0bert]

Iemand ideeën?

[r0bert]

Nog maar een kick... alternatieve ideeën zijn ook welkom, zolang de xhtml maar netjes blijft en er geen onnodige tags inkomen.. Achteraf opschonen kan ook, maar dat vind ik niet het mooiste idee.. mgoed..

[r0bert]

Blijf aan het kicken

Heeft iemand misschien een andere site die me op een spoor kan brengen?

[Guillome]

In mijn sig heb ik precies wat jij wilt, de html editor online.
Kijk daar eens naar.

Ik heb het met regexpressies gedaan.

Je zoekt of er in de selection de tags staan (zowel <b> als </b> en evt strong)
En zo ja, dan haal je ze weg (str = str.match(/<b>(.*?)</b>/gi) ofzo, staat allemaal in mijn code);
Zo niet, dan plak je het er omheen.

[r0bert]

Ja, werkt zeker leuk Maar ik wil dus eigenlijk uitgaan van wat in jouw voorbeeld de output is. De user moet als het ware de source niet eens te zien krijgen! Gezien het aantal reacties verder ben ik bang dat ik toch aan het achteraf opschonen vast zal zitten.. Zal daar dan maar vast een begin mee maken.. Als iemand alsnog een goed idee heeft, is dat altijd welkom (danwel via GoT danwel via email of msn)