Tags:    javascript

Oversigt

1. Indledning
2. Aktive formatering
3. Menu-klasse
...3.1. Indikation af formatering
4. Aktive skrift-type?
5. Afslutning

1. Indledning

Denne artikkel er 2. del af 3, omkring WYSIWYG tekst redigering i JS. Hvis du lige har læst første artikel i rækken, vil det evt. være en god ide lige at sætte dig lidt ind i hvordan de forskellige kommandoer virker osv., så du har et bedre overblik over formattering af teksten. Det gør det også lettere at forstå hvad det er, der sker i denne artikel, så det hele ikke bare bliver Copy-Paste

2. Aktive formatering

For at vise den aktive formatering er der 2 nye funktioner, som vi kommer til at beskæftige os med: document.queryCommandState og document.queryCommandValue.

Det første vi skal gøre for at kunne gøre os nogle forhåbninger om at vise den aktive formatering er, at opfange 2 af editorens events: OnKeyDown og OnClick, så formateringen opdaters, når brugeren ændrer cursorens position.
Det lyder i sig selv meget simpelt, men er faktisk lidt sværere end som så, hvis ikke man ved hvordan det skal gøres.:

[i]// Tilføj dette i bunden af RichEdit-constructoren[/i]
if(document.attachEvent) {
  this.richEdit.document.attachEvent('onclick', function(){RichEdit.prototype.indicateStyle(sParent);});
  this.richEdit.document.attachEvent('onkeydown', function(){RichEdit.prototype.indicateStyle(sParent);});
} else if(document.addEventListener) {
  this.richEdit.document.addEventListener('click', function(){RichEdit.prototype.indicateStyle(sParent);}, false);
  this.richEdit.document.addEventListener('keydown', function(){RichEdit.prototype.indicateStyle(sParent);}, false);
}

Som i kan se, skal eventet ikke tilføjes direkte til iframen, men til iframens content-document, som vi tilgår via this.richEdit.document (Kan i huske, at vi satte this.richEdit til iframens content-window i sidste artikel? )
Desuden skal der benyttes to forskellige funktioner til at tilføje eventet attachEvent virker i IE og addEventListener virker i FF.

Nu skal vi så have lavet selve indikations funktionen, hvilket vi gør (som tidligere nævnt) ved at benytte document.queryCommandState funktionen.
Det første vi gør er, at oprette et array, som indeholder de former for formatering, som editoren kan tilføje (Undtagen f.eks. skrift-type, -størrelse, tekst-farve og andre ting, som kan få angivet bestemte værdier og ikke bare til/fra).
I vores tilfælde fra sidste gang skal vi altså kun have fat i Bold, Italic og Underline:

RichEdit.prototype.indicateStyle = function(sEditor) {
  [i]// Lav en variabel, som kan håndtere editoren[/i]
  var oEditor = document.getElementById(sEditor).contentWindow.document;

  [i]// Lav et array, som indeholder de former for formatering, som editoren understøtter[/i]
  var aStyles = ["Bold", "Italic", "Underline"];

  [i]// Løb arrayet igennem, og find ud af hvilke af formateringerne der er hhv. til/fra.[/i]
  var sRes = "";
  for(var i = 0; i < aStyles.length; i++) {
    if(oEditor.queryCommandState(aStyles[ i]))
      [i]// Den pågældende formatering er slået til - Normalt ville vi give en bestemt baggrund til knappen, men det kommer vi til senere..[/i]
      sRes += aStyles[i ] + ": Til\\n";
    else
      [i]// Den pågældende formatering er ikke slået til[/i]
      sRes += aStyles[i ] + ": Fra\\n";
  }

  // Vis resultatet
  alert(sRes);
}

Som du kan se, så er det pt. en ret ubrugelig måde vi viser den aktive formatering på, da det som regel vil genere mere end det vil gavne, at få en pop-up, med den aktive formatering hver gang man skriver et bogstav.

Vi mangler nu bare at tilføje indikationen af aktive formatering til applyStyle funktionen, som vi lavede sidst:

[i]// Tilføj dette i bunden af applyStyle-funktionen[/i]
RichEdit.prototype.indicateStyle(sEditor);

Lad os derfor gå videre, og se på en ny måde at bygge menuen op på.

3. Menu-klasse

