1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<title>JS Bin</title>
<style>
.code {
border: 1px solid black;
height: 200px;
white-space: pre;
}
</style>
<script type="text/javascript">
var oSpan;
function execcom(a, couleur) {
clearSpaceRange();
document.execCommand("ForeColor", false, couleur);
document.getElementById("toto").innerText = document.getElementById("titi").innerHTML;
}
function selection() {
return window.getSelection();
}
function getrange() {
var sel = selection();
return sel.getRangeAt(0);
}
function clearSpaceRange() {
var sel = selection();
var range = getrange();
var selectionhtml = range.cloneContents();
oSpan = document.createElement("FONT");
oSpan.appendChild(selectionhtml);
var elem = oSpan.getElementsByTagName("FONT");
var txt = oSpan.innerHTML.replace(/ \;/gi, " ");
console.log("texte avec nbsp remplacé");
console.log(" |" + txt + "|");
for (var i = 0; i < elem.length; i++) {
if (elem[i].innerText === "") {
txt = txt.replace(elem[i].outerHTML, "");
}
//if (elem[i].innerText ===" "){txt = txt.replace(elem[i].outerHTML, " "); }
}
var milieu = "<font id=\"aaa\">" + txt.trim() + "</font>";
var code = txt.replace(txt.trim(), milieu);
console.log("etat du segment complet ");
console.log("|" + code + "|");
var fragment = range.createContextualFragment(code);
var fragment2 = range.createContextualFragment(txt.trim());
range.deleteContents();
range.insertNode(fragment);
sel.removeAllRanges();
//Maintenant le que le font id "aaa" est dedans et ne contient pas d'espace on va le selectionner cette fois si avec createrange() puisque l'on peu l'identifier exactement
var EL = document.getElementById("aaa");
range = document.createRange();
//EL.removeAttribute("ID");
range.setStart(EL, 0);
range.setEnd(EL, EL.childNodes.length);
sel = selection();
sel.addRange(range);
console.log(" etat de la selection finale :");
console.log(" selection finale " + EL.outerHTML);
//************************************************************************
//et voila maintenant on vire le font" aaa" et on met a la place son innerhtml dans la selection
EL.parentNode.removeChild(EL);
range.insertNode(fragment2);
sel = selection();
sel.addRange(range);
// RESULTAT ON A NOTRE SELECTION sans espace et SANS!!!!!! avoir modifié le code !!!!
document.getElementById("toto").innerText = document.getElementById("titi").innerHTML;
}
</script>
</head>
<body>
<div id="titi" class="code" contenteditable="true" spellcheck="false">
<br>
<p>Du texte en <font color="#0000ff"><strong>cou<em>leur</strong></em></font> <font color="#ffff00" size="4">pour</font> les <font color="#ff0000">tests</font> <font color="#00ff99">de</font> selection </p>
</div>
<br>
<br>
<button onclick="execcom('true','false');">nocouleur</button>
<button onclick="execcom('false','#000000');">black</button>
<button onclick="execcom('false','#FF0000');">backrouge</button>
<button onclick="execcom('false','#00FF00');">bac vert</button>
<button onclick="execcom('false','#0000FF');">bleu</button>
<button onclick="execcom('false','#FFFF00');">jaune</button>
<button onclick="clearSpaceRange('');">clearSpace</button>
<div id="toto" class="code" style="display:block;"</div>
</body>
</html> |
re
: ça peut servir aux autres 
Répondre avec citation
Balises[CODE]...[/CODE]
......... et pourquoi pas, pour remercier, un 
pour celui/ceux qui vous ont dépannés.
Envoyé par patricktoulon
Partager