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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<style type="text/css">
<!-- .editor {
font-family: tahoma
}
.actionbar {
background-color: #c0c0c0;
border: 1px solid black
}
.comment {
border: 2px dotted red
}
-->
</style>
<script>
function Shadowcolor(coul, MOD) {
var mySelection = window.getSelection();
var mySelectionhtml = window.getSelection().getRangeAt(0).cloneContents();
var newNode = document.createElement("SPAN");
newNode.appendChild(mySelectionhtml);
var str = newNode.innerHTML;
var f = newNode.getElementsByTagName("SPAN");
//on supprime tout les shadow interne
if (f.length > 0) {
for (var i = 0; i < f.length; i++) {
str = str.replace(f[i].outerHTML, f[i].innerHTML);
}
}
newNode.innerHTML = str;
var xxxx = mySelection.getRangeAt(0);
xxxx.deleteContents();
xxxx.insertNode(newNode);
//pour la suite il nous faut identifier la balise "p" qui contient la newNode
if (newNode.parentElement.tagName != "P") {
var p = newNode;
do {
p = p.parentElement;
} while (p.tagName != "P");
}
// on va netoyer les balises vides
var nb = p.getElementsByTagName("*").length;
var sp = p.getElementsByTagName("*");
//for(var e=0;e<nb*2;e++){
for (var i = sp.length; i >= 0; i--) {
if (sp.innerHTML == "") {
sp.parentElement.removeChild(sp);
}
if (sp.innerHTML == "\ ") {
sp.parentElement.removeChild(sp);
}
}
// }
alert(p.outerHTML);
// si l'apel est true alors on met la couleur shadow
if (MOD == true) {
newNode.style.textShadow = '0px 0px 10px ' + coul;
}
if (MOD == false) {
var ok = "yes"
var p = newNode;
do {
p = p.parentElement;
if (p.tagName == "SPAN" && p.style.textShadow != "") {
ok = "no";
newNode.style.textShadow = "none";
}
} while (p.tagName != "P");
}
//if(ok!="no"){p.innerHTML=p.innerHTML.replace(newNode.outerHTML,newNode.innerHTML;}
p.innerHTML = p.innerHTML.replace(/<\/strong><strong>/gi, "");
p.innerHTML = p.innerHTML.replace(/<\/em><em>/gi, "");
alert(p.outerHTML);
document.getElementById('comment').focus();
}
function voir() {
var mySelectionhtml = window.getSelection().getRangeAt(0).cloneContents();
var newnode = document.createElement("FONT")
newnode.appendChild(mySelection)
alert(newnode.mySelectionhtml);
}
function voir2() {
var range = window.getSelection().getRangeAt;
alert(range(0).htmlText);
}
function backcol(coul, MOD) {
document.execCommand("backcolor", true, coul)
}
</script>
</head>
<body>
<div id="comment" class="comment" contenteditable>
<p>
<font size=5>teste de <strong>te<font color=red><em>xt</em>e</font></strong> shadow</font>
</p>
</div>
<br />
<input type="button" id="shadow" value="shadowblack" onclick="Shadowcolor('black',true)" />
<input type="button" id="shadow2" value="shadowred" onclick="Shadowcolor('red',true)" />
<input type="button" id="shadow2" value="shadowblue" onclick="Shadowcolor('blue',true)" />
<input type="button" id="shadow2" value="shadowmagenta" onclick="Shadowcolor('magenta',true)" />
<input type="button" id="shadow3" value="retir" onclick="Shadowcolor('rien',false)" />
<input type="button" id="shadow3" value="voir interieur" onclick="voir('')" />
<input type="button" id="shadow3" value="voirrange" onclick="voir2('')" />
<input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" />
</BR>
<input type="button" id="BACKRED" value="backred" onclick="backcol('blue',true)" />
</body>
</html> |
Afficher le code html correspondant à la sélection de texte
: ça peut servir aux autres 
Répondre avec citation
Envoyé par patricktoulon
Partager