34
Tags:
javascript
Skrevet af
Bruger #4575
@ 05.10.2005
Oversigt
1. Introduktion
...1.1. Hvad kan WYSIWYG?
2. Tekst redigering
...2.1. Koden
3. WYSIWYG
...3.1. Ændring af layout
...3.2. Kommandoer
4. Afslutning
...4.1. De følgende artikler
1. Introduktion
Hvis du aldrig før har set noget til JavaScript, så vil jeg anbefale dig at læse nogle artikler omkring JavaScript og prøve lidt selv, så du kan få en ide om hvad JavaScript er, og hvordan det bruges.
Jeg vil desuden skrive koden til editoren i OOP, så det vil også være en god ting, at have styr på inden vi går i gang.
1.1. Hvad kan WYSIWYG
WYSIWYG er en forkortelse for What You See Is What You Get, og betyder som navnet angiver, at man kan redigere et design (eller andre ting), og se præcis hvordan resultatet bliver mens du gør det.
Microsoft's Word er et godt eksempel på en WYSIWYG-tekst editor - Der kan man se præcis hvordan resultatet af din tekst fil vil komme til at se ud, mens du laver den. Det er sådan en editor vi skal forsøge at lave gennem den følgende række af artikler omkring WYSIWYG i JS.
Tekst redigering
Før vi kan komme i gang med at tilføje WYSIWYG-effekten til vores editor, vil det selvfølgelig være nødvendigt at kunne redigere en tekst, og hvordan skal det så gøres?
Der er 2 måder at gøre det på
1) Den simple måde er bare at oprette en <textarea id="editor"></textarea>, men dette er ikke helt hensigtsmæssigt, da det kun vil virke i IE, og vi vil jo gerne også supporte FF. Derfor er der også en anden metode
2) Hvor man opretter en iframe på sin side, og lader brugeren redigere teksten i denne, ved at sætte designMode = "on".
2.1. Koden
Jeg vil i denne artikel tage udgangspunkt i metode 2, da jeg finder det mest hensigtsmæssigt at lave JavaScripts, som minimum virker i både IE og FF (denne metode kan muligvis også virker i Opera, Safari mm., hvis man ændrer hvis dele af koden, men det vil jeg ikke komme mere ind på).
Derfor er det første vi gør, selvfølgelig at oprette en iframe, som vi giver ID'et "Editor":
<iframe id="Editor"></iframe>
Nu skal vi så gøre det muligt for brugerne af systemet, at redigere indholdet af iframen, hvilket vi (som tidligere nævnt) gør ved at sætte designMode = "on" via JavaScript. Jeg vil vælge at oprette en klasse, som kan håndtere alle funktionerne, som vedrører editoren, og opretter derfor klassen
RichEdit:
<script type="text/javascript">
function RichEdit(sEditor) {
[i]// For at editoren skal virke, er det nødvendigt at document.designMode
// og document.getElementById er tilgængelige[/i]
if(document.designMode && document.getElementById) this.bEditable = true;
else this.bEditable = false;
[i]// Hvis vi alligevel ikke kan redigere dokumentet, kan resten af koden
// være ligegyldig.[/i]
if(!this.bEditable) {
alert('Din browser understøtter ikke WYSIWYG-editoren!');
return false;
}
[i]// Opret en variabel til at håndtere iframet, via ID'et angivet i sEditor[/i]
this.richEdit = document.getElementById(sEditor).contentWindow;
[i]// Tjek browser-typen[/i]
if(navigator.userAgent.toLowerCase().indexOf("msie) != -1) {
[i]// Skift designMode til on (i IE)[/i]
this.richEdit.document.designMode = "on";
} else {
[i]// I FF bruger vi en lidt anderledes fremgangsmåde[/i]
document.getElementById(sEditor).contentDocument.designMode = "on";
}
}
function initialize() {
[i]// Husk at angive ID'et på den iframe, som skal indeholde editoren her[/i]
richEdit = new RichEdit('Editor');
}
</script>
...
<body onload="initialize();">
Som du kan se, så er der ikke noget specielt svært ved dette, og nu kan du faktisk redigere teksten i din iframe. Hvis du vil tilføje en standard tekst, kan du tilføje følgende kode umiddelbart før designMode sættes til on
this.richEdit.document.write("Standard tekst!");
Så tror jeg der vidst ikke der er meget mere at sige om denne del af editoren!
3. WYSIWYG
For nu at tilføje layout til vores tekst skal vi selvfølgelig have fat i nogle nye funktioner, og have oprettet nogle knapper, som brugeren kan trykke på for at skifte udseendet af teksten.
Vi gør her brug af execCommand funktionen, for at ændre layoutet af teksten.
3.1. Ændring af layout
Vi skal nu have oprettet en funktion, som kan ændre layoutet af vores tekst, og da vi før oprettet RichEdit-klassen, så kan vi jo lige så godt implementere funktionen i denne
I denne artikel vil jeg kun vise jer hvordan man tilføje
bold,
italic og
underline, og derefter bare give jer en liste over kommandoer, som kan bruges til resten af de ting, som i måtte ønske at kunne ændre i jeres editor.
Men lad os komme i gang med WYSIWYG-funktionerne, først tilføjer vi en funktion til RichEdit-klassen, som kan ændre layoutet af teksten, udfra 2 parametre:
sCommand og
sOption.
sOption vil ikke være relevant for
bold,
italic og
underline funktionerne, da den angiver f.eks. skrift-type el. -størrelse, hvis man vælger disse commands - Men mere om det senere.
RichEdit.prototype.applyStyle = function(sCommand, sOption) {
[i]// Vi sikrer os, at editoren er i fokus, når vi tilføjer layoutet,
// da browseren ellers kan blive forvirret over hvor den skal tilføje
// layoutet.[/i]
this.richEdit.focus();
[i]// Tilføj det ønskede layout[/i]
this.richEdit.document.execCommand(sCommand, false, sOption);
[i]// Og slut af med igen at fokusere editoren, så brugeren kan
// skrive uforstyrret videre.[/i]
this.richEdit.focus();
}
Som i kan se, så er denne funktion i sig selv ret enkel, og tilbage for os er nu bare at tilføje nogle knapper til at ændre layoutet med:
<button onclick="richEdit.applyStyle('bold', '');">Bold</button>
<button onclick="richEdit.applyStyle('italic', '');">Italic</button>
<button onclick="richEdit.applyStyle('underline', '');">Underline</button>
Også denne del er ret enkel, og burde forklare sig selv, så lad os komme videre og se på hvilke kommandoer der ellers er tilgengægelige for at ændre layoutet af teksten:
3.2. Kommandoer
Dette er ikke en komplet liste over kommandoer, kun de mest normalt benyttede funktioner. Vil du se den fulde liste over kommandoer kan du besøge
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp
Kommando: | Option:
--------------------------------------------------
Bold | N/A
Italic | N/A
Underline | N/A
JustifyLeft | N/A
JustifyRight | N/A
JustifyCenter | N/A
JustifyFull | N/A
FontName | Skrift-type (f.eks. Times new roman)
FontSize | Skrift-størrelse (1-7)
InsertOrderedList | N/A
InsertUnorderedList | N/A
Indent | N/A
Outdent | N/A
Superscript | N/A
Subscript | N/A
4. Afslutning
Du kan selv fifle lidt rundt med hvad de forskellige kommandoer gør nu, og indsætte det, som du nu engang finder relevant for din editor.
Det vi har fået lavet indtil nu er stadig på et meget simpelt plan, og der kan implementeres masser af andre relevante ting - Nogle af dem vil vi komme ind på i de følgende artikler omkring WYSIWYG i JS.
Men jeg synes, at denne simple editor er et godt udgangspunkt for at komme videre og lave sin helt egen WYSIWYG-editor - Det er i hvertfald et bedre udgangspunkt end da jeg startede med at lave en textarea, kun for at finde ud af at det kun kunne virke i IE
4.1. De følgende artikler
Jeg har planer om i hvert fald to nye artikler om emnet:
1) Visning af aktive formatering
2) WYSIWYG-kilde skift
Der kan selvfølgelig godt komme flere, hvis jeg finder nye interessante ting om emnet, men indtil videre er dette hvad jeg kan finde af relevante ting omkring WYSIWYG-tekst redigering...
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:
Kommentarer (18)
LOL! Sad lige i går og ledte efter en artikel om det
. Har lige skimmet det igennem og glæder mig til at få læst det hele.
Er der ikke en typo i denne her linje i RichEdit's constructor(Der skulle vel have været en lukkende klamme omkring msie delen ?):
if(navigator.userAgent.toLowerCase().indexOf("msie) != -1) {
Det har du vidst helt ret i - My bad
Er det muligt at hente indholdet af iframet, altså det tekst man har skrevet?
Glimrende artikel
Men hvordan kan man gøre, for at sende indholdet via en form, så teksten f.eks. kan gemmes i en database?
Det kommer i 3. artikel, som jeg indsender inden udgangen af oktober.. Så hav lidt tålmodighed
Helt simpelt kan indholdet hentes med følgende kode: document.getElementById('EditorensID').contentWindow.document.body.innerHTML;
Så smid det ind i en text-areas value ved submit af en form, og så kan i hente det med php/asp eller hvad i måtte ønske..
P.S. er ikke testet endnu!
LasLego! Den kode du snakker om... Hvad skulle den rettes til mere precist?
Jeg kan ikke skrive i iframe'en, men jeg får heller ikke nogen alarm pop up
Den giver mig to fejl:
Linje: 20
Tegn: 65
Fejl: Strengkonstanten er uafsluttet
Linje: 41
Tegn: 1
Fejl: Et objekt var ventet
Har samme problem som Thomas
En rigtig god artikkel egentlig...
Har et bredt område dækket, men syntes der mangler lidt forklaring af de små enkelte funktioner, fx:
if(navigator.userAgent.toLowerCase().indexOf("msie") != +1) {
Så bare lige have haft en lille notits om hvad den egentlig gør...
Men ellers god artikkel, og ser frem til at læse de næste i rækken.
JS er ikke det samme som Javascript...
JS er et sprog microsoft har udviklet efter javascript
Hvad er fejlen her, siden jeg ikke kan redigere i det?
<html>
<head>
<script type="text/javascript">
function RichEdit(sEditor) {
if(document.designMode && document.getElementById) this.bEditable = true;
else this.bEditable = false;
if(!this.bEditable) {
alert('Din browser understøtter ikke WYSIWYG-editoren!');
return false;
}
this.richEdit = document.getElementById(sEditor).contentWindow;
if(navigator.userAgent.toLowerCase().indexOf("msie) != -1) {
this.richEdit.document.designMode = "on";
} else {
document.getElementById(sEditor).contentDocument.designMode = "on";
}
}
function initialize() {
richEdit = new RichEdit('Editor');
}
</script>
</head>
<body onload="initialize();">
<iframe id="Editor"></iframe>
</body>
</html>
Jeg kan heller ikke redigere
Jeg kan ikke rediger i en iframe, selvom jeg laver det som overstående. Er der en som kan vise en samlede kode her, hvor det virker med iframe? (jeg bruger Visual Web Delevoper 2008)
Det eneste man behøver for at kunne lave en wysiwyg er få linjer
<html>
<head>
<script type="text/javascript">
function Init()
{
Editor.document.designMode = 'On';
}
</script>
</head>
<body onload="Init()">
<iframe id="Editor"></iframe>
</body>
</html>
Kopiere dette og sæt det ind så burde du få en boks med ingenting i hvor du kan skrive i
Ikke noget men stadig en wysiwyg editor
!
Emil Melgaard: ...ved godt det er 2½ år siden du skrev det... men har du måske lagt mærke til at når du gemmer en Java-script fil, så bliver den gemt som navn.js? så vil da nok mene at js=java-script =).
- Hvad skulle js ellers stå for?
Du skal være
logget ind for at skrive en kommentar.