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 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223
| <!doctype html><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
white-space: pre;
}
-->
</style>
<script>
function backcol(coul, MOD) {
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).extractContents();
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 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;
//alert (oSpan.outerHTML);
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 avec espG ,oSpan et espD
}
var fL = fragment.childNodes.length;
for (var L = 0; L < fL; L++) {
if (fragment.childNodes[L].tagName == "SPAN") {
var indC = L;
} /// on REPERE oSpan DANS LE FRAGMENT
}
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
if (fragment.firstChild.innerHTML == "undefined") { //AU CAS OU SE SERAIT JUSTE UN TEXTNODE
var firstInsertedNode = fragment.firstChild; //on determine le debut du fragment
var lastInsertedNode = fragment.lastChild; //on determine fin du fragment
}
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
// 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); // 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 ( ici facultatif) oSpan est bien ciblé
//maintenant on fait ce que l'on veut sur oSpan
if (MOD != null) {
oSpan.style.textShadow = "0px 0px 10px " + coul;
}
if (MOD == null) {
oSpan.style.textShadow = "none";
}
//////////////gestion du couleur / none /ou innerHTML//////////////
var no = false
var noC = false
var par = oSpan
do {
par = par.parentElement;
if (par.tagName == "SPAN" && par.style.textShadow == "0px 0px 10px " + coul) {
noC = true;
}
if (par.tagName == "SPAN" && par.style.textShadow != "none") {
no = true;
}
} while (par.tagName != "P");
if (no == false && MOD == null) {
oSpan.outerHTML = oSpan.innerHTML;
}
if (noC == true && MOD != null) {
oSpan.outerHTML = oSpan.innerHTML;
}
///////////////////////////////////////////////////////////
//alert(oSpan.parentElement); //la preuve
var sp = parent.getElementsByTagName("*");
for (var i = 0; i < sp.length; i++) {
if (sp[i].tagName == "SPAN" && sp[i].innerText == " ") {
sp[i].outerHTML = " ";
alert(sp[i].previousSibling.outerHTML);
}
}
////////////////////////////////////////////////////////////////////
document.getElementById('res').value = document.getElementById('comment').outerHTML;
}
</script>
</head>
<body>
<div id="comment" class="comment" contenteditable>
<p>
du texte sans format
</p>
<p>
<font size="5">du texte <font style="background-color: yellow;">tout</font> seul <font style="background-color: rgb(0, 255, 0);">enfant</font> direct du div </font>
</p>
<p align="">
<font size="5">teste <span style="text-shadow: 0px 0px 10px blue;">de</span> <span style="text-shadow: 0px 0px 10px red;">texte</span><span style="text-shadow: 0px 0px 10px green;">shad</span><span style="text-shadow: 0px 0px 10px red;">ow </span>pour testes</font>
</p>
<p align="center">
<font size="7"> E<font color="#ff0000">XE</font><img src="data:image/gif;base64,R0lGODlhEgATAOedAABUAgBWDAZXBgBdHABfE24+Fg5dDgJhKhJgElhKLxRhFBViFXBHGxJmFwtrMERgGAB0LAB2HQB6IBl+QxaFMgCKQ1ZzOheGOJBjMB+DR8pYCZxjK6NjKA2NSCCJOatjJCSKO71jHQCXSrhmGgiXS8pjF9dkErJtKwCjTzKVVMJwKsRwJchwJ/JnCNJwH02UWuBvGVOTW/9tCOB1Hg2uV9l4H/9xCep2Gfd3HGOcYw24Vh6zWvp5Ghi3W+x+IcOHQfJ9HPSAHf9+FP9+F/9+GPaCH/+AHaOYbP+KH/+KLP+NHf+NJfyOJP+OHv+MO/+RJPWVJv+TJf+TOf+VJv+WK/+YJf+YLv+ZLv+cLv+cMf+fK/+fL/ejM/+hM5a3lv+kNP+mNf+nMP+qPP+pU/+tN/+wO/+xPP+wR/+yOv+yPf+0N/+0O/+xXf+1O/+3PPe4WP+1X/+8Pv+4a/+6aP++Rv+6b/++Sf+/Rf+8c//BTf+/ZP/CR/+/cf/DTv/Bb//GQv/EV//DYv/JRP/GY//Gav/NSP/Ijf/Ob//Pg//TZ//VdP/Xcv/ZbP/XnP/cbP/biP/alv/bk//hbf/flP/flv/kd//juP/ujf/zcv/xn//zkP/zpv/5tP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEKAP8ALAAAAAASABMAAAjhAP8JHIhIUZuBCBMKtMQpUZwuYOwAUjiwEaY/a764KVQJUpaEcAgNOhMJzRUrTQSFkeJEzEA5mzI9+tPmyRAiQqqMMTTJER6Bh/TwmRNFCw4WKkwE2bKEihkjAstQuuQnDZkfRxIUADIFiYwbKwSykUSzThIXDDTYUJKHSwkMCGtAwVKECZ09au4wenOCIocQG3xoWtQnEI8P/3IopthiBgwYIx54iTGhA40XFAdaUHAhQwoSKBwYyCyQAoABB0RUgBCB9L8eAv4FICDB9UAPthXuaJA7IYjeCHUsAD4QAcKAADs="><font face="Algerian">M</font><font face="Broadway">P</font>L<img src="data:image/gif;base64,R0lGODlhFAAUAKUwAAAAABADAzMBAQAxAAYwMVICAnIAAABFAABVBABvEgBrKAF2NAJXHglzQyJdUVRvY2BTMJMCAqoBAckBAP8AAOoAAMQsJwCOLACvLACVFQDPMQ2LSyWMWDWSZiurbgOpU0mPbwrYZ/8A/3GVilKpfmyzmmnLmnbTq2bjqS3ciYu4r5LLsKjl2LbTzf+Fibdzcf///////////////////////////////////////////////////////////////yH5BAEsAT8ALAAAAAAUABQAAAbWwJ9w+IsILBOikkgoRCgVgGTyeC2HAAolUJACBICJwBBRlrSUsIDSjRQqb2VWAjCsu1CKpJAkQihgegITE2l0FAZLawBPdWxgFWVLKlpeFQGIAA5XQiVregAFEgZ9nD9fEYR2iKY/KhVosQCtPxJ5AAAELEMKHAs/JAoKByYsIwAJF0QHDBonBwM/CBsrGBko0rs/IAkYKMJEAxchIdEOH8ADIR4kDSRKBwcp6w4e0vMtCAcrSwoICiM+sOigL14CflcWlBihgUEHWksyMICoRAUCFa2CAAA7">E DE TEXTE</font> </p>
</div>
<input type="button" value="backblue" onclick="backcol('blue',true)" />
<input type="button" value="backgreen" onclick="backcol('green',true)" />
<input type="button" value="backRED" onclick="backcol('red',true)" />
<input type="button" value="backmagenta" onclick="backcol('magenta',true)" />
<input type="button" value="NONE" onclick="backcol(false,null)" />
</br>
<textarea id="res" rows="15" cols="100">
</textarea>
<script>
document.getElementById('res').value = document.getElementById('comment').outerHTML;
</script>
</body> |
Partager