Ça marche bien chez moi !
re
heu .. ben ca dépends de ce qui est attendu alors
pour moi non ca marche pas
dans la capture on voit:
"contenus "et "plus" dans 2 span imbriqués on ne devrait pas
on voit un span class test avec 2 espace on ne devrait pas
on voit "long" et "que" dans 2 span test on ne devrait pas
avez vous regarder la méthode que j'ai employé dans la discussion remplacement ......
y a pas plus simple et imparable
une chose essentielle
en fait le tout est de distinguer les " " et " "
doit etre un espaces entre 2 balises
" " est un espace entre 2 mots dans une balises
a la sélection on standardise ces deux sans distinction ca devient qoi qu'il en soit un " "
a la repose du text avec le "tSpan"(span secondaire temporaire) le " " redevient
Patrick STOP, tu es encore en train de nous pourrir une de tes discussions avec tes problèmes de shadow.heu .. ben ca dépends de ce qui est attendu alors
pour moi non ca marche pas
Je te rappelles l'objet de TA discussion, reprend le post #1 si tu ne t'en souviens pas. STRUCTURE ton développement, déjà dit d'ailleurs, et les vaches seront bien gardées.
Il me semble que l'objectif primaire est atteint donc basta !Envoyé par c'est toi qui l'a écrit
oui
si tu veux mais je crois avoir précisé peut être pas dans cette discussion mais de toute façon les 3 post font partie d'un même lot et pour la même raison finale
en ce qui concerne ta démo elle fonctionne mais des espaces tout seuls dans un span c'est justement ce que je voulais Eviter
car le nettoyage après est encore plus délicat car il y en a que je dois garder et pour les déterminer ensuite court forrest
regarde dans l'autre discussion comment j'ai fait pour supprimer l'espace devant
de ton point de vue mais pas de celui d'un forum !si tu veux mais je crois avoir précisé peut être pas dans cette discussion mais de toute façon les 3 post font partie d'un même lot et pour la même raison finale
Un forum sert également à d'autres pour trouver une réponse à une question posée ce qui devient extrêmement difficile, voire impossible, dans tes discussions.
Me concernant cette discussion est close!
re
Bonjour
ou est la fonction " getTextNode" chez moi elle est "indéfinie"
bon ben pour tes codes je suis allé récupérer les lien dans le head
puis-je toute fois proposer la mienne de solution
nous somme d'accords que le sujet est supprimer les espaces(caractères invisibles) devant et après dans selection
et rien que ca
et ben voila
j'ajouterais que si l'on veut parfaire la chose a la place de insertNode(oSpan) a la fin on peut recréer un fragment avec dedans le innerHTML de oSpan ainsi on se retrouve avec le bon texte sélectionné sans avoir modifié quoi que se soit dans le code du parent
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
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 function trimL_Rrange(){ var espG = ""; var espD = ""; var sel = window.getSelection(); var parent = sel.getRangeAt(0).commonAncestorContainer; if (parent.nodeType === 3) { parent = parent.parentNode; } var mySelecthtml = sel.getRangeAt(0).cloneContents(); var oSpan = document.createElement("SPAN"); oSpan.appendChild(mySelecthtml); var B = oSpan.getElementsByTagName("*") var str = oSpan.innerHTML for (var i = 0; i < B.length; i++) { if (B[i].tagName == "SPAN") { str = str.replace(B[i].outerHTML, B[i].innerHTML); } if (B[i].innerText == "" && B[i].tagName != "IMG") { str = str.replace(B[i].outerHTML, ""); } } var midle = str.replace(/ \;/gi, ""); if (midle.substring(0, 1) == " ") { midle = midle.substring(1, midle.length); } if (midle.substring(midle.length - 1, midle.length) == " ") { midle = midle.substring(0, midle.length - 1); } espG = str.split(midle)[0] espD = str.substring(espG.length + midle.length, str.length); alert(":" + espD + ":"); oSpan.innerHTML = midle; var range = sel.getRangeAt(0) range.deleteContents(); // on delete le range complet if (range.createContextualFragment) { fragment = range.createContextualFragment(espG + oSpan.outerHTML + espD); //on créé un fragment } if (fragment.childNodes.length == 2) { var indC = 0; } else { var indC = 1; } var firstInsertedNode = fragment.childNodes[indC]; //on determine le debut du fragment var lastInsertedNode = fragment.childNodes[indC]; //on determine fin du fragment range.insertNode(fragment); if (firstInsertedNode) { range.setStartBefore(firstInsertedNode); range.setEndAfter(lastInsertedNode); } sel.removeAllRanges(); //on peut carrément supprimer le range sel.addRange(range); // on garde la selection active // en utilisant les fragments ci dessus je n'ai plus la main mise sur oSpan Alors...... //pour garder la main mise sur oSpan pour le reste de, la fonction (shadow) maintenant que le texte est bien ciblé on réinsere ospan en tant que range complet //ainsi on a la possibilité de faire ce que l'on veut sur lui jusqu'a la fin de la fonction var range = sel.getRangeAt(0) range.deleteContents(); range.insertNode(oSpan); sel.removeAllRanges(); //on peut carrément supprimer le range sel.addRange(range); // on garde la selection active ( ici facultatif) oSpan est bien ciblé alert(oSpan.parentElement); //la preuve //////////////////////////////////////////////////////////////////// document.getElementById('res').value = document.getElementById('comment').outerHTML; }
voila
Salut,
Je suis de nouveau un peu perdu : ici tu nous dit que c'est bon mais dans l'autre fil tu nous dit qu'il y a toujours le problème des espaces successifs ??? Alors pourrais-tu clarifier la situation, ça marche ou pas ?
Si tu as toujours le problème des espaces successifs alors il faudrait se pencher sur la solution de NoSmoking qui, me semble-t-il, marche même dans le cas où on a affaire à des espaces multiples et successifs... Certes il y a le dom qui est modifié (notamment ajout de span en partie pour montrer le résultat visuellement) mais on a là le principe qu'on peut adapter pour qu'il n'y ait aucune modification du dom...
re
bonsoir beguinner
non quand je parle des successifs je parle des éléments même tag même attributs c'est pour cela que je ne l'ai pas poster ici
de toute facon je suis limité a des devant et après un mots mais quand j'en ai entre plusieurs mots c'est plus bon
mais pour l'instant c'est les successifs qui m'ennuie et cela se règle dans l'autre post
Bonjour noSmoking et beguinner
voila j'ai enfin trouver ma formule pour trimer un range sans modifier le code html
il me reste que vos ecriture d'experts pour mettre cela au propre et faire un peu plus pro
le principe que j'ai trouvé est
- il y a 3 variable essentielles(espG,midle,espD)
- selection avec la souris
- cretaion du span "oSpan" avec pour ID"spp"
- mettre le clonecontent du range dans oSpan( tres important l'utilisation de clone ,extract reconstruit les balise )
- récupération du string globale dans variable str
- test si le firstchild de ospan est un nodetext(nodetype 3)
- si oui trimer le firstchild
- splitter str avec le trim du firstchild
- idem pour le last child
nous avons notre portion de code sans espaces dans midle
on resplit str par midle
l'item 0 sera espg ,l'item 2 sera espD
la différence avec avant elle se passe a partir de la
je met tout le reste de la fonction dans un if sur espG!="" ou espD !=""
si oui
Attention c'est la que vous allez faire les gros yeux
- création d'un fragment
- avec espG+oSpan.outerHTML+espD
- repérage du oSpan dans le fragment il devient le start et le end
- on insert le fragment
- application du start et end
- nous avons maintenant notre selection sans espaces MAIS!!!! dans un span
- création d'un fragment 2 avec seulement le innerHTML de oSpan ( il est fou ce toulonnais y va ou comme ca , ca y est on l'a perdu )
- un dernier removerange puis un addrange
- et enfin insernode du fragment 2
la nous nous retrouvons avec dans la sélection le oSpan complet + le oSpan innerhtml (Alors la!!!! il est définitivement perdu le toulonnais )
mais non
le span qui a le id"spp".parentElement.removeChild(le span qui a le id"spp")
voili voilou on a bien notre sélection sans espaces et sans!!!! modifier le code html de base
alors vous en dites quoi on met cela au propre????peut etre avec des techniques plus conventionnelles
code indenté
il y a aussi cette version qui utilise un autre moyen pour espG,espD,midle c'est au choix
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
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 function trimrangeLR() { var espG = ""; var espD = ""; var sel = window.getSelection(); var parent = sel.getRangeAt(0).commonAncestorContainer; if (parent.nodeType === 3) { parent = parent.parentNode; } var mySelecthtml = sel.getRangeAt(0).cloneContents(); var oSpan = document.createElement("SPAN"); oSpan.id = "spp" oSpan.appendChild(mySelecthtml); var str = oSpan.innerHTML; var B = oSpan.getElementsByTagName("*") for (var i = 0; i < B.length; i++) { //if (B[i].tagName == "SPAN") { str = str.replace(B[i].outerHTML, B[i].innerHTML);} //uniquement pour ma fonction shadow //on peut quand meme se permettre de faire le ménage ci dessous c'est toujours mieux ( mais facultatif ) if (B[i].innerHTML == " ") { str = str.replace(B[i].outerHTML, ""); espG = " " } if (B[i].innerText == "" && B[i].tagName != "IMG") { str = str.replace(B[i].outerHTML, ""); } } oSpan.innerHTML = str //alert("debut :"+str); var midle = str; oSpan.innerHTML = midle; if (oSpan.firstChild.nodeType == 3) { var first = oSpan.firstChild.data.trim(); if (first.length != 0) { midle = first + midle.split(first)[1]; } } if (midle.substr(0, 1) == " ") { midle = midle.substring(1, midle.length); } if (oSpan.lastChild.nodeType == 3) { var laste = oSpan.lastChild.data.trim(); if (laste.length != 0) { midle = midle.split(laste)[0] + laste; } } if (midle.substr(midle.length - 1, 1) == " ") { midle = midle.substring(0, midle.length - 1); } espG = str.split(midle)[0]; espD = str.split(midle)[1]; oSpan.innerHTML = midle; //alert("midle:"+midle+":"); if (espG != "" || espD != "") { // si il n'y a pas d'espace devant et après on fait rien var range = sel.getRangeAt(0) range.deleteContents(); // on delete le range complet if (range.createContextualFragment) { var fragment = range.createContextualFragment(espG + oSpan.outerHTML + espD); //on créé un fragment avec espG ,oSpan et espD var fragment2 = range.createContextualFragment(oSpan.innerHTML); } var fL = fragment.childNodes.length; for (var L = 0; L < fL; L++) { if (fragment.childNodes[L].id == "spp") { var firstInsertedNode = fragment.childNodes[L]; //on déterminé le début du fragment AVEC OSPAN } if (fragment.childNodes[L].id == "spp") { var lastInsertedNode = fragment.childNodes[L]; //on détermine le début du fragment AVEC OSPAN } } range.insertNode(fragment); if (firstInsertedNode) { range.setStartBefore(firstInsertedNode); // ET VOILA C'EST ICI QUE L'ON GARDE rien que OSPAN DANS LA SELECTION range.setEndAfter(lastInsertedNode); } sel.removeAllRanges(); //on supprime le range sel.addRange(range); // on garde la sélection active range.insertNode(fragment2); //on insert aussi le fragment tel qu'il était au départ sans les espaces bien entendu!! //ON PEUT MAINTENANT SUPPRIMER OSPAN document.getElementById("spp").parentElement.removeChild(document.getElementById("spp")); } //////////////////////////////////////////////////////////////////// document.getElementById('res').value = document.getElementById('comment').outerHTML; //return window.getSelection().getRangeAt(0); }
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
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 function trimrangeLR() { var espG = ""; espD = "" var sel = window.getSelection(); var parent = sel.getRangeAt(0).commonAncestorContainer; if (parent.nodeType === 3) { parent = parent.parentNode; } var mySelecthtml = sel.getRangeAt(0).cloneContents(); var oSpan = document.createElement("SPAN"); oSpan.id = "spp" oSpan.appendChild(mySelecthtml); var str = oSpan.innerHTML; var B = oSpan.getElementsByTagName("*") for (var i = 0; i < B.length; i++) { //if (B[i].tagName == "SPAN") { str = str.replace(B[i].outerHTML, B[i].innerHTML);} //uniquement pour ma fonction shadow //on peut quand meme se permettre de faire le menage ci dessous c'est toujours mieux ( mais facultatif ) if (B[i].innerHTML == " ") { str = str.replace(B[i].outerHTML, ""); espG = " " } if (B[i].innerText == "" && B[i].tagName != "IMG") { str = str.replace(B[i].outerHTML, ""); } } oSpan.innerHTML = str var tx = str; console.log(tx); var tx = tx.replace(/ \;/gi, "*"); var G; for (G = 0; G < tx.length; G++) { if (tx[G] == "*" || tx[G] == " ") continue; else break; } var D; for (var D = tx.length - 1; D > 0; D--) { if (tx[D] == "*" || tx[D] == " ") continue; else break; } var espG = tx.substring(0, G).replace(/\*/gi, " \;"); var midle = tx.substring(G, D + 1).replace(/\*/gi, " \;"); var espD = tx.substring(D + 1).replace(/\*/gi, " \;"); oSpan.innerHTML = midle; if (espG != "" || espD != "") { // si il n'y a pas d'espace devant et apres on fait rien var range = sel.getRangeAt(0) range.deleteContents(); // on delete le range complet if (range.createContextualFragment) { var fragment = range.createContextualFragment(espG + oSpan.outerHTML + espD); //on créé un fragment avec espG ,oSpan et espD var fragment2 = range.createContextualFragment(oSpan.innerHTML); } var fL = fragment.childNodes.length; for (var L = 0; L < fL; L++) { if (fragment.childNodes[L].id == "spp") { var firstInsertedNode = fragment.childNodes[L]; //on determine le debut du fragment AVEC OSPAN } if (fragment.childNodes[L].id == "spp") { var lastInsertedNode = fragment.childNodes[L]; //on determine le debut du fragment AVEC OSPAN } } range.insertNode(fragment); if (firstInsertedNode) { range.setStartBefore(firstInsertedNode); // ET VOILA C4EST ICI QUE L'ON GARDE rien que OSPAN DANS LA SELECTION range.setEndAfter(lastInsertedNode); } sel.removeAllRanges(); //on supprime le range sel.addRange(range); // on garde la selection active range.insertNode(fragment2); //on insert aussi le fragment tel qu'il etait au depart sans les espaces bien entendu!! //ON PEUT MAINTENANT SUPPRIMER OSPAN document.getElementById("spp").parentElement.removeChild(document.getElementById("spp")); } //////////////////////////////////////////////////////////////////// document.getElementById('res').value = document.getElementById('comment').outerHTML; //return window.getSelection().getRangeAt(0); }
Salut,
J'ai regardé mais comme il n'y a que la fonction je n'ai pas testé mais si ça marche alors c'est bien tu as réussi à faire ce que tu voulais (si j'ai bien compris) ?
re oui combiné avec la fonction shadow ca donne un résultat nikel
c'est quand même la version qui utilise les deux boucle que tu a conçu qui fonctionne en toute circonstance
le seul moment ou le code change c'est quand je coupe une font en deux mais ca c'est inévitable sinon les balises seraient pas refermées
prèt pour le menu table?
non je n'ai pas ouvert de fil mais oui c'est a peu pres cela
sauf que je veux que cela soit dynamique et pouvoir régler les colonnes séparément ainsi que les lignes
j'ouvre un fil?? t 'est partant ?
Il faudra peut-être plusieurs fils selon le nombre de fonctionnalités, non ?
C'est-à-dire tu veux pouvoir régler la taille des colonnes et des lignes, c'est ça ? J'ai vu que FF permet cela et d'autre choses encore lorsque la table est dans une zone éditable...
J'ai trouvé cela dans le forum :
- Redimensionner les colonnes d'un tableau ( drag and drop )
- [Article] Créer une table HTML éditable en JavaScript v2.0
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager