Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

DOCUMENT.SELECTION POUR FF (FIREFOX)


Information sur la source

Catégorie :Divers Classé sous : document, selection, firefox, createrange, html Niveau : Expert Date de création : 05/04/2007 Date de mise à jour : 04/04/2008 15:55:27 Vu / téléchargé: 15 220 / 359

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (41)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
Rend document.selection compatible pour firefox...
La totalité des fonctionnalités du document.selection d'Internet Explorer sont aujourd'hui reprises, même si il est possible que certains bugs subsistent.

Le code suivant suffit pour faire fonctionner document.selection sous FireFox, peut-être sous Opéra/Safari, mais je n'ai pas essayé.

Ce code ne modifie en aucun cas la manière dont IE gère document.selection
Il s'agit d'un workaround pour FireFox
 

Source

  • /* COMMENTAIRE
  • // Utilisation
  • var textRange = document.selection.createRange()
  • // format supporté par selection
  • document.selection = {
  • "type":String["none","text","control"],
  • "createRange":textRange,
  • }
  • // format supporté par textRange
  • textRange = {
  • "text":String,
  • "htmlText":String,
  • "parentElement":function() as HTMLElement,
  • "length":Integer,
  • "item":function(index) as HTMLElement,
  • "add":function(node),
  • "addElement":function(node),
  • "execCommand":function(...) as CommandResult
  • }
  • */
  • // SelectionObject
  • function SelectionObject(Window) {
  • this.window=(Window?Window:window);
  • this.document=this.window.document;
  • }
  • if(!document.selection) { try {
  • SelectionObject.prototype={
  • "clear":function() {
  • try {
  • var sel = this.window.getSelection();
  • sel.collapse(true);
  • sel.dettach();
  • } catch (ex) {}
  • },
  • "createRange":function() {
  • if (this.type=="none") {
  • var range = "no selection";
  • range.text=""; range.htmlText="";
  • return range;
  • }
  • if (!this.activeElement) {
  • var txt = this.document.getSelection()
  • var sel = {};
  • try { sel=this.window.getSelection().getRangeAt(0); } catch (ex) {}
  • var html = getHTMLOfSelection(this.window, this.document);
  • var range = null;
  • range = new ControlRangeObject();
  • range.isControlRange=true;
  • range._text=(""+txt+"");
  • range._htmlText=html;
  • range._range=sel;
  • range.base=sel.commonAncestorContainer?sel.commonAncestorContainer:this.document.body
  • range.items=new Array();
  • range.addElement=range.add;
  • try {
  • while (range.base.nodeName.substr(0,1)=="#") {
  • range.base=range.base.parentNode;
  • }
  • var index = 0; var started;
  • var current = range.base.childNodes[0];
  • while (current) {
  • if (started || current==sel.startContainer || current==sel.commonAncestorContainer) {
  • started = true;
  • range.items.push(current);
  • }
  • if (current == sel.endContainer || current==sel.commonAncestorContainer) {
  • break;
  • }
  • index++;
  • current = range.base.childNodes[index];
  • }
  • range.length=range.items.length;
  • } catch (ex) {}
  • return range;
  • } else {
  • var base = this.activeElement;
  • var range = new ControlRangeObject();
  • range.isControlRange=false;
  • range._text = base.value.substring(base.selectionStart, base.selectionEnd);
  • range._htmlText=range._text;
  • range._range=null;
  • range.base=base;
  • range.items=[range.base];
  • range.addElement=range.add;
  • return range;
  • }
  • }
  • }
  • SelectionObject.prototype.empty=SelectionObject.prototype.clear;
  • SelectionObject.prototype.createRangeControl=SelectionObject.prototype.createRange;
  • SelectionObject.prototype.findActiveElement=function() {
  • function haveFocus(inp) {
  • try { // IE
  • var result = !!(inp.hasFocus||inp==document.activeElement);
  • if (result) { return result; }
  • } catch (ex) {}
  • try { // FF; Safari
  • var sel = false;
  • sel=this.window.getSelection().getRangeAt(0);
  • if (!sel.collapsed) { return false; }
  • var sel2 = document.createRange();
  • sel2.setStartBefore(inp);
  • sel2.setEndBefore(inp);
  • var result = sel.compareBoundaryPoints(Range.START_TO_START, sel2)==0;
  • result = result && sel.compareBoundaryPoints(Range.END_TO_END, sel2)==0;
  • result = result && sel.startOffset == sel2.startOffset
  • result = result && sel.endOffset == sel2.endOffset
  • return result;
  • } catch (ex) {}
  • try { // Opéra
  • return !!(inp.selectionStart||inp.selectionEnd);
  • } catch (ex) {}
  • return false;
  • }
  • try {
  • var allInputs = this.document.getElementsByTagName("INPUT");
  • var allTAreas = this.document.getElementsByTagName("TEXTAREA");
  • var l1 = allInputs.length; var l2 = allTAreas.length;
  • for (var i=0; i<l1; i++) {
  • var inp = allInputs[i];
  • if (inp.type=="" || inp.type=="text") {
  • if (haveFocus(inp)) {
  • this.activeElement = inp;
  • return "text";
  • }
  • }
  • }
  • for (var i=0; i<l2; i++) {
  • var inp = allTAreas[i];
  • if (haveFocus(inp)) {
  • this.activeElement = inp;
  • return "text";
  • }
  • }
  • if (document.activeElement) { return document.activeElement; }
  • } catch (ex) {}
  • };
  • SelectionObject.prototype.__defineGetter__("type", function() {
  • try {
  • this.activeElement = false;
  • var sel = false;
  • if ((""+this.document.getSelection()+"")=="") {
  • this.findActiveElement();
  • if (this.activeElement) {
  • return "text";
  • }
  • }
  • try {
  • sel = this.window.getSelection().getRangeAt(0);
  • } catch (ex) {}
  • if (sel.commonAncestorContainer.nodeName.substr(0,1)=="#") {
  • return "text";
  • } else {
  • return "control";
  • }
  • } catch (ex) { }
  • return "none";
  • });
  • SelectionObject.prototype.__defineSetter__("type", function() {
  • // Do nothing
  • });
  • // ControlRangeObject
  • function ControlRangeObject() {}
  • ControlRangeObject.prototype={
  • "_text":"",
  • "_htmlText":"",
  • "_range":null,
  • "parentElement":function() {
  • return this.base;
  • },
  • "item":function(i) {
  • return this.items[i];
  • },
  • "add":function(node) {
  • try {
  • this._range.insertNode(node);
  • } catch (ex) {}
  • },
  • "execCommand":function(a1,a2,a3,a4) {
  • var mode = document.designMode;
  • document.designMode="on";
  • document.execCommand(a1,a2,a3,a4);
  • document.designMode=mode;
  • }
  • }
  • // Properties
  • ControlRangeObject.prototype.__defineGetter__("text",function() {
  • return this._text;
  • });
  • ControlRangeObject.prototype.__defineSetter__("text",function(value) {
  • if (this.isControlRange) {
  • var range = this._range;
  • var p=document.createTextNode(value);
  • range.deleteContents();
  • range.insertNode(p)
  • try { document.getSelection().collapseToEnd() } catch (ex) {}
  • } else {
  • var beforeText = this.base.value.substr(0, this.base.selectionStart);
  • var middleText = value;
  • var afterText = this.base.value.substr(this.base.selectionEnd);
  • this.base.value = beforeText+middleText+afterText;
  • this.base.selectionStart = beforeText.length + value.length;
  • this.base.selectionEnd = this.base.selectionStart;
  • this.base.focus();
  • }
  • });
  • ControlRangeObject.prototype.__defineGetter__("htmlText",function() {
  • return this._htmlText
  • });
  • ControlRangeObject.prototype.__defineSetter__("htmlText",function(value) {
  • var range = this._range;
  • var p=document.createElement("htmlSection");
  • p.innerHTML=value;
  • range.deleteContents();
  • range.insertNode(p)
  • });
  • document.selection=new SelectionObject();
  • } catch (ex) {} }
  • function getHTMLOfSelection (window, document) {
  • var range;
  • if (window.ActiveXObject && document.selection && document.selection.createRange) {
  • range = document.selection.createRange();
  • return range.htmlText;
  • }
  • else if (window.getSelection) {
  • var selection = window.getSelection();
  • if (selection.rangeCount > 0) {
  • range = selection.getRangeAt(0);
  • var clonedSelection = range.cloneContents();
  • var div = document.createElement('div');
  • div.appendChild(clonedSelection);
  • return div.innerHTML;
  • }
  • else {
  • return '';
  • }
  • }
  • else {
  • return '';
  • }
  • }
