Wysiwyg selectionStart vaut undefined dans FF4

Version imprimable

Bonjour à tous,

J'essaie en ce moment de créer un wysiwyg, je présume que c'est un sujet récurrent et peu utile contenu du nombre d'éditeur déjà disponible sur l'internet, mais toutefois intéressant.

J'ai comment à faire ceci - javascript:
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 wysiwyg.prototype.addCallback = function() { var object = this; for(var i in this.commands_edit) { this.getNod(i).onclick = function() { object.editText(); }; } } wysiwyg.prototype.editText = function() { var textarea = this.getNod('edit_'+this.name); var selection; var selection_start; var selection_end; var pre_str; var ap_str; var retour; textarea.focus(); var value = textarea.innerHTML; if(typeof textarea.selectionStart != 'undefined') { alert("ici"); selection_start = textarea.selectionStart; selection_end = textarea.selectionEnd; pre_str = value.substring(0 , selection_start); ap_str = value.substring(selection_end, textarea.textLength ); selection = value.substring(selection_start, selection_end); retour = pre_str + '<i>' + selection + '</i>' + ap_str; } this.getNod('edit_'+this.name).innerHTML = retour }
html:
Code:

1 2 3 4 5 6 7 <div id="wysiwyg"> <span id="g" class="g">g</span> <span id="i" class="i">i</span> <input id="description" type="hidden" value="" name="description"> <div id="edit_description" class="descrip" contenteditable="true" spellcheck="false"></div> </div>
Quand je clic sur l'un des "span" je vais bien à la méthode editText mais "textarea.selectionStart" retourne "undefined".

Je me suis inspiré de plusieurs exemple du forum et d'internet pour arriver à ceci, je suis sous firefox4 mais rien à faire je ne vois d'où cela peut venir.

Merci à tous pour votre aide:).

24/07/2011, 18h03
Bovino

Tu ne donnes pas assez de code pour aller au fond des choses, mais une première piste :

Code:

var textarea = this.getNod('edit_'+this.name);

this dans une méthode définie dans le prototype référence l'objet sur lequel elle s'applique (donc à priori l'instance actuelle de wisywig), est-ce vraiment une balise dont il s'agit (et donc wisywig a-t-il bien une propriété name) ?

effectivement j'avais pas vu ça peut prêter à confusion, le "this.name" est un attribut de la classe, je l'ai modifié par "this.vname".

voici le script complet:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
<?php
 
?>
<script type="text/javascript">
function wysiwyg(_name, _class, _value, _parent)
{
	this.vname = _name;
	this.parent = this.getNod(_parent);
	this.selection = '';
	this.commands_edit = { 'g' : '<strong>*</strong>', 'i' : '<i>*</i>', 'g' : '<strong>*</strong>' } ;
	this.createTextarea(_class, _value);
	this.createCommands();
}
 
wysiwyg.prototype.createTextarea = function(_class, _value)
{
	this.parent.innerHTML = '<input type="hidden" name="'+this.vname+'" id="'+this.vname+'" value="'+_value+'" /><div contenteditable="true" spellcheck="false" class="'+_class+'" id="edit_'+this.vname+'">'+_value+'</div>';
}
 
wysiwyg.prototype.createCommands = function()
{
	var commands = '';
	for(var i in this.commands_edit)
	{
		commands += '<span id="'+i+'" class="'+i+'">'+i+'</span>' ;
	}
	this.parent.innerHTML = commands + this.parent.innerHTML;
 
	this.addCallback();
}
 
wysiwyg.prototype.addCallback = function()
{
	var object = this;
 
	for(var i in this.commands_edit)
	{
		this.getNod(i).onclick = function() { object.editText(); };
	}
}
 
wysiwyg.prototype.editText = function()
{
	var textarea = this.getNod('edit_'+this.vname);
	var selection;
	var selection_start;
	var selection_end;
	var pre_str;
        var ap_str;
        var retour;
 
	textarea.focus();
	var value = textarea.value;
 
	if(typeof textarea.selectionStart != 'undefined')
	{
	    alert("ici");
	    selection_start = textarea.selectionStart;
	    selection_end = textarea.selectionEnd;
	    pre_str = value.substring(0 , selection_start);
	    ap_str = value.substring(selection_end, textarea.textLength );
	    selection = value.substring(selection_start, selection_end);
	    retour = pre_str + '<i>' + selection + '</i>' + ap_str;
	}
 
	this.getNod('edit_'+this.vname).value = retour
}
 
wysiwyg.prototype.getNod = function(_id)
{
	return document.getElementById(_id);
}
 
wysiwyg.prototype.config = function()
{
 
}
 
wysiwyg.prototype.getSelected = function()
{
	if(window.getSelection)
	{
		var str = window.getSelection();
	} 
	else if(document.getSelection)
	{
	    var str = document.getSelection();
	} 
	else
	{
	    var str = document.selection.createRange().text;
	}
	this.selection += str ;
}
</script>
<style type="text/css">
.descrip { width: 500px; height: 300px; border: solid 1px gray; }
</style>
<div id="wysiwyg">
</div>
<script type="text/javascript">
var wy = new wysiwyg('description', 'descrip', '', 'wysiwyg');
</script>

Edit:

Il semblerait que l'association de selectionStart/selectionEnd avec un div contenteditable ne fonctionne pas. J'ai fait le test du script avec un textarea c'est ok le texte est bien remplacé.

Merci à tous pour votre aide.:)

