Archief - JavaScript: insert tags in textarea

[

[DZM]TheOne

Legacy Member

• 20 apr 2005

• #1

waarschijnlijk een makkelijke vraag voor de doorgewinterde javascript coder, maar ik gebruik zelden javascript

na gegoogled te hebben stel ik m'n vraag hier even:

- ik geef in een textarea/textbox iets in
- ik selecteer een stuk van die tekst
- ik klik op een knop/link/image "italic"
- de geselecteerde tekst moet tussen tags komen te staan

hoe realiseer ik dit cross-browser (ie, ff, opera, mac)?

tnx n advnce

O

Obliv`

Legacy Member

• 20 apr 2005

• #2

zou ik ook wel is willen weten

F

Fr3aK

Legacy Member

• 20 apr 2005

• #3

http://lists.evolt.org/archive/Week-of-Mon-20020520/113314.html

Ge kunt het ook in de code van phpBB gaan opzoeken

[

[DZM]TheOne

Legacy Member

• 20 apr 2005

• #4

Fr3aK zei:

http://lists.evolt.org/archive/Week-of-Mon-20020520/113314.html

Ge kunt het ook in de code van phpBB gaan opzoeken

Klik om te vergroten...

die code is IE only

ik heb in de javascript files van verschillende forums zitten neuzen maar m'n javacript kennis is tot dusver ontoereikend gebleken ...

ad:

L

Lashknife

Legacy Member

• 20 apr 2005

• #5

zoek op "htmlarea" en "rich text area"

http://www.richarea.com/ -> links in menu "demo"

E

EryciusPuteanus

Legacy Member

• 20 apr 2005

• #6

FCK Editor is één van de beste oplossingen daarvoor.

[

[DZM]TheOne

Legacy Member

• 21 apr 2005

• #7

dank voor de respons maar ik zoek dus geen kant-en-klare webeditor, enkel de manier om vóór en nà m'n geselecteerde tekst iets in te voegen door op een knop/link/image te klikken en dit adhv javascript

(FCKeditor ziet er wel interessant uit eigenlijk)

s

servi

Legacy Member

• 21 apr 2005

• #8

deze methode werkt in IE en mozilla ( opera weet ik niet zeker )

Code:

function voeg_toe(begintag,eindtag) {
	if ( eindtag.length < 1 )
	   eindtag     = '';
	
	d = document.getElementById('naamberichtbox');

	// IE-engine
	if ( document.selection) {
		d.focus();
		selectie = document.selection.createRange();
		selectie.text  = begintag+selectie.text+eindtag;

	// MOZ-engine
	} else if ( d.selectionStart || d.selectionStart == '0' ) {
		startpos = d.selectionStart;
		eindpos  = d.selectionEnd;
		d.value  = d.value.substring(0,startpos) + begintag + d.value.substring(startpos,eindpos) + eindtag + d.value.substring(eindpos,d.value.length);
	// ANDERE
	} else {
		d.value  += begintag;
	}
}

een knop om iets in het vet te zetten ziet er dan bijvoorbeeld zo uit :
<input type="button" id="vet" style="font-weight : bold" value="vet" onclick="voeg_toe('','')" />

[

[DZM]TheOne

Legacy Member

• 21 apr 2005

• #9

momenteel geen tijd om te testen maar alvast hartelijke dank voor de hulp
zal het binnenkort eens testen

d

dJeez

Legacy Member

• 22 apr 2005

• #10

[DZM]TheOne zei:

dank voor de respons maar ik zoek dus geen kant-en-klare webeditor, enkel de manier om vóór en nà m'n geselecteerde tekst iets in te voegen door op een knop/link/image te klikken en dit adhv javascript

(FCKeditor ziet er wel interessant uit eigenlijk)

Klik om te vergroten...

Het is Open Source, bekijk dus de source ervan en je hebt de cross-browser oplossing...

L

Lashknife

Legacy Member

• 22 apr 2005

• #11

heh, dacht ook dat het wel duidelijk zou zijn dat met de demo dat ik postte je wel eens kon gaan rondsnuffelen in hun code voor stukjes zodat je zelf een op maat geschaalde reconstructie voor jezelf zou kunnen maken, niet om letterlijk over te nemen (open source of niet, plain code is niet copyrighted en methodes en properties van elementen ook niet, das pure syntax)

[

[DZM]TheOne

Legacy Member

• 22 apr 2005

• #12

m'n dank was bedoeld voor iedereen in deze threat

ik ben idd de aangehaalde webeditors en code aan het bekijken

ik ben wel programmeur van opleiding maar m'n javascript kennis is beperkt
de voorbeeldfunctie van servi helpt me dus sneller vooruit dan de vele javascript functies in de virtuele hooiberg van de bovenstande projecten

nogmaals dank aan iedereen voor de hulp