/* COMMENTAIRE
  // Utilisation
  var textRange = document.selection.createRange()
  // format supporté par selection
  document.selection = {
    "type":String["none","text","control"],
    "createRange":textRange,
  }
  // format supporté par textRange
  textRange = {
    "text":String,
    "htmlText":String,
    "parentElement":function() as HTMLElement,
    "length":Integer,
    "item":function(index) as HTMLElement,
    "add":function(node),
    "addElement":function(node),
    "execCommand":function(...) as CommandResult
  }
*/
// SelectionObject
function SelectionObject(Window) { 
	this.window=(Window?Window:window);
	this.document=this.window.document;
}
if(!document.selection) { try {
    SelectionObject.prototype={
      "clear":function() {
    	  try {
    		  var sel = this.window.getSelection();
    		  sel.collapse(true);
    		  sel.dettach();
    	  } catch (ex) {}
      },
      "createRange":function() {
    	  if (this.type=="none") {
    		  var range = "no selection";
    		  range.text=""; range.htmlText="";
    		  return range;
    	  }
    	  if (!this.activeElement) {
    		  var txt = this.document.getSelection()
    		  var sel = {};
    		  try { sel=this.window.getSelection().getRangeAt(0); } catch (ex) {}
    		  var html = getHTMLOfSelection(this.window, this.document);
    		  var range = null;
    		  
    		  range = new ControlRangeObject();
    		  range.isControlRange=true;
    		  range._text=(""+txt+"");
    		  range._htmlText=html;
    		  range._range=sel;
    		  range.base=sel.commonAncestorContainer?sel.commonAncestorContainer:this.document.body
    		  range.items=new Array();
    		  range.addElement=range.add;
    		  
    		  try {
    			  while (range.base.nodeName.substr(0,1)=="#") {
    				  range.base=range.base.parentNode;
    			  }
    			  var index = 0; var started;
    			  var current = range.base.childNodes[0];
    			  while (current) {
    				  if (started || current==sel.startContainer || current==sel.commonAncestorContainer) {
    					  started = true;
    					  range.items.push(current);
    				  }
    				  if (current == sel.endContainer || current==sel.commonAncestorContainer) {
    					  break;
    				  }
    				  index++;
    				  current = range.base.childNodes[index];
    			  }
    			  range.length=range.items.length;
    		  } catch (ex) {}
    		  
    		  return range;
    	  } else {
    		var base = this.activeElement;
    		var range = new ControlRangeObject();
    		range.isControlRange=false;
    		range._text = base.value.substring(base.selectionStart, base.selectionEnd);
    		range._htmlText=range._text;
    		range._range=null;
    		range.base=base;
    		range.items=[range.base];
    		range.addElement=range.add;
    		
    		return range;
    	  }
    	}
    }
    SelectionObject.prototype.empty=SelectionObject.prototype.clear;
    SelectionObject.prototype.createRangeControl=SelectionObject.prototype.createRange;
    SelectionObject.prototype.findActiveElement=function() {
        function haveFocus(inp) {
            try { // IE
                var result = !!(inp.hasFocus||inp==document.activeElement);
                if (result) { return result; }
            } catch (ex) {}
            try { // FF; Safari
                var sel = false;
        		sel=this.window.getSelection().getRangeAt(0);
                if (!sel.collapsed) { return false; }
                var sel2 = document.createRange();
                sel2.setStartBefore(inp);
                sel2.setEndBefore(inp);
                var result = sel.compareBoundaryPoints(Range.START_TO_START, sel2)==0;
                result = result && sel.compareBoundaryPoints(Range.END_TO_END, sel2)==0;
                result = result && sel.startOffset == sel2.startOffset
                result = result && sel.endOffset == sel2.endOffset
                return result;
            } catch (ex) {}
            try { // Opéra
                return !!(inp.selectionStart||inp.selectionEnd);
            } catch (ex) {}
            return false;
        }
    	try {
    		var allInputs = this.document.getElementsByTagName("INPUT");
    		var allTAreas = this.document.getElementsByTagName("TEXTAREA");
    		var l1 = allInputs.length; var l2 = allTAreas.length;
    		for (var i=0; i<l1; i++) {
    			var inp = allInputs[i];
    			if (inp.type=="" || inp.type=="text") {
    				if (haveFocus(inp)) {
    					this.activeElement = inp;
    					return "text";
    				}
    			}
    		}
    		for (var i=0; i<l2; i++) {
    			var inp = allTAreas[i];
                if (haveFocus(inp)) {
                    this.activeElement = inp;
    				return "text";
    			}
    		}
            if (document.activeElement) { return document.activeElement; }
    	} catch (ex) {}
    };
    SelectionObject.prototype.__defineGetter__("type", function() {
      try {
    	  this.activeElement = false;
    	  var sel = false; 
    	  if ((""+this.document.getSelection()+"")=="") { 
    		this.findActiveElement(); 
    		if (this.activeElement) {
    			return "text";
    		}
    	  }
    	  try { 
    		sel = this.window.getSelection().getRangeAt(0);
    	  } catch (ex) {}
    	  if (sel.commonAncestorContainer.nodeName.substr(0,1)=="#") {
    		  return "text";
    	  } else {
    		  return "control";
    	  }
      } catch (ex) { }
      return "none";
    });
    SelectionObject.prototype.__defineSetter__("type", function() {
      // Do nothing
    });
    // ControlRangeObject
    function ControlRangeObject() {}
    ControlRangeObject.prototype={
    	"_text":"",
    	"_htmlText":"",
    	"_range":null,
    	"parentElement":function() {
    		return this.base;
    	},
    	"item":function(i) {
    		return this.items[i];
    	},
    	"add":function(node) {
    		try {
    			this._range.insertNode(node);
    		} catch (ex) {}
    	},
    	"execCommand":function(a1,a2,a3,a4) {
    		var mode = document.designMode;
    		document.designMode="on";
    		document.execCommand(a1,a2,a3,a4);
    		document.designMode=mode;
    	}
    }
    // Properties
    ControlRangeObject.prototype.__defineGetter__("text",function() {
    	return this._text;
    });
    ControlRangeObject.prototype.__defineSetter__("text",function(value) {
    	if (this.isControlRange) {
    		var range = this._range;
    		var p=document.createTextNode(value);
    		range.deleteContents();
    		range.insertNode(p)
            try { document.getSelection().collapseToEnd() } catch (ex) {}
    	} else {
    		var beforeText = this.base.value.substr(0, this.base.selectionStart);
    		var middleText = value;
    		var afterText  = this.base.value.substr(this.base.selectionEnd);
    		this.base.value = beforeText+middleText+afterText;
    		this.base.selectionStart = beforeText.length + value.length;
    		this.base.selectionEnd   = this.base.selectionStart;
            this.base.focus();
    	}
    });
    ControlRangeObject.prototype.__defineGetter__("htmlText",function() {
    	return this._htmlText
    });
    ControlRangeObject.prototype.__defineSetter__("htmlText",function(value) {
    	var range = this._range;
    	var p=document.createElement("htmlSection");
    	p.innerHTML=value;
    	range.deleteContents();
    	range.insertNode(p)
    });
    document.selection=new SelectionObject(); 
} catch (ex) {} }
function getHTMLOfSelection (window, document) {
  var range;
  if (window.ActiveXObject && document.selection && document.selection.createRange) {
	range = document.selection.createRange();
	return range.htmlText;
  }
  else if (window.getSelection) {
	var selection = window.getSelection();
	if (selection.rangeCount > 0) {
	  range = selection.getRangeAt(0);
	  var clonedSelection = range.cloneContents();
	  var div = document.createElement('div');
	  div.appendChild(clonedSelection);
	  return div.innerHTML;
	}
	else {
	  return '';
	}
  }
  else {
	return '';
  }
}

