WYSIWIG tekst stijl opvragen

[Lapixx]

Hoi,

Ik ben het werken aan een WYSIWYG editor. Dit gaat goed, maar op 1 deel loop ik vast. Met de ExecCommand functie kun je bepaalde stijlen toepassen op de tekst binnen een iframe die in de designmode zit. Echter, ik wil weten welke stijl de tekst heeft waar de cursor op staat. Zoals Word/Pages aangeeft welk lettertype de tekst heeft waar de cursor op staat bijvoorbeeld. Of de knoppen 'activeren' (een andere stijl geven) als de geselecteerde tekst al dikgedrukt is.

Ik hoop dat het zo een beetje duidelijk is, en dat iemand mij verder kan helpen

Alvast bedankt.

 

[Chopra]

Uit eigen ervaring weet ik dat bijv. Dreamweaver dit perfect aangeeft.
Je staat in designmode op 'n woord ergens in de tekst, switched dan naar code en daar zie je exact waar je staat en (bij eigenschappen) de gewenste info omtrent stijl.

 

[Lapixx]

Sorry, ik heb mijn vraag niet duidelijk gesteld.

Ik ben een WYSIWYG editor het maken, waarmee pagina van een website kan worden aangepast. Met Javascript kun je het eigenschap 'designmode' van een iframe naar 'on' schakelen, waarna het frame zich gaat gedragen als een tekstveld met opmaak. Het veld heeft dus een innerHTML (waar de stijl onder ander in staat) en de gebruiker ziet dan, in plaats van de codes, de tekst, zoals het op een website uit zou zien.

Wanneer je de ExecCommand() functie gebruikt kun je de stijl van de geselecteerde tekst veranderen. Dit wordt vanzelf geregeld en ik hoef naast deze functie niets te doen. Echter, ik wil weten wat de huidige stijl is van een bepaald stuk tekst (zoals in Word, en in Dreamweaver inderdaad ook).

Ik hoop dat het zo duidelijker is

 

[Chopra]

Excuus Lapixx, je stelde het al wel duidelijk genoeg in je openingszin, 'k heb er overheen gelezen.
Enne.. dit gaat mij dus boven de pet, kan je helaas niet verder helpen

 

[Lapixx]

Ter verduidelijking, een voorbeeld bij FCKeditor:

http://www.fckeditor.net/demo

Als je op (het dikgedrukte) "sample text" klikt, in het veld waar je kunt typen, dan word de B knop in de toolbar blauw weergegeven, om aan te tonen dat de tekst waar de cursor op staat vetgedrukt is. Hoe kan ik dit doen in mijn eigen editor (een iframe met designmode="on")?

 

[Lapixx]

BUMP

Echt niemand?

 

[That Guy]

Err, deze topic heb ik gemist blijkbaar. Anywho, ik weet niet precies of ik je begrijp, maar je wilt dus checken welke tags een bepaalde (selected) text heeft? Denk wel dat het kan, mishcien moet je even wat links/script-voorbeelden geven.


:thumb:

 

[Lapixx]

Nou, denk aan een programma als MS Word:

Je hebt een toolbar met de B, I, U knoppen, de lijstjes voor het veranderen van het lettertype, de tekstgrootte enzovoorts. Als je een stukje vetgedrukte tekst selecteerd in Word, dan krijgt het knopje B (voor het vet maken van de tekst) een andere kleur, alsof hij "aan" staat. Dat geeft dus aan dat de geselecteerde tekst (of althans, de plek waar de pointer staat) vetgedrukt is, zodat het knopje wat meer op een toggle-button lijkt.