Je n'ai pas encore trouvé de solution au problème ou de solution alternative.

Je reviens avec une nouvelle approche après de longues heures de lecture de developper.mozilla.org.

J'ai quelque peu avancé mais je rencontre encore un problème...La fonction réagit bien quand je fais un appel depuis un onmousedown parcontre quand je fais un onclick plus rien ne se passe comme voulu.

J'ai fait des tests avec une fonction quelque peu similaire pour l'édition d'un iframe et elle réagit bien au onclick.

Voici ma fonction:

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
 
<?php
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<script type="text/javascript">
 
		function getSelected(id)
		{
			/*ok mozz, ok chrome, ok safari, ok opera*/
			//objet_selection est une instance qui nous permet d'accéder aux méthodes de la class selection
			var objet_selection =  window.getSelection();
			//selection contient la chaine de caractère sélection, c'est une instance de la classe range on peut accèder aux méthodes de cette classpar cette instance
			var select = objet_selection.getRangeAt(0);
 
			//point de départ de la sélection dans la string int
			var nbr_start = objet_selection.focusOffset;
			//point de fin de la sélection dans string int
			var nbr_end = objet_selection.anchorOffset;
 
			//nombre de caractères dans la sélection
			var string_selection = "<b>"+select+"</b>";
			nbr_selection = string_selection.length;
 
			//valeur de remplacement
			var replace = string_selection;
 
			//suppression de la selection
			select.deleteContents();
			//ajaut de la string de remplacement
	    	        select.insertNode(select.createContextualFragment(replace));
		}
 
		function el(id)
		{
			return document.getElementById(id);
		}
	</script>
	<style type="text/css">
		.editable { width: 500px; height: 300px; border: solid 1px gray; }
		.btn { width: 50px; height: 50px; border: solid 1px gray; margin-bottom: 10px; text-align: center; line-height: 50px; cursor: pointer }
		.btn:hover { background: #dedede; color: purple; }
	</style>
</head>
<body>
<div class="btn" onmousedown="getSelected('editable');">Click</div>
<div id="editable" class="editable" contenteditable="true"></div>
</div>
</body>
</html>

Je souhaiterai la faire fonctionner au onclick, comment dois-je m'y prendre ?

Merci à tous pour votre aide.:)

27/07/2011, 23h10
NoSmoking

Bonsoir,
dans tes longues heures de lecture de developper.mozilla.org. est tu tombais sur http://www-archive.mozilla.org/editor/ie2midas.html ?