Joël 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.
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";
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'.
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>
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";
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; kopieër deze maar:
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($fp, stripslashes($_POST['areaCode']));
fclose($fp);
}
?>
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.31) 