Lav din egen WYSIWYG
|
I denne artikel skal vi se på hvordan man laver en såkaldt WYSIWYG editor. WYSIWYG står for What You See Is What You Get. På dansk: "Hvad du ser er hvad du får". Det går ud på at man kan lave et script der virker på samme måde som et almindeligt tekstbehandlingsprogram som f.eks Word eller OO-Writer. Det kan f.eks være nyttigt til folk der ikke har forstand på HTML, eller hvis man bare ikke gider sidde og skrive kode hele tiden. Men nok snak, lad os komme igang med lidt teori. TEORI Vores editor skal bygges op på den måde at vi skal lave et iframe som skal være "Editable" - dvs. at vi skal have mulighed for at manipulere med indholdet i iframet. Dernæst skal vi lave en række Javascript funktioner til at udføre de manipulationer vi vil have dem til via. f.eks tryk på knapper. Men lad os allerførst starte med en grundskabelon. GRUNDSKABELON
Der er ikke det store i den kode, det i skal lægge mærke til er at vi har indsat et iframe, som vi har givet id"et "editor", det skal vi bruge nu når vi skal gøre det "editable". Det gøres via Javascript ved at sætte "DesignMode" til "on" på iframet. DESIGNMODE
Som i kan se så har jeg lavet en funktion som jeg har kaldt "init" - det er lige meget hvad du kalder den, men for ikke at forvirre dig selv så kald den det samme som jeg gør i artiklen her. Jeg har også lavet en variabel som jeg har kaldt "editor" - den bliver sat til at indeholde vores "iframe" - det kan du se i den første linje i funktionen. Dernæst har jeg sat "contentWindow.document.designMode" til "on" på vores iframe, det betyder at vi nu kan skrive i iframet. Det kan du afprøve ved at klikke i iframet, så det bliver sat i fokus, nu kan du skrive på tastaturet. FORMATERING AF TEKST Nu skal vi igang med at lave nogle knapper til at formatere den tekst vi skriver i iframet. Til det er der allerede en indbygget funktion i javascript som vi kan bruge til det formål - den funktion hedder "execCommand", execCommand skal have 3 forskellige parametre: "Command" - "T/F" - "Value". Et eksempel er:
Som vil sætte skriftstørrelsen til 2. Den funktion skal vi nu udføre ved tryk på en knap - så vi laver en yderligere funktion med execCommand i indholdet som vi kalder ved tryk på en knap:
Som i kan se har jeg lavet en funktion der hedder "txtCommand" som jeg har givet 2 parametre "command" og "value", "command" er den type vi vil have execCommand til at udføre, f.eks "FontSize" eller "FontName", "value" er den værdi som vores "command" skal have, det kunne f.eks være "2" hvis vi vil have "FontSize" til at være 2. Nu skal vi bare have lavet en knap som udfører den funktion, vi starter med at lave en knap som laver teksten fed (bold).
Nu tænker du nok "Du har ikke givet den nogen værdi" - og det er rigtigt nok, men det er fordi at "Bold, Italic & Underline" kun har een værdi, derfor undlader jeg det. Hvis du indsætter den kode umiddelbart før iframet, skriver noget i iframet, markerer din tekst og trykker på knappen - så kan du se at teksten bliver fed, trykker du på knappen igen forsvinder "fed". Nu viser jeg lige hele koden som den ser ud nu - jeg har tilføjet "Italic" og "Underline".
Allerede nu har vi en lille editor som vi rent faktisk kan bruge til noget, så nu skal vi igang med at udvide den - nu skal vi gøre så vi kan skifte skriftstørrelse, til det skal vi bruge kommandoen "FontSize" som jeg fortalte om tidligere men denne gang skal vi ikke bruge knapper, men en "DropDown" (<select>).
Som i kan se har jeg lavet en <select> menu hvor jeg har sat en eventHandler kaldet "onchange" på - dvs. sige at når <select>"en "changes" udføres txtCommand() med parametrene "FontSize" som "command", og "this.options[this.selectedIndex].value" som "value". "this.options[this.selectedIndex].value" indeholder "value" på den <option> vi har valgt i vores select. Nu har vi kigget lidt på hvordan man manipulerer med teksten, nu kan du selv eksperimentere lidt med hvilke funktioner du synes din editor bør indholde, jeg lægger et link i bunden af artiklen med en oversigt over de forskellige kommandoer du kan bruge. VIS / SKJUL KILDE Alle de kendte editorer har også en "vis kilde" knap, så man kan redigere direkte i koden hvis der er noget som driller. "Hvordan kommer det til at foregå" spørger du måske dig selv om nu - og derfor tager vi lidt teori om hvordan vi laver det. Vi skal have lavet et <textarea> som er identisk med vores "editor" rent udseendemæssigt, derfor skal vi nu bruge den "style.css" som jeg har inkluderet hele tiden. Så vi skal lave en knap som kan "Vise / Skjule" kildekoden. Men allerførst laver vi lige vores CSS dokument:
Som i kan se er det ganske almindelig simpel CSS, men læg mærke til at vi har sat "display: none;" på "#code" som vi vil kalde vores <textarea>. Så nu kan vi roligt gå igang med de ting vi skal bruge, vi starter med at sætte et <textarea> ind lige efter vores iframe.
Nu har vi vores tekstarea, så skal vi bare lave et par knapper og et par funktion, det lyder meget nemt - og det er det også hvis man har lidt "flair" for javascript og lidt logisk sans. 1:Vi skal laven funktion som gør følgende: "Overfører indholdet fra iframet til textareaet" - "Gør iframet usynligt og textareaet synligt". 2: Vi skal lave en funktion som gør det modsatte af den foregående. 3: Vi skal lave 2 knapper til at kalde hver af de to funktioner Nummer 1 Vi laver en funktion som vi kalder "CodeMode" som skal vise os kildekoden, jeg viser lige hvordan den ser ud og forklarer den bagefter:
Linje 1: Vi giver textareae"s "value" indeholder af iframets "innerHTML". Linje 2: Vi gør iframet "usynligt" ved at sætte "display: none;" på det. Linje 3: Vi gør textareaet synligt ved at sætte "display: inline;" på det. Og vores kode til at komme tilbage fra kildekoden ser sådan her ud - den kalder vi "NormalMode":
Så er der ikke mere tilbage en at sætte et par knapper ind som kan udføre de 2 funktioner - her har i hele koden samlet.
AFSLUTNING Nu har du faktisk en ganske simpel WYSIWYG editor som der bare venter på at du fylder nogle flere funktioner på den. Det kunne f.eks være mulighed for at Centere, Højrejustering, Lister, SuperScript osv osv. Og så kan du selvfølgelig også gøre en masse ud af designet, så du til sidst får en rigtig lækker editor. Jeg vil lige påpege at det måske ikke er superkode jeg har valgt at skrive, men det er pga. at alle skal kunne være med og forstå koden, kan man oop osv kan man altid selv omskrive det. Editoren er testet og virker i Internet Eksplorer og Mozilla FireFox Her til sidst er nogle links som jeg lovede i løbet af artiklen: LINKS Oversigt over kommandoer: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp FCK-Editor: http://www.fckeditor.net/ Sidst redigeret 21:36 - 21/01/2007 |
|
Kommentarer
Giv din mening tilkende om denne artikel, eller læs andres.Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
| Nice ;) 5/5 |
Oprettet af:
|
|
HVOR SYGT MAN! Har lige gået og kigget efter en artikel til sådan en editor :O |
Oprettet af:
|
|
Suverent :D Javascript er et genialt sprog, hvis man nu havde lidt evner med Ajax kunne det blive rigtig fedt ;) Sidst redigeret 16:54 - 29/01/2007 |
Oprettet af:
|
|
Fedt nok! God artikel! 5/5 |
Oprettet af:
|
| Nice!! :D |
Oprettet af:
|
| Rigtig fedt 5/5 |
Oprettet af:
|
| Fandeme en god artikel! |
Oprettet af:
|
| 10 tal herfra. :) |
Oprettet af:
|
| Kan man kun lave sådan en editor i Javascript? |
Oprettet af:
|
|
Hvad tænker du på Nikolaj? Altså Word f.eks er jo efter samme koncept, det er bare skrevet i C (Går jeg ud fra) og ikke javascript. Men hvis du mener om man kan lave sådan en f.eks i PHP - så ja det kan man i teorien godt - men det vil godt nok være at voldtage sin server, da man skal have gang i en ordentligt suppe af RegExp og en masse andet grej - så det kan jeg overhovedet ikke anbefale du går igang med :) |
Oprettet af:
|
Side af 2