1. Inleiding
2. De basis
3. Opmaak-scripts
4. Kleur, lettertype en grootte opmaken
5. Slot

1. Inleiding


Je kent hem wel: de WYSIWYG-editor.
Je komt ze soms tegen op websites en je kunt er een stuk tekst mee opmaken net zoals in Word, Fontpage, Dreamweaver enz...
Nu ga ik leren hoe je er eentje kunt maken voor je website van JavaScript.
Hij is met succes getest in Internet Explorer en FireFox.

In deze tutorial ga ik er wel vanuit dat je al een basis van JS beheerst.

 top

2. De basis


Als eerste de basis:
Zoals jullie misschien wel weten werk je niet met een textarea, maar met een iframe: een editable iframe.
Hierin komt gewoon alles in HTML-code te staan, maar dat wordt door JavaScript omgezet in gewone opmaak.
Om dit iframe editable te maken gebruiken we één regeltje JavaScript.
Hierdoor kun je nu tekst en afbeeldingen in het iframe plaatsen, of als je er een pagina in laadt (met src="") kun je de tekst van deze pagina al weghalen of er tekst bij zetten: zeer belangrijk regeltje dus.
Meer informatie ver dit regeltje kun je hier vinden.
Dit regeltje gaan we dan ook als eerste activeren, door het in een functie te plaatsen en dat in de <body> als onLoad te openen:

<html>
<head>
<script language="javascript">
function maak_frame(){
// IE en FF werken anders: dus kijkt hij hoe hij het moet toepassen
 if(window.navigator.appName == "Microsoft Internet Explorer")
  iframe.document.designMode = "on";

 if(window.navigator.appName == "Netscape")
  document.getElementById('iframe').contentDocument.designMode = "on";
}
 </script>
</head>

<body onLoad="maak_frame()">
<iframe id="iframe" height="300" width="600"></iframe>
</body>
</html>


Hel belangrijkse hebben we dus eigenlijk al, alleen hoeft er nu nog maar wat code bij te komen om er tekstopmaak in mogelijk te maken.
Dit in de volgende 'paragraaf'.

top

3. Opmaak-scripts


De opmaak-scriptjes zetten we (uiteraard) ook in een functie.
En de functie die we gaan gebruiken om een opmaak toe te passen is execCommand(), welke bestaat uit 3 parameters.
We gebruiken ze alle drie, anders gaat FF moeilijk doen.
Meer informatie hierover, klik hier.
Een voorbeeldje hieronder voor bold, italic en underline:

<html>
<head>
<script language="javascript">
function maak_frame(){
// IE en FF werken anders: dus kijkt hij hoe hij het moet toepassen
 if(window.navigator.appName == "Microsoft Internet Explorer")
  iframe.document.designMode = "on";

 if(window.navigator.appName == "Netscape")
  document.getElementById('iframe').contentDocument.designMode = "on";
}
function vet() {
  document.getElementById("iframe").contentWindow.document.execCommand("bold", false, null);
}
function schuin() {
  document.getElementById("iframe").contentWindow.document.execCommand("italic", false, null);
}
function onderstreept() {
  document.getElementById("iframe").contentWindow.document.execCommand("underline", false, null);
}
</script>
</head>

<body onLoad="maak_frame()">
<img src="vet.gif" onClick="vet()"> <img src="schuin.gif" onClick="schuin()"> <img src="onderstreept.gif" onClick="onderstreept()"> <br>
<iframe id="iframe" height="300" width="600"></iframe>
</body>
</html>


Nu kun je door op de afbeelding te klikken de tekst in het iframe vet, schuin of onderstreept maken.

top

4. Kleur, lettertype en grootte opmaken


Nu we de tekst simpele opmaak als vet, onderstreept en schuin kunnen geven, gaan we er nu nog een kleurtje aan geven.
Hierbij gaan we gebruik maken van de 3e parameter.
In de 3e parameter kun je een waarde opgeven waarin hij moet veranderen, wat meestal niet van toepassing is, maar bij de kleur moet het script natuurlijk wel weten welke kleur het moet worden.
We gaan beginnen bij het opmaken van de kleur, die we opgeven in een prompt.
De functie voor de kleur zal er dan als volgt uit komen te zien:

function kleur() {
var kleur = prompt("Voer hieronder de kleur in het Engels of in HEX in:", "");
if(kleur != null)
document.getElementById("iframe").contentWindow.document.execCommand("ForeColor", false, kleur);
}


En mocht je het een achtergrondkleurtje willen geven, dan vervang je de eeste parameter in execCommand door backcolor.

Dan nu het lettertype bepalen.
We laten de gebruiker het lettertype selecteren via een select-box.
Zodra deze geselecteerd is laten we direct het JavaScript in actie komen:

<html>
<head>
<script language="javascript">
function maak_frame(){
// IE en FF werken anders: dus kijkt hij hoe hij het moet toepassen
 if(window.navigator.appName == "Microsoft Internet Explorer")
  iframe.document.designMode = "on";

 if(window.navigator.appName == "Netscape")
  document.getElementById('iframe').contentDocument.designMode = "on";
}

/* ik heb even de eerder gebruikte functies weg gelaten,
dat is voor deze uitleg toch overbodig */

function lettertype(LetterType) {
if(LetterType != "")
document.getElementById("iframe").contentWindow.document.execCommand("FontName", false, LetterType);
}
function lettergrootte(LetterGrootte) {
if(LetterGrootte != "")
document.getElementById("iframe").contentWindow.document.execCommand("FontSize", false, LetterGrootte);
}
</script>
</head>

<body onLoad="maak_frame()">
<iframe id="iframe" height="300" width="600"></iframe><br><br>
Kies de tekstgrootte: Kies een lettertype:<br>
<select name="grootte" onChange="lettergrootte(this.options[this.selectedIndex].value)">
<option value="">Kies een grootte</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select name="letter" onChange="lettertype(this.options[this.selectedIndex].value)">
<option value="">Kies een lettertype</option>
<option value="Arial">Arial</option>
<option value="Tahoma">Tahoma</option>
<option value="Courier">Courier</option>
<option value="Verdana">Verdana</option>
<option value="Times New Roman">Times New Roman</option>
</select>
</body>
</html>
</body>

</html>


top

5. Slot


Zo, viel eigenlijk best mee hè?
Je kunt hem nu zelf uitbreiden met allerlei andere functies.
Alle mogelijke functies kun je hier terug vinden.
Als je een pagina wilt opslaan dan kun je dat natuurlijk doen met SaveAs als eerste parameter in execCommand(), maar aangezien je hiermee niet op de server kunt opslaan, kun je er PHP aan koppelen.
Een mooie WYSIWYG-editor die je kunt maken m.b.v. deze tutorial zal ik er later nog bij zetten, eerst moet ik deze nog maken.

top

Persoonlijk Moch er iets niet duidelijk zijn, dan kun je me een PM sturen of een topic openen op het forum.