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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
| <!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">
function execcom(a, couleur) {
clearSpaceRange;
document.execCommand("ForeColor", false, couleur);
document.getElementById("toto").innerText = document.getElementById("titi").innerHTML;
}
function execcom2(b) {
document.execCommand("removeFormat", true, b);
}
function selection() {
return window.getSelection();
}
function getrange() {
var sel = selection();
return sel.getRangeAt(0);
}
function clearSpaceRange() {
document.getElementById("toto").innerText = document.getElementById("titi").innerHTML
var sel = selection();
var range = getrange();
var parent = range.commonAncestorContainer;
var selectionhtml = range.extractContents();
var oSpan = document.createElement("FONT");
oSpan.appendChild(selectionhtml);
if (oSpan.lastChild.innerText == "") {//Important !!! on teste le innertext et pas innerHTML,la balise pouvant contenir d'autre balise vides
oSpan.removeChild(oSpan.lastChild);
} //suppression de la balise droite et vide créée par la fermeture de balise dans l'append en cas de selection croisant 2 balises
if (oSpan.firstChild.innerText == "") {//Important !!! on teste le innertext et pas innerHTML,la balise pouvant contenir d'autre balise vides
oSpan.removeChild(oSpan.firstChild);
} //suppression de la balise gauche et vide créée par la fermeture de balise dans l'append en cas de selection croisant 2 balises
if (oSpan.childNodes.length === 1 && oSpan.childNodes[0].tagName=="FONT") {
if (oSpan.childNodes[0].typeNode != 3) {
osPan.innerHTML = oSpan.childNodes[0].innerHTML;
}
} /// si il n'y a qu'une seule balise et pas de typenode 3 alors on prend la balise enfant comme et en tant que oSpan
//alert("|" + oSpan.outerHTML + "|");
var txt = oSpan.innerHTML.replace(/ \;/gi, " "); // on remplace les " " par un espace dans la variable "txt"
milieu = txt.trim(); //on trim le text de "txt"on obtiens ce qu'il faut garder dans oSpan
droite = txt.split(milieu)[1]; //on split le txt complet par la valeur de milieu on garde la partie[1] c'est la droite
gauche = txt.split(milieu)[0]; //on split le txt complet par la valeur de milieu on garde la partie[0] c'est la gauche
oSpan.innerHTML = milieu;
//on met milieu en tant que innerHTML du oSpan on perd donc les coté
//alert("gauche|" + gauche + "|");
//alert("milieu|" + milieu + "|");
//alert("droite|" + droite + "|");
fragment = range.createContextualFragment(gauche + oSpan.outerHTML + droite); //on met donc les 3 morceaux dans le fragment
//on cherche maintenant le ospan pour en récupérer l'index dans la hiérarchie
var fL = fragment.childNodes.length;
for (var L = 0; L < fL; L++) {
if (fragment.childNodes[L].tagName == "FONT") {
var indC = L;
} /// on REPERE oSpan DANS LE FRAGMENT
}
//le depart de la selection devra commencer par oSpan et terminer avec lui
var firstInsertedNode = fragment.childNodes[indC]; //on determine le debut du fragment AVEC OSPAN
var lastInsertedNode = fragment.childNodes[indC]; //on determine fin du fragment AVEC OSPAN
range.insertNode(fragment) //on insert le 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 selection active
//fragment2 = range.createContextualFragment(oSpan.innerHTML);
//suppression des espaces de la selection
var range = getRange() // on reprend le range modifié que j'ai gardé actif
range.deleteContents(); //on delete son contenu
range.insertNode(oSpan); // et maintenant que l'on a remis espG,ospan,espD on garde que osPan dans la selection
sel.removeAllRanges(); //on peut carrément supprimer le range
sel.addRange(range); // on garde la selection active
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="#ff00ff"><strong>cou<EM>leur</EM></strong></font> <font color="#0066ff" size="4">pour</font> les <font color="#ff3399">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('');">clearspacerange</button>
<div id="toto" class="code" style="display:block;"</div>
</body>
</html> |
Supprimer les child nodetype 3 uniquement si ce sont des espaces voir(nbsp;)
: ça peut servir aux autres 
Répondre avec citation
Partager