[JS] Element uit array verwijderen

[Verwijderd]

Ik ben begonnen met de bouw van een eigen UBB editor. Ik heb een aantal functies, zoals CTRL-B om tekst bold maken en CTRL-U om de onderstrepen. Als de gebruiker de eerste keer CTRL-B intikt, wil ik dat er een b-tag in de editor verschijnt. De gebruiker kan dan de tekst typen die bold moet worden. Als hij nogmaals CTRL-B tikt, moet de /b-tag ingevoegd worden. Ik moet dus in een array bijhouden welke tags open staan. Ik probeerde dat met onderstaande code:

JavaScript:

var txtOpenTags = [];

if (txtOpenTags.inArray('b')) {
  delete txtOpenTags['b'];
  text = '[ /b ]';
}
else {
  txtOpenTags.push('b');
  text = '[ b ]';
}

De array zou er dus als volgt uit kunnen zien:

JavaScript:

txtOpenTags = ['b', 'u'];

De inhoud van de editor zou er dan bv. als volgt uit zien:

code:

Dit is een [ b ]stukje[ /b ] tekst dat ik [ b ][ u ]bold en onderstreept

Door op CTRL-B en CTRL-U te drukken, zou na 'onderstreept' de afsluitende [/b] en [/u] tag ingevoegd moeten worden.

Mijn probleem: ik weet niet hoe ik een array element in javascript kan deleten. Ik heb gezocht via google en kwam op slice, splice en pop, maar hiermee kun je alleen het laatste of eerste element verwijderen. Ik wil graag zelf het element dat verwijderd moet worden, kunnen definieren. Dus probeerde ik "delete txtOpenTags['b'] ipv txtOpenTags.pop(). Maar dit werkt niet. Hoe kan ik wel een gedefinieerde value uit een array halen?

Ik heb spaties gebruikt bij de UBB tags [ b ] en [ u ], omdat de GoT parser anders wat op hol sloeg

[ Voor 5% gewijzigd door Verwijderd op 30-11-2006 22:44 ]

[user109731]

Gewoon splice gebruiken, als in:

JavaScript:

var index = txtOpenTags.indexOf('b');
if (index)
  txtOpenTags.splice(index, 1);

Edit: je geeft dus als eerste argument de index op, dan het aantal elementen dat je wilt verwijderen, en daarna kun je optioneel elementen opgeven die je wilt inserten.

Voor IE zul je nog zoiets nodig hebben, aangezien die geen Array.indexOf ondersteunt:

JavaScript:

if (!Array.indexOf) {
  Array.prototype.indexOf = function(value) {
    for(var i=0; i<this.length; i++) {
      if (this[i] === value)
        return i;
    }
    return false;
  }
}

Edit2: je kunt ook een associatieve array met booleans gebruiken, dan kun je het gewoon zo doen:

JavaScript:

openTags['b'] = false;

[ Voor 76% gewijzigd door user109731 op 30-11-2006 23:09 ]

[Blaise]

Als de gebruiker de eerste keer CTRL-B intikt, wil ik dat er een b-tag in de editor verschijnt. De gebruiker kan dan de tekst typen die bold moet worden. Als hij nogmaals CTRL-B tikt, moet de /b-tag ingevoegd worden.

Wat nou als de gebruiker een stukje tekst typt na de b tag en vervolgens een stukje invoegt vóór de b tag en daar iets bold wil? Dan krijg je daar een /b in plaats van b.

Misschien beetje mierenneukerig, maar heb je daar iets voor bedacht?

[Verwijderd]

@Grote Prutser - je idee van een associatieve array werkt perfect, dank je!

JavaScript:

var txtOpenTags = {'b' : false, 'u' : false}
text = (txtOpenTags['b'] == false) ? '<b>' : '</b>';
txtOpenTags['b'] = (txtOpenTags['b'] == false) ? true : false;

Blaise schreef op donderdag 30 november 2006 @ 23:10:
[...]
Wat nou als de gebruiker een stukje tekst typt na de b tag en vervolgens een stukje invoegt vóór de b tag en daar iets bold wil? Dan krijg je daar een /b in plaats van b.

Misschien beetje mierenneukerig, maar heb je daar iets voor bedacht?

