Récupérer le texte sélectionné dans une div contentEditable

Version imprimable

02/05/2017, 14h56
henneka

Récupérer le texte sélectionné dans une div contentEditable

Bonjour,

Ne trouvant pas de réponse, je soumet ma question :

Comment récupérer une sélection de texte dans une div contentEditable en jquery (ceci afin de pouvoir y ajouter des balises html avant et après par exemple

Cdt
02/05/2017, 15h37
Toufik83

bonjour,
voilà un exemple de ce que vous cherchez à faire http://jsfiddle.net/tw9jwjbv/
02/05/2017, 16h15
henneka
Merci pour cette info :

J'essaie de faire quelquechose à ma sauce ...

J'arrice a ce stade :
Code:

1 2 3 $('#G').click(function(){ $("#editeur").html('<strong>'+texte+'</strong>');
texte étant la variable contenant mon texte sélectionné

Par exemple, si dans la phrase : ceci est un test, je selectionne "est" et que je clique sur lez bouton #G, j'obtiens bien est mais je perds tout le reste

Voyez vous une piste ?

J'arrive à récupérer l'ensemble de mon texte :

Code:

var textentier = $("#editeur").text();

J'ai pensé a récuperer la position de ma chaine texte puis de couper textentier en 3 le texte avant, le texte a modifier, le texte apres) ....

Je cherche une solution pratique ...

Cdt

Voici la solution que j'ai trouvé pour insérer un lien :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$('#L').click(function(){
       	var lien = prompt('Inserer un lien','http://www.');		
		var textentier = $("#editeur").text();
		var long1 = textentier.length;		
		var texte = getSelectionText();
		var long2 = texte.length;		
		var position = textentier.indexOf(texte);		
		var position2 = position + long2;
		var chaine1 = textentier.substr(0,position);
		var chaine2 = textentier.substr(position2,long1);		
		$("#editeur").html(chaine1+'<a href="'+lien+'">'+texte+'</a>'+chaine2);	
	});

C'est un peu laborieux mais ça marche ...

J'aimerais avoir vos avis

Cdt

Mon code est le suivant :

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
 
	$('input:button').click(function(){
 
	var test = $(this).val();	
		var mySelection = window.getSelection();
 
		var textentier = $("#editeur").text();
 
		var long1 = textentier.length;		
 
		var position = textentier.indexOf(mySelection);		
 
		var position2 = position + long2;
 
		var chaine1 = textentier.substr(0,position);
		var chaine2 = textentier.substr(position2,long1);	
 
		switch (test){
		case "G":		
		$("#editeur").html(chaine1+'<strong style="color:red;">'+mySelection+'</strong>'+chaine2);	
		break;
		case "I":
 
		break;
		case "S":
 
		break;
		case "L":
 
		break;
		default:
 
		break;
	} 
	});

J ai 4boutons, et selon la valeur du bouton G,I, S ou L, j'insère differentes balises

Le souci que je rencontre est le suivant : Si j'ai la phrase abc abc abc abc, que je selectionne le dernier "abc", ma balise strong s'appliquera sur le premier "abc"

Quelqu'un saurait il comment pallier au pb svp ?

Cdt

04/05/2017, 21h33
Beginner.

Salut,

Pour faire ce genre de chose il y a la fonction execCommand()...

Dernièrement on en a parlé ici.

Il y a un exemple complet d'utilisation ici : http://jsbin.com/newohujevi/edit?html,output
05/05/2017, 13h58
henneka

Merci pour vos reponses ...

ExecCommand est parfait pour ce que je souhaite faire

Cdt