Lettertype veranderen

[Verwijderd]

Ik ben bezig een soort WYSIWYG editor te maken, online, en via javascript. Vet maken, onderstrepen, cursief, kleur veranderen etc. werkt allemaal al. Alleen met het lettertype veranderen heb ik een klein probleem. De kleuren verander ik bv met deze code:

code:

<select onchange="if(this.options[this.selectedIndex].value != -1){ document.all.edit.setColor(this.options[this.selectedIndex].value);  }">>
<option value="-1">&nbsp;Kies een kleur&nbsp;</option>
<option value="FF0000" style="color:FF0000">&nbsp;Rood</option>
<option value="0000FF" style="color:0000FF">&nbsp;Blauw</option>
<option value="000000">&nbsp;Zwart</option>
<option value="FFFF00" style="color:FFFF00">&nbsp;Geel</option>
<option value="FF00FF" style="color:FF00FF">&nbsp;Paars</option>
<option value="00FFFF" style="color:00FFFF">&nbsp;Groen</option>
</select>

Logisch doordenken zou dus de volgende code opleveren om het lettertype te veranderen:

code:

<select onchange="document.all.edit.setFont(this.options[this.selectedIndex].value);">
<option value="-1">&nbsp;Kies een lettertype&nbsp;</option>
<option value="Verdana">Verdana</option>
<option value="Arial">Arial</option>
<option value="times">Times new roman</option>
</select>

Hiermee geeft hij alleen een error: 'Deze eigenschap of methode wordt niet ondersteund door dit object'.

Dus ik weer verder zoeken, kom ik de functie surroundSelection(Ervoor, Erachter) tegen.

Ik dacht zo, dan zet ik <font face='lettertype'> ervoor, en </font> erachter. Zo gezegt zo gedaan :-)

Tussen de script tags:

code:

Erachter = '</font>';

En in de body:

code:

<select onchange="if(this.options[this.selectedIndex].value != -1) { document.all.edit.surroundSelection(this.options[this.selectedIndex].value, Erachter); }">
<option value="-1">&nbsp;Kies een lettertype&nbsp;</option>
<option value="<font face='Verdana'>">Verdana</option>
<option value="<font face='Arial'>">Arial</option>
<option value="<font face='Times'>">Times new roman</option>
</select>

Dit werkt perfect, op een ding na. De eerste keer vervangt hij het lettertype perfect, alleen als je het daarna nog een keer verander, op dezelfde selectie, komt er dus zeg maar dit te staan:

code:

<font face='2de lettertype'><font face='1ste lettertype'>Selectie</font></font>

(in de bron van de pagina, niet in beeld zelf :-))

Dit zorgt er uiteraard voor, dat als lettertype het eerst gekozen lettertype wordt genomen. Mijn vraag is dus: Hoe vervang ik dat lettertype, zodat het lettertype echt vervangen wordt, je geen errors krijgt, en het na meerdere keren ook nog steeds werkt?

[Willem]

Ehm waarom gebruik je hiervoor geen CSS?

[drm]

move -> W&G

[Verwijderd]

Voorbeeld met css:
<option style="font-family: Arial, Helvetica, sans-serif; font-weight: bold">blaat</option>

[Beekforel]

Ik denk dat TimD het niet helemaal begrijpt.

Ik heb even gekeken, maar ik ben nog niet echt verder gekomen dan die kleuren.
Ik zal dit topic even in de gaten houden, ik kan dit best wel gebruiken!

[ Voor 52% gewijzigd door Beekforel op 26-03-2003 10:05 ]

[BtM909]

Verwijderd schreef op 26 March 2003 @ 09:55:
Voorbeeld met css:
<option style="font-family: Arial, Helvetica, sans-serif; font-weight: bold">blaat</option>

Als je niet weet waar je over praat, zeg dan niks....

Je geeft het enige voorbeeld waar dit niet gaat werken

[ Voor 6% gewijzigd door BtM909 op 26-03-2003 10:00 ]

[RM-rf]

je fout is zo'n beetje de fout van html-editoren rond 97-98 (specifiek frontpage98 of word2html).

behalve dat de hele font-tag onwenselijk is, kun je het beste kijken of je select-range alvorens de tags toe te voegen niet kan doorlopen op andere font-tags, dan zijn er 3 opties:
- de range bevat een open- alswel een closing-fonttag : verwijder beide.
- de range bevat enkel een open tag : verwijder deze en plaats hem na de enclose weer achter de range.
- de range bevat een closing-fonttag : verwijder deze en plaats hem na de enclose direct voor de range.

door de eerste check eerst te laten plaatsvinden, het verwijderen van /<font face=\'[\w*]\'>(.*)</font>/ (regular Expression), houd je hierna enkel ofwel geen font-tags, ofwel enkel een closing/opening tag over. (waarna de tweede of derde optie volgt)

[Verwijderd]

Voordat je iets op de selectie loslaat is het verstandig eerst ff te kijken wat de eerste tag is:

JavaScript:

// hier ergens range maken
if(range.parentElement().tagName == "FONT") 
{
 range.parentElement().face = "arial";
} 
else 
{
 surroundSelection("<font face='arial'>", "</font>");
}

// Kep het nie getest maar het gaat om het idee

Maar waarom gebruik je geen execCommand om fonts te wijzigen?

[ Voor 27% gewijzigd door Verwijderd op 26-03-2003 11:04 ]

[shlammod]

Heb je perongeluk niets aan dit topic?
[rml][ JAVASCRIPT] Class omwisselen mbv Javascript[/rml]
Dat je met classes gaat werken en deze laat vervangen?

[Verwijderd]

Verwijderd schreef op 26 March 2003 @ 10:47:
[..]
Maar waarom gebruik je geen execCommand om fonts te wijzigen?

Omdat ik dat hele commando nog niet kan

*zoekt even*

Er is erg veel info over te vinden, en het werkt perfect

Thnx

Nog even de code die ik nu gebruik voor de volledigheid:

HTML:

<select onchange="if(this.options[this.selectedIndex].value != -1){ document.all.edit.execCommand(FontName,this.options[this.selectedIndex].value) }">
<option value="-1">&nbsp;Kies een lettertype&nbsp;</option>
<option value="Verdana">Verdana</option>
<option value="Arial">Arial</option>
<option value="times">Times new roman</option>
[..]
</select>

[ Voor 42% gewijzigd door Verwijderd op 26-03-2003 18:57 . Reden: Code toevoegen... ]