texarea - Selection, emplacement

Version imprimable

22/10/2008, 17h26
djibril

texarea - Selection, remplacement, bbcodes

Bonjour,

J'ai un texarea dans une page et je souhaiterais faire le même principe que sur ce forum par exemple.
Comment récupérer le texte sélectionné par l'utilisateur dans un textarea et par la suite le remplacer.
Ex : lien italique. Je sélectionne le texte toto et clique sur le lien => toto remplacé par toto.

Je fouille sur google mais ne trouve rien

Merci
23/10/2008, 00h21
bigboomshakala

:arrow: :king:
23/10/2008, 10h16
djibril

Personne n'a de solution?
23/10/2008, 10h21
bigboomshakala

Citation:

Envoyé par djibril

Personne n'a de solution?

:cry: mon smiley est cliquable (j'étais d'humeur taquine hier soir).
regarde getSelectionStart et getSelectionEnd
23/10/2008, 11h22
djibril

Ok merci, j'ai pas fait gaffe, je regarde ça

Bon je comprends rien, quelqu'un aurait il un exemple basique.

Merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>test</title>
  <!--
<script language="JavaScript">
 
 
/******************************************************************/
//	getSelectionStart
//  renvoie la position de début de la sélection dans une zone
//  de texte (input, textarea)
/******************************************************************/
function getSelectionStart(o)
{
	if ( typeof o.selectionStart != 'undefined' )
		return o.selectionStart;
 
	// IE Support
	o.focus();
	var range = o.createTextRange();
	range.moveToBookmark(document.selection.createRange().getBookmark());
	range.moveEnd('character', o.value.length);
	return o.value.length - range.text.length;
}
/******************************************************************/
//	getSelectionEnd
//  renvoie la position de fin de la sélection dans une zone
//  de texte (input, textarea)
/******************************************************************/
function getSelectionEnd(o)
{
	if ( typeof o.selectionEnd != 'undefined' )
		return o.selectionEnd;
 
	// IE Support
	o.focus();
	var range = o.createTextRange();
	range.moveToBookmark(document.selection.createRange().getBookmark());
	range.moveStart('character', - o.value.length);
	return range.text.length;
}
</script>
-->
  </head>
  <body>
  <form name="formulaire">
<textarea name="test" rows="12" cols="20"> dfhgjdfh   dkfg 
kdgh m 
d d</textarea>
<input type="submit" name="input" onclik="javascript:???">
 
</form>
  </body>
</html>

voici la partie insertion des balises

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Nouvelle page 1</title>
<style type='text/css'>
.strong {font-weight:bold;}
.red {color:red;}

</style>


<script type="text/javascript">
function swapBalise(balise,classe,texte){

var Reg=(document.all)?new RegExp("[\[]b[\]](.+)[\[]\/b[\]]","gi"):/\[b\](.+)(\[\/b\])/gi;

//varReg1=new RegExp('<span class="strong">'+/$1/+'</span>')

//var Reptexte=texte.replace( Reg,'<span class="'+classe+'">$1</span>')
var Reptexte=texte.replace( Reg,'<span class="'+classe+'">$1</span>')

alert(Reptexte)
return Reptexte;
}

function check(val){
var reg=(document.all)? new RegExp("[\[]{1}url=((.)*?(\s?))[\]]","gi"):/\[url=([\s\S]*(\s?))\]/gi;
var Reptexte=val.replace( reg,'<a href="$1">$1</a>')

alert(Reptexte)
}

function surbrillance(ou,quoi){
var StrReg='('+quoi+')(?=.<)'
var Reg=new RegExp(StrReg,"gi")
ou.innerHTML= ou.innerHTML.replace(Reg,'<span style="background-color:yellow;">$1</span>')
}



</script>


</head>

<body>
<div onclick="this.innerHTML=swapBalise('b','strong',this.innerHTML)" > bonjour jean  </div>
<div onclick="this.innerHTML=swapBalise('r','red',this.innerHTML)" > bonjour [r]jean[/r]  </div>
<div onclick="this.innerHTML=surbrillance(this,'red')" > red bonjour red rediriger quoi  </div>
<div id="zone">bonjour tout <span class="tout">le monde</span></div>  
<input type='button' value="go" onclick="surbrillance(document.getElementById('zone'), 'tout')" style="width:300px">
</body>

</html>

reste à y adjoindre la partie selection fais une recherche avec createRange et selectionStart

04/11/2008, 17h57
djibril

Bon J'ai trouvé une solution toute faite que j'ai adapté à mes besoins.

Merci