begin process at 2010 03 22 09:30:34
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > DOCUMENT.SELECTION POUR FF (FIREFOX)

DOCUMENT.SELECTION POUR FF (FIREFOX)


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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é :19 932 / 450
Auteur : FREMYCOMPANY

Ecrire un message privé
Site perso
Commentaire sur cette source (46)
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

Les Membres Club peuvent 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)

 Sources du même auteur

Source avec Zip GETCOMPUTEDSTYLE POUR IE (GETCOMPUTEDCSSVALUE) [PT TO PX, EM...
CRÉER UNE RÈGLE CSS POUR QU'ELLE S'APPLIQUE À UNE ÉLÉMENT DO...
AJAX INTER-SITE (CROSS-SITE) SOUS IE SANS TENIR COMPTE DES P...
Source avec une capture POURQUOI MES SCRIPTS AJOUTÉS DYNAMIQUEMENT (AJAX, XSLT, ...)...
Toutes les sources de FREMYCOMPANY

 Sources de la même categorie

Source avec Zip Source avec une capture SÉQUENCEUR par jdmcreator
Source avec Zip COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36
Source avec Zip VIRTUAL IPHONE (V.2) par loicseg
Source avec Zip MOOTABLEAU par Miky76
Source avec Zip CALCULER VOTRE IMC par lesnouesremy
Toutes les sources de la catégorie Divers

 Sources en rapport avec celle ci

Source avec Zip FAIRE UN CV EN HTML VIA XML ET DU XSL par antour
Source avec Zip Source avec une capture HORLOGE NUMÉRIQUE EN JAVASCRIPT, COMPATIBLE IE ET FF par bad_dark_spirit
AJOUTER 'ADDEVENTLISTENER' SUR INTERNET EXPLORER par li9
Source avec Zip Source avec une capture ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT par djmmix
Source avec Zip Source avec une capture NAVBAR THÈME FIREFOX par nakixx

Commentaires et avis

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  ...

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 ;)

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...

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

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...

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>"

Commentaire de bultez le 05/04/2007 15:05:08

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

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();

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...

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.

@+

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);

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.
@+

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")

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 ?
@+

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 ?

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

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.

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)

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.

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

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 ?

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 !

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"...

Commentaire de renaud63 le 14/02/2008 18:49:06

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

Commentaire de FREMYCOMPANY le 14/02/2008 19:00:03

Bonne soirée à toi aussi !

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) ???

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 ?

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 [;)]

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 ?

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.

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 ???

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 ;)

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.

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...

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.

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.

Commentaire de FREMYCOMPANY le 04/04/2008 15:56:08

Edité

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.

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".

++

Commentaire de FREMYCOMPANY le 11/06/2008 16:29:54

Bonjour !

Je suis en examen toute cette semaine et la semaine prochaine, mais je te promets de regarder le problème dès que ceux-ci seront terminés.

Fremy

Commentaire de deadpig le 11/06/2008 21:59:46

Merci Fremy pour ta prompte réponse.

Bon courage pour les exams & pas de pb de mon côté, je ne suis pas aux pièces...

De plus, le bug peut être interprété comme une fausse manip par l'utilisateur, puisqu'au deuxième coup, ça fonctionne ;-)

MAIS d'un point de vue de codeur cela reste un bug :-))

++

Commentaire de yves2929 le 04/11/2009 15:27:17

Bonjour,

Je rencontre quelques problemes avec ton script sous IE8 si j'utilise une iframe (tinymce editor).
Peux-tu me dire si tu es d'accord de donner un petit coup de main pour essayer de resoudre ce probleme.
Si oui je t'envoie un exemple a telecharger
Merci d'avance

A+

Commentaire de yves2929 le 09/11/2009 17:24:27

voici donc ce qu'il faut faire avec une iframe.
merci d'avoir repondu aussi vite.

<script type="text/javascript" charset="utf-8">
var textRange = null;

function getItemSelection(edid) {
  try {
    textRange = getFrameSelection(new SelectionObject(getFrameWindow(document.getElementById(edid)))).createRange();
  } catch (ex) {}
}

