Tags:    javascript

Oversigt

1. Visning af kilde
2. Kilde til WYSIWYG
3. Gemme indholdet?
4. Afslutning

1. Visning af kilde

Det at finde kilden af WYSIWYG-redigering er meget simpelt, da vi, hvis vi tænker os om, ved at kilden må ligge i elementets innerHTML-variabel.
Det eneste vi skal gøre for at få vist koden, er faktisk, at sikre os at '<'- og '>'-tegnene bliver lavet om, således at browseren ikke længere tolker det som HTML-kode:

RichEdit.prototype.getSource = function() {
  [i]// Hent kilden[/i]
  return this.richEdit.document.body.innerHTML;
}

RichEdit.prototype.previewSource = function() {
  [i]// Lav en variabel, som indeholder kilden[/i]
  var sSource = this.getSource();

  [i]// Fjern '<'- og '>'-tegn, og udskift dem med deres HTML-værdier[/i]
  var sRes = "";
  for(var i = 0; i < sSource.length; i++) {
    if(sSource.charAt(i) == "<") sRes += "<"; [i]// Indsæt et "lower-than"-tag, i stedet for "<"-tagget[/i]
    else if(sSource.charAt(i) == ">") sRes += ">"; [i]// Indsæt et "greater-than"-tag, i stedet for ">"-tagget[/i]
    else sRes += sSource.charAt(i); [i]// I andre tilfælde kan vi bare benytte det oprindelige tegn[/i]

  this.richEdit.document.body.innerHTML = sRes; [i]// Vis kilden![/i]
}

Som i kan se, så er der ikke noget specielt svært ved at få vist kilden! Vi har den jo i forvejen, den skal bare ændres så den ikke længere tolkes som HTML, men tekst.

2. Kilde til WYSIWYG

Når nu vi har skiftet fra WYSIWYG til kilden, så kunne det måske også være meget rart at kunne gå tilbage igen?
Det er selvfølgelig også muligt, men denne process er lidt mere besværlig end før! Det skyldes, at vi bliver nødt til at bruge 2 forskellige metoder, afhængigt af om siden vises i FF eller i IE.

Men lad os da kigge på det:

RichEdit.prototype.previewWYWIWYG = function() {
  [i]// Tjek om det er en IE-browser[/i]
  if(document.all) {
    [i]// I IE kan vi helt simpelt benytte os af innerText-variablen, som henter
    // Indholdet af editoren, uafhængigt at HTML-kode, tags mm.
    // Denne værdi tildeler vi så innerHTML-variablen, som nu vil tolke HTML-koden igen[/i]
    this.richEdit.document.body.innerHTML = this.richEdit.document.body.innerText;
  } else {
    [i]// FF understøtter ikke innerText-variablen, og vi må derfor lave en text-range,
    // som udgører sig for innerText-variablen[/i]
    var html = this.richEdit.document.body.ownerDocument.createRange();

    [i]// Nu har vi vores text-range, og skal nu vælge hvor meget af indholdet, som vi
    // ønsker skal indgå i vores WYSIWYG-editor.
    // Dette skal selvfølgelig kun være indholdet af body-elementet, da det er her
    // kilden er placeret![/i]
    html.selectNodeContents(this.richEdit.document.body);

    [i]// Nu skal vi så indsætte teksten, på samme måde som i IE[/i]
    this.richEdit.document.body.innerHTML = html;
  }
}

Som i kan se, er dette lidt mere besværligt, men der er egentligt ikke noget desideret svært ved denne kode.

Nu kan vores editor altså redigere indhold og layout, vise den valgte formatering samt skifte mellem kilde og layout, men hvad så når vi ønsker at gemme indholdet?
Det er faktisk meget simpelt, når vi har getSource funktionen, så lad os kigge nærmere på dette!

3. Gemme indholdet?

Hvis vi ønsker at gemme indholdet af vores WYSIWYG-editor, giver det sig selv, at vi må bruge en form, som sender indholdet videre til en PHP/ASP-server, som herefter behandler det og gemmer det i en database.
Formen skal indholde 1 usynligt felt, som vi bruger til at smide indholdet i og 1 knap til at sende indholdet:

[i]<!-- Formen bør sende indholdet som POST-data, da brugeren ellers vil få en masse tekst i sin adresse-bar! -->[/i]
<form action="SidenDerSkalGemmeIndholdet" method="POST">
  [i]<!-- Feltet her, vil indeholde teksten, som brugeren har skrevet --> [/i]
  <textarea id="save" name="save" style="display:none;"></textarea>
  <input type="submit" name="send" value="Gem indhold">
</form>

Nu mangler vi bare at få overført indholdet til textarea-feltet, når formen sendes. Dette gøres i onsubmit-eventet for formen, og vi benytter getSource funktionen til at hente indholdet:

[i]// Husk at ændre [b]richEdit[/b] til navnet på den variabel, som indeholder RichEdit-klassen![/i]
<form action="SidenDerSkalGemmeIndholdet" method="POST" onsubmit="document.getElementById('save').value = richEdit.getSource();">

4. Afslutning

Nu har i faktisk en færdig WYSIWYG-editor, og i kan selv lege videre med hvordan i kan lave ekstra features til den..!
Jeg kan i hvert fald nævne mange ting, som stadig kunne tilføjes:

- Understøttelse af tabeller
- Stave-kontrol
- Farve-dialog

Dette vil jeg dog ikke komme nærmere ind på her - Det vil jeg overlade til jer selv at lege med! Så må i selv finde en balance mellem hvad i ønsker jeres editor skal kunne og hvad i kan finde ud af!

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X