login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > Javascript


Gegevens:
Geschreven door:
svm
Moeilijkheidsgraad:
Gemakkelijk
Hits:
21286
Punten:
Aantal punten:
 (4.31)
Aantal stemmen:
13
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (48)
 

Tutorial:

WYSIWYG-editor

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


1. Inleiding


Jol opende een topic waarin de leden konden aangeven welke tutorial ze vonden ontbreken.
Hierin gaf ik aan dat er een tutorial over het maken van een WYSIWYG-editor (What You See Is What You Get) ontbrak met JavaScript.
Er kwamen positieve reacties op, maar niemand die er eentje maakte.
Daarna kwam ik na veel zoeken een script voor een WYSIWYG-editor.
Na het verdiepen hierin ben ik deze tutorial gaan schrijven.

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"falsenull);
}
function 
schuin() {
  
document.getElementById("iframe").contentWindow.document.execCommand("italic"falsenull);
}
function 
onderstreept() {
  
document.getElementById("iframe").contentWindow.document.execCommand("underline"falsenull);
}

</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"falsekleur);
}


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"falseLetterType);
}
function 
lettergrootte(LetterGrootte) {
if(
LetterGrootte != "")
document.getElementById("iframe").contentWindow.document.execCommand("FontSize"falseLetterGrootte);
}
</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. Opslaan


Nu je een pagina bewerkt hebt, wil je deze natuurlijk ook behouden: hem opslaan.
Dit gaan we, misschien wat omslachtig, doen, zoals een computer het eigenlijk ook doet:
Je hebt een bestand welke je download, deze wordt tijdelijk in temps opgeslagen; daarna selecteer je de directory en sla je het daar op.
Dit gaan we ook doen, maar nu maken we een soort van ram-geheugen op de pagina waarin de code opgeslagen wordt.
Dit lijkt lastig, maar dat is niet zo.
Als 'ram-geheugen' gaan we een textarea gebruiken.
Dit idee is trouwens afkomstig van siliecom14, uitgewerkt door Grayen.
Maar goed, maak ergens op de pagina een formuliertje aan dat bestaat uit een textarea, maar niet zichtbaar is; kopier deze maar:

<form action="" method="post" id="formCode" style="display: none;">
<textarea name="areaCode" id="areaCode"></textarea>
</form>

Zet deze maar onder het iframe, doet er eigenlijk niet toe waar je hem zet.
Nu maak je een nieuwe functie in JS aan die de code van het iframe opslaat in een (JS-)variable en vervolgens deze in de textarea plaatst en het form van deze submit:

function opslaan() {
 var 
htmlCode document.getElementById('iframe').contentWindow.document.body.innerHTML;
 
document.getElementById("areaCode").value htmlCode;
 
document.getElementById("formCode").submit();
}

Nu is de code verzonden en dan gaan we hem opslaan met PHP:

<?
$bestand 
'file.html'//het bestandje waar de code in komt
if(isset($_POST['areaCode']) && $_POST['areaCode'] != ""){
 
$fp fopen($bestand'w');
 
fwrite($fpstripslashes($_POST['areaCode']));
 
fclose($fp);
}
?>


top


6. 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.

top

Persoonlijk Moch er iets niet duidelijk zijn, dan kun je een nota posten.
Beslis je om laag te stemmen, geef dan a.u.b. ook aan waarom je laag stemt.

Een voorbeeld van een editor die je met deze tutorial kunt maken, kan je hier vinden.



« Vorige tutorial : Objecten, properties en prototypes Volgende tutorial : Toon/verberg link met jQuery »

© 2002-2019 Sitemasters.be - Regels - Laadtijd: 0.035s