Conclusion

Ce code --est-- était aussi disponibe à http://www.developpez.net/forums/showthread.php?p=1926681
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

05 avril 2007 10:09:44 :
.
05 avril 2007 14:07:32 :
Suppression d'une partie utilisée lors de mes tests
05 avril 2007 14:51:19 :
Ajout de : - createRange().text="newSelectionText" - createRange().htmlText="newSelectionHTML" Typage fort des controlRange et SelectionObject
05 avril 2007 15:10:22 :
Multi-frame possibility (voir commentaires)
05 avril 2007 16:06:15 :
.
05 avril 2007 18:30:33 :
ZIP + Preview
06 avril 2007 14:42:45 :
.
06 avril 2007 15:14:02 :
.
25 décembre 2007 15:26:53 :
Un bug vient d'être corrigé concernant les sélections dans les boites de texte. La mise à jour est conseillée
14 février 2008 17:26:13 :
Correction d'un bug (this.beforeText remplacé par beforeText, ligne 179)
14 février 2008 18:23:43 :
Meilleure détection des champs ayant le focus (le code gère maintenant le focus dans un champ vide)
15 février 2008 18:06:25 :
Correction d'un nouveau bug J'espère que cette fois ci, c'est la dernière modif ;)
16 février 2008 11:52:33 :
Suppression d'une erreur de syntaxe sous IE (__defineGetter__ est FireFox/Safari only)
04 avril 2008 15:55:28 :
Deux lignes étaient commentées alors qu'elle ne devaient pas ce qui posait problème dans quelques rares cas de doublons (deux éléments dans une ^même structure HTML parente)

