Nullbeta code: spelen met scripting

CMS Editor: do it yourself

De beste stuurlui ...

De afgelopen tijd heb ik me hier en daar wat minder positief uitgelaten over de code die content management systemen nogal eens produceren. Om voor de verandering eens een stapje verder te gaan dan alleen wat wild in de rondte te bijten, ga ik zelf eens aan de slag met het knutselen van een editor. Kijken of ik het beter kan. Te bestempelen als een typisch gevalletje het wiel opnieuw uitvinden? Niet helemaal. Ik zie het nut wel in van deze exercitie. Het is een prima praktische inventarisatie van de (on)mogelijkheden van manipulatie van het Document Object Model.

Functionaliteit

Op basis van javascript wil ik een editor in elkaar zetten die in elk geval de volgende functionaliteit biedt:

Small print

Let op: momenteel is dit prulletje alleen geschikt voor Mozilla Firefox. Support voor de quirks van Internet Explorer volgt wellicht later. Verder moet je weten dat het geheel er niet al te gelikt uitziet. Verwacht geen verleidelijke knoppen of een consistent doorgevoerde interface. Voordat ik hier aandacht aan besteed wil mijn tijd voornamelijk steken in het bouwen van de functionaliteit.

Dat gezegd hebbende ... een allereerste beginnetje van de editor is inmiddels via deze website te misbruiken.

Bevindingen

  1. Het grootste struikelblok dat ik tot nu toe ben tegengekomen is het omvormen van een tekstselectie in een link. Het is me niet gelukt om dit te doen zonder gebruik te maken van de innerHTML eigenschap van een element.
  2. Ook leuk. Als een paragraaf gewijzigd wordt en de veranderingen worden teruggeschreven, verliezen de childNodes hun eventListener hooks.

Leeuwen en beren

Er zijn vast plenty blaartrekkende zaken waar ik tegenaan ga lopen bij het bouwen van de javascript editor.

Eén ding waar ik mee om dien te gaan is het muteren van een eerder ingevoegde link. In de editor selecteer je een element door erop te klikken. Maar bij een link opent dat natuurlijk standaard de url die erachter verborgen zit. Dus er moet een stukje code komen die ervoor zorgt dat de klik niet verder bubbelt dan voor het muteren van de informatie nodig is. Hmm. Misschien ook voorzien in een keuze of je de link wilt volgen of het element wilt muteren.