function setHtmlItemSelection(str) {
  try {
if (textRange != null) {
//textRange.text = str;
  if (textRange.pasteHTML) {
textRange.pasteHTML(str);
textRange.select();
  } else {
textRange.htmlText = str;
  }
}
  } catch (ex) {}
}

function getFrameSelection(win) {
  return win.document.selection? win.document.selection : win;
}

function getFrameWindow(iframe) {
  return iframe.window? iframe.window : iframe.contentWindow;
}

</script>

Commentaire de Killan le 04/02/2010 16:15:55

Bonjour et merci déjà pour ce code magnifique.

J'ai un soucis sous IE8 dans le cas d'une iframe (cf msg yves2929 du 09/11/200).

J'ai modifié ton setter comme suit :

    ControlRangeObject.prototype.__defineSetter__("htmlText",function(value) {
     var range = this._range;
     range.deleteContents();
     range.insertNode(value)
    });

Pour envoyer du html directement sans avoir la balise que tu créais qui parasitait.

Et je fais ça :

          tr = pa.getSelection(pa.selectobj);
          var e = document.createElement('b');
          e.innerHTML = tr.text;
          tr.htmlText = e;

J'ai bien un objet textRange mais IE8 dit que htmlText n'existe pas, ça plante à la dernière ligne, le reste ça a l'air d'aller.

Une idée ?

Merci d'avance.

Commentaire de FREMYCOMPANY le 04/02/2010 17:59:26

Sous IE, le code ici n'est pas exécuté. On utilise le code par défaut de document.selection. Tu devrais donc regarder sur la MSDN ce qu'ils disent à ce sujet...

Commentaire de Killan le 05/02/2010 11:28:45

D'accord, je vais voir ça merci.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Problème document.selection sous Firefox [ par cradleofpain ] Bonjour à tous !J'ai un problème sous Firefox lorsque j'utilise la ligne suivante : maFrame.document.selection- maFrame est de type Window (IFRAME)- m bug sous firefox [ par freija ] Bonjour, Pour faire un site internet on m'a fourni une base. Mon index se présente sous la forme d'un tableau avec sur une ligne un menu flash, et un probleme avec un lien sous firefox [ par fatifleurf ] salut tout le monde,en fait j ai un probleme avec un lien sous firefox, mon besoin est le suivant : je souhaite recuperer la valeur du href de mon lie Aide pour selection de plusieurs tableau pour faire manipulations [ par Jarod1980 ] Bonjour, J'ai un problème dans mon script, je voudrais savoir si quelqu'un peut m'aider à le résoudre. Mon problème est le suivant : Dans une interf recupérer le code html d'une selection [ par caviar ] Saluté ! j'ai un petit pb tout bête ...j'aimerai récupérer le code html selectionné lorsqu'un utilisateur fait un surlignage sur ma page ...par exempl Recuperer le texte selectionne avec la souris! [ par LotusTissues ] Bonjour,Je ne parviens pas a faire fonctionne cette fonction qui est cense retourner le texte selectionne.Dans le premier if elle me renvoie systemati Problème createRange() [ par damsdu92 ] Bonjour,J'ai actuellement un petit soucis avec la methode createRange() .Je vous explique :Sur le site que je suis en train de faire, je souhaite mett Selection [ par olive2634 ] Bonjour,je débute en javascript. J'aimerai pouvoir selectionner du texte dans une page HTML, avec l'aide de javascript....Par exemple : &lt;FIELDSET&g changement de couleur qui marche sur firefox mais pas sous IE [ par nicomilville ] Salut,je fais un code pour que si la personne est une femme l'arrière plan d'une colone de tableau soit rose... ça marche parfaitement sous Firefox ma Affichage bizarre sous firefox... [ par adelami ] Bonsoir ! J'ai réalisé un code qui permet, en utilisant des &lt;SPAN&gt; mis côte à côte et en réduisant progressivement la taille, de donner un eff


Nos sponsors


Sondage...

Comparez les prix


Archos 5 (250 Go)
Entre 440€ et 440€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,014 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)