Commentaires et avis

signaler à un administrateur
Commentaire de bultez le 05/04/2007 11:31:20


à priori c'est exactement ce dont j'ai besoin, ou presque !
mais je n'arrive pas à l'utiliser... avec FF justement ! (ie ok )

probable que j'utilise mal !

1° Deprecated method document.getSelection() called.  
   Please use window.getSelection() instead.
2° Erreur : document.getElementById("s4") has no properties
   Fichier source : file:///D:/Utilitaires/EasyPHP/www/PIC/test_2.htm
   Ligne : 44

je fais :
<script type="text/javascript">
   ...ton script...
</script>
un mot exemple toto d'autres mots ...
<input type="button"
onclick=" var textRange = document.selection.createRange();
alert(textRange.text);
textRange.text='remplacer par';" />

en mettant cete ligne en commentaire
( //document.getElementById("s4").innerHTML=msg; )
l'affichage des caractères sélectionnés fonctionnent,
pas "leur remplacement"

une petite question :
#### peut-on appliquer sur un iframe ?
si oui : comment ?
ne pas utiliser window.getSelection(); mais
mais iframe.contentWindow ou .contentDocument
ou ... je ne sais pas[.Window].getSelection
ou  ...

signaler à un administrateur
Commentaire de FREMYCOMPANY le 05/04/2007 14:03:40

Oui, pardon, j'ai laissé ma méthode de test ;)
Pour l'histoire du decrapted, je sais mais en fait, c'est parce que document.getSelection renvoie le texte sélectionné alors que window.getSelection renvoie une objet selection, et pour obtenir le texte sélectionné depuis cet objet, c'est pas facile alors j'utilise document.getSelection ;)