Ik heb dus een iframe, die via javascript DesignMode="on" heeft, en een toolbar met een aantal afbeeldingen die een execCommand() functie uitvoeren bij onclick (redelijk standaard bij webbased WYSIWYG editors). Bij veel kant-en-klare editors heb je de functionaliteit waar ik om vraag (http://www.fckeditor.net/demo).

Het meest logische lijkt me om de positie van de pointer (het knipperende lijntje bedoel ik dan) in de innerHTML te bepalen (de innerText is niet hetzelfde als de innerHTML in dit geval, dus dit is al lastig) en vervolgens alle bovenliggende tags af te gaan (parentNode) om te controleren of die de tekst vet/cursief/watdanook maken (ook dit is niet supermakkelijk, gezien niet alle browsers dezelfde manier gebruiken om dit te doen. <b>, <strong>, en span tags met een style attribuut komen door elkaar voor).

Ik weet natuurlijk niet hoe bijv. Fckeditor dit doet, of hoe ik iets dergelijks kan doen, vandaar dit topic

 

[That Guy]

Ik dacht, ik check even de fckeditor js source, maar die is een beetje gecompresseerd, dus tsja

Anywho, jouw idee is opzich helemaal niet zo slecht. Het is eigenlijk ook de enige waar ik aan kan denken, behalve het zowiezo bijhouden welke text je (bijvoorbeeld) bold maakt (dus elke keer als iemand op t bold-knopje klikt). Het is lastig, maar ik denk dat het wel kan (maar het is wel even een nadenkertje!)

Ohja, wat je even moet bedenken is dat men ook 2x dezelfde text kan hebben, de 1 zonder bold en de andere met...

 

[Lapixx]

Fckeditor is erg uitgebreid, en de source is inderdaad compressed (weet even niet of je een dev-source kon krijgen, inclusief de white spaces). Daarbij maakt Fckeditor volgens mij niet gebruik van de "standaard" functies voor iframes in de designmode, maar voegt op een bepaalde manier zelf tags toe (door direct het DOM van de innerHTML te manipuleren). Het manipuleren van het DOM gaat op zich wel, en ik weet ook wel hoe ezv, maar dan zal ik eerst het element moeten weten dat geselecteerd is of waar de pointer op staat. Dat is nu het hoofdprobleem.

 

[csshunter]

Hoi Lapixx,
Ik ben niet erg thuis in scripten, dus maar eens onze nieuwe monopolist te hulp geroepen op de trefwoorden [if selected text is bold javascript tutorial].
Is uit het resultaat iets te halen?

• De tweede hit lijkt me heel aardig. Als daar de Bold-knop zelf ook voorzien wordt van een onClick="toggleButton()", met de knop-img als background-image, kan die via css en DOM in- en uitgedrukt komen te staan.
• Dit voorbeeld is helaas IE-only. Zou netjes omschrijven naar DOM-aanroepen tot de mogelijkheden behoren?

Dan schrijf je:

Het meest logische lijkt me om de positie van de pointer (het knipperende lijntje bedoel ik dan) in de innerHTML te bepalen (de innerText is niet hetzelfde als de innerHTML in dit geval, dus dit is al lastig) en vervolgens alle bovenliggende tags af te gaan (parentNode) om te controleren of die de tekst vet/cursief/watdanook maken (ook dit is niet supermakkelijk, gezien niet alle browsers dezelfde manier gebruiken om dit te doen. <b>, <strong>, en span tags met een style attribuut komen door elkaar voor).

Maar als ik het goed begrijp, is de te tikken/editen tekst in jouw editor zelf voorzien van de <b>, <i> enz. tags. Dan hoef je toch alleen maar daarnaar te laten zoeken, en maakt het toch niet uit op welke browser je het bekijkt? Als je bv. checkt of iets vetgedrukt staat en je dat eerder hebt aangegeven met <strong></strong> (beter dan <b></b>), dan hoef je alleen maar naar <strong> te laten zoeken: een browser kan daar niet uit zichzelf <b> of iets anders van maken! Het wordt pas echt ingewikkeld, als je een willekeurige (elders gemaakte) html-code wilt editen, want daar kan van alles inzitten.

Succes!
CSShunter

 

[Lapixx]

Nou, mijn editor maakt gebruik van execCommand() functies. Als je een knop maakt die bijvoorbeeld execCommand("bold",null,false) uitvoert, dan zal de browser ZELF de geselecteerde tekst vet maken (althans, als dat mogelijk is, bijvoorbeeld in een iframe dat goed is ingesteld). Dit is natuurlijk een makkelijke methode, gezien ikzelf nouwelijks iets hoef te doen, en de browser al het moeilijke werk voor me doet. Ik hoef vervolgens alleen de source in een formulier te zetten en het formulier verzenden. Op de server kan ik die source dan in een database opslaan of wat dan ook.

Hoe handig de standaard functie execCommand is, zo heeft hij ook een groot nadeel. Alle browsers werken anders, en bij de execCommand functie werken ze heeel anders. De source code ziet niet erg netjes uit, er staat vaak een hoop onzin is, maar uiteindelijk is de HTML wel valide (dus wordt goed weergegeven). Daarom weet ik dus niet precies wat ik zoek, maar heb ik een lijst mogelijkheden.

 

[csshunter]

...dan zal de browser ZELF de geselecteerde tekst vet maken

Aha, zit dat zo! Dan kan dus bv. Firefox bij een druk op de B-knop de tag <strong></strong> aanmaken, terwijl bv. IE bij dezelfde klik er <b></b> van maakt, enz. Mmm. Dat maakt het erg lastig, vooral als je dezelfde tekst/pagina zou moeten kunnen editen met een andere browser dan waarmee de pagina gemaakt is. - Ik trek me bescheiden terug!

Met vriendelijke groet,
CSShunter