For at få en smartere måde at vise den aktive formatering på, vil vi være nødsagede til at opbygge en ny menu - Personligt foretrækker jeg en menu, som består af billeder, og jeg vil derfor tage udgangspunkt i en sådan i dette eksempel. Jeg vil dog lade det være op til jer selv at udforme billederne til menuen, eller i kan benytte standard-ikonerne, som i kan downloade her fra udvikleren.dk (http://www.udvikleren.dk/redirect.php?id=7&mode=download).
For at min form for indikation skal virke, er det vigtigt at i bruger dem som .gif-billeder med gennemsigtig baggrund!

Men lad os da komme i gang - Først skal vi finde ud af hvordan vi vil angive hvilke knapper der skal være i menuen, og hvordan den skal integeres på siden - Jeg har valgt at oprette en <div id="EditorMenu"></div>, umiddelbart over editoren's div-tag, og benytte mig af et array til at definere knapperne:

function Menu(sParent, sEditor, aButtons) {
  [i]// Lav en variabel til at håndtere det div-tag, som knapperne skal "puttes ind i"[/i]
  var oParent = document.getElementById(sParent);

  [i]// Opret et array, som senere kan bruges til at håndtere knapperne med[/i]
  this.aButtons = new Array();

  [i]// De styles, som knapperne skal have ved de forskellige stadier[/i]
  this.aStandard = {"background":"none"}
  this.aOver = {"backgroundColor":"#0000FF"}
  this.aDown = {"backgroundColor":"#00FF00"}
  this.aActive = {"backgroundColor":"#FF0000"}

  [i]// Lav en knap for hvert felt i aButtons arrayet[/i]
  for(var i = 0; i < aButtons.length; i++) {
    [i]// Lav knappen[/i]
    var oBtn = document.createElement('img');
    oBtn.src = aButtons[i ][0];

    [i]// Gem den handling, som knappen skal udføre[/i]
    oBtn.sAction = aButtons[i ][1];

    [i]// Tilføj styles, som knappen benytter ved de forskellige stadier
    // - Hvis denne aktiveres, så bliver aActive sat som aStandard og
    // aDown sat som aOver & aDown.[/i]
    oBtn.aStandard = this.aStandard;
    oBtn.aOver = this.aOver;
    oBtn.aDown = this.aDown;

    [i]// Indiker det aktive stadie (aStandard)[/i]
    oBtn.sActive = "aStandard";

    [i]// Line-back til denne klasse, så vi kan kontakte den igen,
    // når knappen aktiveres, og kan hente de nye styles[/i]
    oBtn.oOwner = this;

    [i]// Tilføj events[/i]
    if(document.attachEvent) {
      oBtn.attachEvent('onmouseover', Menu.prototype.mouseOver);
      oBtn.attachEvent('onmouseout', Menu.prototype.mouseOut);
      oBtn.attachEvent('onmousedown', Menu.prototype.mouseDown);
      oBtn.attachEvent('onmouseup', Menu.prototype.mouseUp);
      oBtn.attachEvent('onclick', function(){Menu.prototype.click(sEditor);});
    } else if(document.addEventListener) {
      oBtn.addEventListener('onmouseover', Menu.prototype.mouseOver);
      oBtn.addEventListener('onmouseout', Menu.prototype.mouseOut);
      oBtn.addEventListener('onmousedown', Menu.prototype.mouseDown);
      oBtn.addEventListener('onmouseup', Menu.prototype.mouseUp);
      oBtn.addEventListener('onclick', function(e){Menu.prototype.click(e, sEditor);});
    }

    [i]// Tilføj en variabel til at håndtere knappen med i this.aButtons[/i]
    this.aButtons.push(oBtn);
  }
}

Menu.prototype.mouseOver = function(e) {
  [i]// Sørg for at e (event) er defineret[/i]
  if(!e) var e = window.event;

  [i]// Lav en variabel, som kan håndtere den knap, som udløste eventet[/i]
  if(e.srcElement) var oSrc = e.srcElement;
  else if(e.target) var oSrc = e.target;

  [i]// Opdater layoutet af knappen[/i]
  for(var s in oSrc.aOver) oSrc.style[s] = oSrc.aOver[s];
}

Menu.prototype.mouseOut = function(e) {
  [i]// Sørg for at e (event) er defineret[/i]
  if(!e) var e = window.event;

  [i]// Lav en variabel, som kan håndtere den knap, som udløste eventet[/i]
  if(e.srcElement) var oSrc = e.srcElement;
  else if(e.target) var oSrc = e.target;

  [i]// Opdater layoutet af knappen[/i]
  for(var s in oSrc.aStandard) oSrc.style[s] = oSrc.aStandard[s];
}

Menu.prototype.mouseDown = function(e) {
  [i]// Sørg for at e (event) er defineret[/i]
  if(!e) var e = window.event;

  [i]// Lav en variabel, som kan håndtere den knap, som udløste eventet[/i]
  if(e.srcElement) var oSrc = e.srcElement;
  else if(e.target) var oSrc = e.target;

  [i]// Opdater layoutet af knappen[/i]
  for(var s in oSrc.aDown) oSrc.style[s] = oSrc.aDown[s];
}

Menu.prototype.mouseUp = function(e) {
  [i]// Sørg for at e (event) er defineret[/i]
  if(!e) var e = window.event;

  [i]// Lav en variabel, som kan håndtere den knap, som udløste eventet[/i]
  if(e.srcElement) var oSrc = e.srcElement;
  else if(e.target) var oSrc = e.target;

  [i]// Opdater layoutet af knappen[/i]
  for(var s in oSrc.aOver) oSrc.style[s] = oSrc.aOver[s];
}

Menu.prototype.click = function(e, sEditor) {
  [i]// Sørg for at e (event) er defineret[/i]
  if(!e) var e = window.event;

  [i]// Lav en variabel, som kan håndtere den knap, som udløste eventet[/i]
  if(e.srcElement) var oSrc = e.srcElement;
  else if(e.target) var oSrc = e.target;

  [i]// Kald funktionen til at opdatere layoutet af teksten[/i]
  RichEdit.prototype.applyStyle(sEditor, oSrc.sAction);
}

Puh ha, det var en længere omgang, men jeg håber at i kan følge tanke gangen i det!
Nu skal vi så bare have afgjort hvordan man opretter klassen, hvilket er meget simpelt:

[i]// Tilføj dette til bunden af RichEdit[/i]
document.getElementById(sParent).oMenu = new Menu("EditorMenu", "Editor", [["Stien/Til/Billederne/Bold.gif", "Bold"], ["Stien/Til/Billederne/Italic.gif", "Italic"], ["Stien/Til/Billederne/Underline.gif", "Underline"]]);

3.1. Indikation af formatering

For nu at indikere formateringen på knapperne skal vi nu tilbage til indicateStyle funktionen - Nu skal den ikke længere lave en pop-up, men ændre aStandard, aOver og aDown variablerne på knapperne, så den aktive formatering bliver vist:

RichEdit.prototype.indicateStyle = function(sEditor) {
  [i]// Lav en variabel, som kan håndtere editoren[/i]
  var oEditor = document.getElementById(sEditor).contentWindow.document;

  [i]// Lav et array, som indeholder de former for formatering, som editoren understøtter
  // Denne gang laver vi det to-dimensionelt. Det første felt angiver hvilken
  // Formateringstype vi snakker om (Bold, Italic, Underline osv.), og den
  // Næste angiver hvilket nummer i rækken af knapper, den pågældende
  // knap er (starter med 0!).[/i]
  var aStyles = [["Bold", 0], ["Italic", 1], ["Underline", 2]];

  [i]// Løb arrayet igennem, og find ud af hvilke af formateringerne der er hhv. til/fra.[/i]
  var sRes = "";
  for(var i = 0; i < aStyles.length; i++) {
    if(oEditor.queryCommandState(aStyles[ i][0])) {
      [i]// Den pågældende formatering er slået til[/i]
      oEditor.oMenu.aButtons[aStyles[ i][1]].aStandard = oEditor.oMenu.oActive;
      oEditor.oMenu.aButtons[aStyles[ i][1]].aOver = oEditor.oMenu.oDown;
      oEditor.oMenu.aButtons[aStyles[ i][1]].aDown = oEditor.oMenu.oDown;
    } else
      [i]// Den pågældende formatering er ikke slået til[/i]
      oEditor.oMenu.aButtons[aStyles[ i][1]].aStandard = oEditor.oMenu.oStandard;
      oEditor.oMenu.aButtons[aStyles[ i][1]].aOver = oEditor.oMenu.oOver;
      oEditor.oMenu.aButtons[aStyles[ i][1]].aDown = oEditor.oMenu.oDown;
  }
}

Som i kan se, er også dette relativt simpelt at gøre, og menuen burde nu virke fuldt ud - med indikation af aktiv formatering
Hvis i vil tilføje flere formateringer, er det bare at tilføje dem i arrays'ne.

4. Aktive skrift-type?

Ganske kort - Hvis du vil finde den aktive skrift-type, -størrelse, -farve osv., hvor værdierne kan være andet en til/fra, skal du bruge document.queryCommandValue til at få fat i værdierne, men det vil jeg ikke komme nærmere ind på her - Det må du selv fifle med

5. Afslutning

Det var alt for denne gang..
Editoren er ikke længere så simpel, og du kan nu give den et langt flottere design end før, da du har mulighed for selv at designe knapperne..

Min editor ser indtil videre sådan ud:



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