signaler à un administrateur
Commentaire de FREMYCOMPANY le 05/04/2007 14:06:43

Ah ben non, le remplacement ca marche pas... Ca marche sur IE ca ? Si oui, faudra que je trouve un moyen de rendre mon script compatbile... Peut-être avec execCommand...

signaler à un administrateur
Commentaire de FREMYCOMPANY le 05/04/2007 14:08:20

Pour les iframes, faut mettre le script dans la page de l'iframe et faire IFrame.document.selection.createRange(), si je me rappelle bien

signaler à un administrateur
Commentaire de bultez le 05/04/2007 14:28:50


>>...c'est pas facile
oh non.

>>alors j'utilise document.getSelection
  ok. pareil.

>>Ca marche sur IE ca ?
oui.
sel = objet.selection.createRange();
sel.text="tout ce qu'on veut y compris des balises..."
( avec ton script ou pas d'ailleurs )
  dommage, si en plus on pouvait mettre ça dans un Iframe,
  ça répondait pile poil à mon souci.

>>Pour les iframes, faut mettre le script dans la page de l'iframe
ce que je ne voulais ( ne pouvais presque ) pas faire... hélas.
il faudrait qu'il reste dans la page principale.
j'ai quand même posé la question dans le forum
       quelquefois que...

en tous cas, le moins qu'on puisse dire du script : nickel.
ça n'a pas du être simple...

signaler à un administrateur
Commentaire de FREMYCOMPANY le 05/04/2007 14:49:03

Voila, c'est ok pour controlRange.text="newSelection" et controlRange.htmlText="new<b>Selection</b>"

signaler à un administrateur
Commentaire de bultez le 05/04/2007 15:05:08

tout baigne.
il ne me reste plus "qu'à adapter" à un[e] iframe.
@+

signaler à un administrateur
Commentaire de FREMYCOMPANY le 05/04/2007 15:09:27

Pour la gestion des iframes, voila ce que je te propose.

J'ai mis à jour mon script et tu devras faire comme cela :
var iframeSelection = iframeWindow.document.selection;
if (!iframeSelection) {
  iframeSelection=new SelectionObject(iframeWindow);
}
var iframeRange=iframeSelection.createRange();

signaler à un administrateur
Commentaire de FREMYCOMPANY le 05/04/2007 15:15:29

Est-ce que tu pourrais tester et voir si tu as des problèmes ?
Ce serait bête de passez à coté d'un truc maintenant alors que ca commence enfin à ressembler à qqchose...

signaler à un administrateur
Commentaire de bultez le 05/04/2007 15:53:33


je fais :

saisie étant l'ID de l'Iframe,

var Champ=document.getElementById('saisie').contentDocument;
#### pas sûr qu'il fallait faire ça !      ################
var iframeSelection = Champ.getSelection();
#### mais sinon, plante sur la ligne précédente ####
//if (!iframeSelection)
{
iframeSelection=new SelectionObject(iframeWindow);
}
var iframeRange=iframeSelection.createRange();
#### createRange undefined

alert(iframeRange);
iframeRange="exemple";

je crois (?) qu'il y a un } en trop en fin de ton script
ou alors j'ai mal copié. enlevé pour tester.

@+

signaler à un administrateur
Commentaire de FREMYCOMPANY le 05/04/2007 16:01:44

// (Voir réponse sur le forum pour getFrameWindow)
var iframeWindow=getFrameWindow(document.getElementById('saisie'));
var iframeSelection = iframeWindow.document.selection
if (!iframeSelection) { iframeSelection=new SelectionObject(iframeWindow); }
var iframeRange=iframeSelection.createRange();
alert(iframeRange.text);

signaler à un administrateur
Commentaire de bultez le 05/04/2007 16:02:48

ne pas tenir compte de mes bourdes !
je reteste en essayanr d'en faire moins.
@+

signaler à un administrateur
Commentaire de FREMYCOMPANY le 05/04/2007 16:08:35

Je viens de remettre le script à jour (dans __defineSetter("htmlText, ...), j'ai remplacé "div" par "htmlSection")

signaler à un administrateur
Commentaire de bultez le 05/04/2007 16:24:15

ajouté les 2 functions getFrameWindow et getFrameDocument
mis ce que tu as sonné : alert==>undefined.
peut-être inutile d'encombrer ici ? ce serait dommage
pour la source.
on continue sur le forum dans ma question. ok ?
@+

signaler à un administrateur
Commentaire de _klesk le 22/12/2007 19:06:50

Bonjour,

Je n'arrive pas un recuperer la sélection d'un textarea

le resultat que je veux obtenir => du text du text <balise>Mon text selectionner</balise> encore du text encore du text

J'ai fait simplement
function test()
{
        var textRange = document.selection.createRange();
        alert(textRange.text);
}
Mais cele me renvois Undefined.

Pourriez vous m'aider svp ?

signaler à un administrateur
Commentaire de FREMYCOMPANY le 22/12/2007 20:02:06

Ah oui, en effet, je n'ai pas prévu ce cas-là.
Sur FireFox, il faut faire

// el = ton textarea
var selectionText = el.value.substr(el.selectionStart, el.selectionLength)

Je vais voir si je peux ajouter ce cas spécifique à mon script

signaler à un administrateur
Commentaire de _klesk le 24/12/2007 10:36:23

alors effectivement avec ça :
function test()
{
var textRange = document.selection.createRange();
el = document.getElementById('mon_txt_area');
var selectionText = el.value.substr(el.selectionStart, el.selectionLength);
alert(selectionText);
}
je n'ai plus de Undefined, mais par contre j'ai plus rien du tout !! Le alert() est vide, ai-je encore louper quelquechose ?? . ?? Oo ??

j'avoue que ja n'arrive pas bien à saisir le principe :s

mais un petit coup de pouce n'est pas de refus.

signaler à un administrateur
Commentaire de FREMYCOMPANY le 24/12/2007 18:46:57

C'est bon, je vais publier demain ma version corrigée (je n'ai pas le temps aujourd'hui hélas)

signaler à un administrateur
Commentaire de renaud63 le 13/02/2008 21:58:01

Bonsoir, déja, bravo pour ce script...époustoufflant !

Mon but est le même que _KLESK : écrire des balises HTML dans un textarea autour des mots sélectionnés.
Je suis donc parti de la page index.htm

<script>
function insertBalise(input, name, args) {
// Donne le focus à l'élément
input.focus();
// Si rien n'est sélectionné, il faut mettre la séléction en fin de boite de texte sous FireFox
if (document.selection instanceof SelectionObject && input.selectionStart == 0 && input.selectionEnd == 0)
{
input.selectionStart = input.selectionEnd = input.value.length;
}
// Méthode commune pour ajouter la balise
var range = document.selection.createRange();
range.text = "["+name+(args?"="+args:"")+"]"+range.text+"[/"+name+"]";
}
</script>

J'ai mis ensuite le onclick sur une image, puis le texterea.
Ca fonctionne bien sur IE mais pas sur Firefox.
"this.beforeText has no properties".

Qu'est ce que j'ai raté dans l'appel de la fonction ?
Merci de tes lumières.

signaler à un administrateur
Commentaire de FREMYCOMPANY le 14/02/2008 17:22:47

En effet, tu as raison, il y a bien un bug.
Celui-ci est situé ligne 179 : this.beforeText est à remplacer par beforeText (sans le this donc)

Je mets à jour immédiatement

signaler à un administrateur
Commentaire de FREMYCOMPANY le 14/02/2008 17:29:20

Voila, c'est mis à jour, est-ce que tu peux tester voir si tu rencontre encore le pb ?

signaler à un administrateur
Commentaire de renaud63 le 14/02/2008 17:34:05

Merci de ta réaction rapide...
En fait j'ai posté aussi sur Dev.net puisque tu avais eu la gentillesse de poster ce code sur le forum. Puis j'ai testé avec cet autre source (sensiblement différente de celle-ci). Ca fonctionne aussi avec IE, et sur FF, bizarre, les balises s'affichent bien...mais en dehors du textarea. Sous l'image où je mets le onclick, en fait.
Par ailleurs, je suis allé jeté un oeil sur ton blog. 16 ans ? J'en suis pas revenu.
Bravo, jeune homme !

signaler à un administrateur
Commentaire de renaud63 le 14/02/2008 17:40:07

Alors, je viens de recharger ce code ci, avec ta modif.
Sur FF, nickel !
Sur IE, ça fonctionne, les balises s'appliquent dans le textarea, mais j'ai l'alerte suivante "cet objet ne gère pas cette propritété ou cette méthode"...

signaler à un administrateur
Commentaire de renaud63 le 14/02/2008 18:49:06

Non, c'est tout bon ! vraiment top ! Merci.
Bonne soirée à toi.

signaler à un administrateur
Commentaire de FREMYCOMPANY le 14/02/2008 19:00:03

Bonne soirée à toi aussi !

signaler à un administrateur
Commentaire de renaud63 le 14/02/2008 19:07:50

Arggghh non, il y a un truc hallucinant sur FF : une fois l'image cliquée, la balise va s'appliquer à un champ de type text placé plus haut sur la page, qui a un ID différent de celui passé en paramètre ! Et si je supprime ce champ, la balise s'applique à un autre champ text !
Faut il déclarer quelque part que c'est un textarea ? l'id ne suffit pas à l'identifier avec le nom passé en param de la fonction insertBalise(input, name, args) ???

signaler à un administrateur
Commentaire de renaud63 le 14/02/2008 19:34:09

Décidément, ce script me donne des suées ! bon, j'ai commenté
var allInputs = this.document.getElementsByTagName("INPUT");

ainsi que

allInputs.length;

et toute la boucle l1.

Pour ne garder que l2 des textareas

Ca paraît fonctionner sur les 2 navigateurs... ça te paraît correct ?

signaler à un administrateur
Commentaire de FREMYCOMPANY le 14/02/2008 22:13:21

Oui, on dirait qu'il y a encore un bug qqpart...
Je verrai ca ce week-end [;)]

signaler à un administrateur
Commentaire de FREMYCOMPANY le 15/02/2008 18:07:09

Encore une petite mise à jour.
Cette fois tout devrait marcher comme prévu.

Peux-tu tester pour voir ?

signaler à un administrateur
Commentaire de renaud63 le 15/02/2008 19:16:49

Je viens de tester sur IE et FF : C'est tout simplement magnifique. Le companion JS était pas très content (objet ne gère pas propriété ou méthode)...maintenant il est muet comme une tombe !
Bravo ! et merci.
Bonne soirée et bon week-end.

signaler à un administrateur
Commentaire de renaud63 le 16/02/2008 10:17:55

Mais ce matin, triple sniff... (hier soir le companion JS était fatigué, ou moi...)
ligne 224 cet objet ne gère pas cette propriété ou méthode
ligne 223 syntax error

Pourtant le script fonctionne, et, surtout les lignes 223 et 224 correspondent à des accolades de fermeture... c'est le companion JS qui délire ???

signaler à un administrateur
Commentaire de FREMYCOMPANY le 16/02/2008 11:49:49

Ok, c'est __defineGetter__ qui ne marche pas sous IE
Mais on s'en fout un peu, vu que cela ne doit être utilisé que sous FireFox

Je vais faire une version avec un try {} catch (ex) {} qui va empecher l'erreur, comme ca CJS serait content ;)

signaler à un administrateur
Commentaire de renaud63 le 18/02/2008 16:58:22

Bonjour,

En fait, je découvre en re testant, que sous FF, le script "se trompe" de focus. Si j'ai deux textarea l'un sous l'autre, avec des id et noms différents, si on veut mettre en forme celui du dessous, les balises s'affichent dans celui du dessus ! Est ce que ce n'est pas prévu pour gérer 2 textarea sur la même page ?
Merci de ta réponse éclairée.

signaler à un administrateur
Commentaire de renaud63 le 18/02/2008 17:31:21

Euh...je précise que ce n'est vrai qu'en mode modification, lorsque le textarea est rempli par les infos de la BDD...

signaler à un administrateur
Commentaire de renaud63 le 03/04/2008 11:49:28

Bonjour Fremy, je viens de réinstaller ton script et plus d'erreur JS sur IE ! bravo. Mais j'ai toujours le problème avec FF et 2 textareas: si je mets en forme un mot dans le champ inférieur, la mise en page s'applique dans le champ supérieur. Tu as testé ? peut être que j'appelle mal les fonctions sur la page ? Ce serait très cool si tu pouvais te pencher une dernière fois sur ton script. D'avance merci et bonne journée.
Renaud.

signaler à un administrateur
Commentaire de FREMYCOMPANY le 04/04/2008 14:01:07

Je vais me pencher sur le problème.
Néanmoins, je ne peux pas te garantir que je vais trouver une solution, vu que normalement mon code est déjà censé être OK...

Peut-être est-ce un bug dans FireFox... Enfin, je vais faire des tests et je te mets au courant.

signaler à un administrateur
Commentaire de FREMYCOMPANY le 04/04/2008 15:56:08

Edité

signaler à un administrateur
Commentaire de renaud63 le 04/04/2008 16:16:41

:-) Ben t'es le meilleur mon gars ! et ton script est carrément génial : autant sur IE que sur FF. Bravo et merci beaucoup de ton coup de main.

signaler à un administrateur
Commentaire de deadpig le 11/06/2008 16:09:53 10/10

Bonjour à tous,

Tout d'abord un grand bravo à FREMYCOMPANY pour ce script qui m'a sauvé du suicide 8-]

Par contre j'ai mis le doigt sur un nanobug sous Fx :
J'utilise le script pour l'appliquer à un formulaire comportant un textarea avec 3 fonctionnalités d'édition de texte.
Voici le phénomène sous Fx:
Je saisi un mot dans le textarea, je le mets en surbrillance, je clique sur un des 3 boutons, mes tags html s'affichent bien (ce qui n'était pas le cas avant l'utilisation du script de FREMY), MAIS le mot sélectionné disparait...
Je saisi un deuxième mot, fais les même manips, et là ça fonctionne nickel pendant tout le reste de la saisie !
On dirait que le focus n'est pas pris en compte lors de la première "utilisation" du script.

Le script de FREMY est appelé en début de page ainsi:

<script type="text/javascript" src="script/docSelFx.js"></script>

Le script pilotant les boutons "gras", "italique" et "url" est le suivant:

<script>
function format(f) {
  var str = document.selection.createRange().text;
  document.publication.offre.focus();
  var sel = document.selection.createRange();
  sel.text = "<" + f + ">" + str + "</" + f + ">";
  return;
}

function lien() {
  var str = document.selection.createRange().text;
  document.publication.offre.focus();
  var lien = prompt("URL:","http://");
  if (lien != null) {
    var sel = document.selection.createRange();
    sel.text = "<a href=\"" + lien + "\" target=\"_blank\">" + str + "</a>";
  }
  return;
}
</script>

Dans mon formulaire, j'utilise le code suivant pour mettre en forme le texte sélectionné :

<div id="outils">
<img class="over" src="images/annoncesBold.jpg" onClick="format('b');" />
<img class="over" src="images/annoncesItalic.jpg" onClick="format('em');" />
<img class="over" src="images/annoncesUrl.jpg" onClick="lien();" />
</div>

Voilà, si quelqu'un a une idée, je suis preneur. Pour info, je suis développeur XHTML/CSS/PHP mais le JS reste un grand mystère pour moi ; il y a donc peut être une grossière erreur dans mes "functions".

++

signaler à un administrateur
Commentaire de FREMYCOMPANY le 11/06/2008 16:29:54