Nee, nog niet. Maar ik denk ook niet dat je daar rekening mee kunt houden. Op die manier zijn er honderden gevallen te verzinnen waarin het fout kan gaan. Misschien is het dan toch beter om na de b tag meteen de /b tag in de voegen, net als op GoT?

[Blaise]

Nee, nog niet. Maar ik denk ook niet dat je daar rekening mee kunt houden.

Je kan op basis van de plek van de cursor in het tekstveld nagaan of er op die plek nog tags open staan en als er iets openstaat een /b invoeren en anders een b. Dat betekent wel dat je steeds de plek van de cursor moet opslaan bij elke handeling die je doet. (zie GoT source)

Ik heb het overigens bij een website met prompt() opgelost, maar daar ben ik niet tevreden mee. Een prompt popup is opdringerig en bestaat maar uit één regel. Ik ben daarom geïnteresseerd in alternatieven.

[Verwijderd]

Ik heb er ook al aan gedacht om op een CTRL-B de string <b></b> in te voeren (net als op GoT), maar dan met de cursor 4 plaatsen teruggezet, zodat je meteen tussen de tags kunt typen en niet eerst met de pijltjes 4 stappen naar links moet gaan. Met andere woorden, als ik na "stukje" op CTRL-B tik, krijg ik dit in mijn textarea:

code:

Dit is een stukje <b>|</b>

Zoals je ziet staat de cursor al tussen de bold-tags in, zodat je meteen je woord kunt tikken. Nadeel: je hebt alsnog de pijltjestoetsen nodig om uit de bold tags te springen als je "normaal" verder wilt tikken. Wat dat betreft is een prompt nog niet zo'n gek idee: CTRL-B > ik tik mijn vette woord in de prompt > klik OK > woord wordt ingevoegd tussen bold-tags met de cursor er meteen achter. Ik kan dus meteen verder tikken. Qua "flow" wel de mooiste methode (maar misschien uit te breiden van prompt naar divje met "eigen" prompt window)...

ik gebruik trouwens <b> tags in plaats van met [rechte] haken, omdat de parser dan soms raar doet

[ Voor 18% gewijzigd door Verwijderd op 01-12-2006 00:48 ]

[Blaise]

De manier van opmaak toevoegen moet voor de gebruiker zo intuïtief mogelijk zijn zodat onervaren mensen niet de mist ingaan. Met pijltjestoetsen over de </b> stappen is daarom niet handig, hoewel het voor ervaren gebruikers misschien wèl fijn werkt.

Een custom prompt met textarea zou ik eerder voor kiezen. Als de gebruiker geen tekst heeft geselecteerd krijgt de gebruiker een prompt, als de gebruiker wel tekst hebt geselecteerd wordt de geselecteerde tekst bold.

Toch zit ik te twijfelen. BB tags zelf zijn mijns inziens niet gebruiksvriendelijk genoeg, dus ik zit er serieus over te denken om de BB tags te droppen.

Voor BB komt dan een lichtgewicht WYSIWYG systeem in de plaats, dat cross-browser werkt in vrijwel alle moderne browsers, met een fallback naar een gewone textarea voor oude en niet-javascript browsers. Dat heeft op zijn beurt weer het nadeel dat je enorm veel code plaatst achter iets simpels waardoor je bijna altijd wel te maken hebt met bugs. Een tweede nadeel is dat je serverside de HTML enorm goed moeten checken op XSS exploits en andere malafide code.

Maar goed, misschien denk ik nu wel heel erg ver door over een probleem dat eigenlijk vroeg om een simpele oplossing.

[Verwijderd]

Mijn idee is sowieso om een eenvoudige WYSIWYG editor te schrijven en de gebruikers de keuze te geven tussen de textarea-editor met UBB codes of de WYSIWYG editor, afhankelijk van wat men gewend is. Misschien vorm ik de UBB editor wel om tot HTML editor. Ervaren gebruikers kunnen dan zelf HTML intikken in de editor, met handige hulp-functies zoals een prompt om een bold woord in te tikken. De meeste, lees: technisch niet onderlegde, gebruikers zullen de WYSIWYG gebruiken.