Discussion :

[guix77]

Bonjour,

J'utilise une toolbox pour quelques éléments d'un CMS maison et j'ai le problème suivant.

Quand le texte dépasse la textarea, une barre de scroll apparaît ce qui est normal. Si je descends un peu dans le texte, suffisamment pour faire scroller la textarea vers le bas, quand j'utilise la toolbox pour par exemple mettre en gras la textarea scrolle tout à son début.

C'est le même comportement sur pas mal de toolbox que j'ai vu, dont celle de ce forum.

Si on appuie sur une touche, la textarea rescrolle au bon endroit donc la position du curseur semble "enregistrée", mais j'aimerais que cela se fasse automatiquement...

Merci à vous !

le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
/**
 * This class is able to manage BBCodes
 */
TextArea = function (name) {
    this._init(name);
}
 
/**
 * TextArea's constructor
 */
TextArea.prototype._init = function (name) {
	this.name = name;
	this.textarea = document.getElementById(this.name);
}
 
/**
 * The effective tag operation
 */
TextArea.prototype.tag = function (bStart,bEnd) {
	this.textarea.focus();
	if (typeof(document.selection) != 'undefined') {
		return this.tagIE(bStart,bEnd);
	} else {
		return this.tagGecko(bStart,bEnd);
	}
}
 
TextArea.prototype.tagIE = function (bStart,bEnd) {
	var range = document.selection.createRange();
	var insText = range.text;
	range.text = bStart + insText + bEnd;
	range = document.selection.createRange();
	if (insText.length == 0) {
		range.move('character', -(bEnd.length));
	} else {
		range.moveStart('character', bStart.length + insText.length + bEnd.length);
	}
	range.select();
}
 
TextArea.prototype.tagGecko = function (bStart,bEnd) {
	var start = this.textarea.selectionStart;
	var end = this.textarea.selectionEnd;
	var insText = this.textarea.value.substring(start, end);
	this.textarea.value = this.textarea.value.substr(0, start) + bStart + insText + bEnd + this.textarea.value.substr(end);
	var pos = insText.length ? start + bStart.length + insText.length + bEnd.length : start + bStart.length;
	this.textarea.selectionStart = pos;
	this.textarea.selectionEnd = pos;
}
 
/**
 * Automatically tag start and end by using a simple open/close tag
 */
TextArea.prototype.simpleTag = function (tag) {
	this.tag('['+tag+']','[/'+tag+']');
}

la toolbox simplifiée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<span id="toolbox">
 <input type="button" value="b" onclick="t_content.simpleTag('b');" />
</span>

initialiser la textarea :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
t_content = new TextArea('c_content');

[marcha]

Salut,

Il te faut sauver les positions des scrollbars avant la modification
et les remettre ensuite.

Modifie ta fonction simpleTag ainsi,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
TextArea.prototype.simpleTag = function (tag) {
	var sl = this.textarea.scrollLeft;
	var st = this.textarea.scrollTop;
	this.tag('['+tag+']','[/'+tag+']');
	this.textarea.scrollLeft = sl;
	this.textarea.scrollTop = st;
}

J'ai testé sur FF, mais pas sur IE

[guix77]

Ca fonctionne très bien !
Je n'ai pas testé non plus sur autre chose que Firefox.

Merci beaucoup