JQUERY: weblink toevoegen in textarea

Status
Niet open voor verdere reacties.

phobia

Terugkerende gebruiker
Lid geworden
4 sep 2006
Berichten
1.777
Ik ben zelf een forum aan het knutselen, en dat het is zo goed als klaar.
Maar nu wil ik eigenlijk net zo als hier de gebruiker de mogelijkheid bieden
om een weblink toe te voegen.

Ik gebruik een textarea om het bericht te maken en geef hem weer in een div

Nu lijkt me dat ik dit zou moeten doen met javascript, maar ik heb geen idee hoe ik het in moet voegen in de textarea.
Helemaal mooi zou het natuurlijk zijn dat de gebruiker een stuk text kan selecteren en dat die text de link word.

Kan iemand mij hiermee opweg helpen of heeft 'toevallig' zo'n script liggen.

Alvast thnx voor jullie moeite en hulp
 
Okay, voordat ik begin, een hint: mischien is het handiger om een al bestaand iets te gebruiken (eg. ckeditor), want dit is echt een nachtmerrie qua cross-browser-heid.


Anyway:
Even browser-verschillen aside, je hebt 3 functies nodig: eentje die de huidige caret (ja, zo heet dat knipperende ding waar de letters magisch verschijnen) locatie opvraagt, eentje die op die plek text neer kan zetten, en een die met geselecteerde text om kan gaan. Ohja, en 1tje om de caret-plek ergens neer te forceren.

Nu, om het netjes te houden, hier het idee:
[JS]function insertLink()
{
var plek, url = prompt("geef een link!");
// check of url != null/"" is, bla bla bla

if(erIsTextGeselecteerd() === true)
{
// text geselecteerd, verkrijg deze text en 'replace'* deze met de url string
// ohja, niet _echt_ replace()n, maar positie-wijs replacen.
plek = replaceMagic(url);
}else{
// geen text geselecteerd, dus gewoon bij de caret neerdroppen
plek = caretMagic(url);
}

// niet vergeten: zet de caret op de goede plek!
setCaretLocation(plek);
}[/js][js]function replaceMagic(url)
{
var links = verkrijgMeestLinkerPositieGeselecteerdeText();
var rechts = // you get the idea...

var insert = "<a href='" + url + "'>" + textarea.substring(links, rechts) + "</a>";
// volgens mij kon je ook gewoon selectedText.text gebruiken oid, maar niet zeker.

// verwijder links t/m rechts
textarea.removeFromTo(links, rechts);

voegTextInTextareaToeOpLocatie(links, insert);

return // eh, iets van links + insert.length oid?
}[/js][js]function caretMagic(url)
{
var locatie = verkrijgCaretLocatie();

var str = "<a href='" + url + "'>" + url + "</a>";

voegTextInTextareaToeOpLocatie(locatie, str);

return // locatie + str.length
}[/JS]
Well, dat is het idee. Nu mag je zelf de functies schrijven - en ik raad je aan om een wrapper functie te gebruiken voor de cross-browser-ness van deze dingen (dus: de functie voegTextInTextareaToeOpLocatie werkt EN in normale browsers EN in IE dmv. een if/else oid).


nu, wat je lekker zelf mag doen: een google op javascript (get|set) caret location (zonder de regexp natuurlijk).
 
Laatst bewerkt:
Okey, super thnx

HAHA waar ik al bang voor was wordt het ff een paar uurtje stoeien en knuselen.
Ik had dit al wel verwacht haha laat het nu maar weer gaan sneeuwen en stormen, ik ga de deur toch ff niet uit ;)
 
That Guy thnx voor de tip over ckeditor. Werkt super en ook goed aanpasbaar
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan