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
| <!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
}
-->
</style>
<script>
function replaceSelection(coul) {
var sel, range, fragment, str;
sel = window.getSelection();
var oParent = sel.getRangeAt(0).commonAncestorContainer;
var oRange = sel.getRangeAt(0);
var oNewSpan = document.createElement('SPAN');
oNewSpan.appendChild(oRange.cloneContents());
var G= oNewSpan.textContent.length-oNewSpan.textContent.replace(/^\s+/g, '').length;//trim left
var D= oNewSpan.textContent.length-oNewSpan.textContent.replace(/\s+$/g, '').length;//trim rigth
oRange.setStart(oRange.startContainer, oRange.startOffset + G);
oRange.setEnd(oRange.endContainer, oRange.endOffset - D);
sel.removeAllRanges();
sel.addRange(oRange);
var mySelectionhtml = sel.getRangeAt(0).extractContents();
var Span = document.createElement("SPAN");
Span.appendChild(mySelectionhtml);
Span.innerHTML = Span.outerHTML; // au cas ou on selectionne une balise shadow complete on prend le tag span de l'element en tant qu'enfant du nouveau span
var str = Span.innerHTML; //recupération du string html de l'innerhtml du span
str=str.replace(" ","");
var sp = Span.getElementsByTagName("*"); //collections de tout les spans et autre balises interne a Span
for (var i = 0; i < sp.length; i++) { // on demarre la boucle sur TOUT!! les elements
if (sp[i].tagName == "SPAN") { //si c'est un SPAN !!
str = str.replace(sp[i].outerHTML, sp[i].innerHTML); // supression des span dans Span en ne gardant que l'interieur des spans
}
if (sp[i].innerText == "") { // si c'est une balise vide quelque soit le tagName
str = str.replace(sp[i].outerHTML, ""); // supression des balises vides cela arrive quand on a une selection entiere le dom reproduit la balise de debut a la fin
}
}
if (coul != false) {
Span.style.textShadow = "0px 0px 10px " + coul; // si coul une couleur alors shadow
} else {
Span.id="sp";
Span.style.textShadow = "none"; //sinon NONE !!!
}
//str = str.replace(/"<\/strong><strong>"/g, ""); ////RESTE A REGLER CES DEUX SOUCIS
// str = str.replace(/"<\/em><em>"/g, "");
Span.innerHTML = str; //on replace le code néttoyé dans le nouveau SPAN
document.getElementById('innernewnode').value = " code de newnode :" + Span.outerHTML;
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents(); // on delete le range complet
range.insertNode(Span); //on insert dans le range le new span que l'on a nétoyé
sel.removeAllRanges(); //on peut carrément supprimer le range
sel.addRange(range); // et y ajouter notre range tout propre
}
//dernier nettoyage du parent container cette fois (pas utile tout le temps)
do{oParent=oParent.parentElement;}while(oParent.tagName!="P");
var sp = oParent.getElementsByTagName("*");
for (var i = 0; i < sp.length; i++) {
if (sp[i].innerText == "") {
sp[i].parentElement.removeChild(sp[i]);
}else{
if (sp[i].innerText == " ") {
sp[i].parentElement.replaceChild(sp[i], " ");
}
}
}
if(document.getElementById("sp")){
var N=false;
var spn=document.getElementById("sp");
var par=document.getElementById("sp");
do{par=par.parentElement;if(par.tagName=="SPAN"){ N=true;};}while(par.tagName!="P");
if(N==false){
alert("pas none");
par.innerHTML=par.innerHTML.replace(spn.outerHTML,spn.innerHTML);
}
spn.removeAttribute("id");}
//par.innerHTML = par.innerHTML.replace(/"<\/strong\>\<strong\>"/gi, "");
//par.innerHTML = par.innerHTML.replace(/"</em><em>"/gi, "");
document.getElementById('res').value = document.getElementById('comment').outerHTML;
}
</script>
</head>
<body>
<div id="comment" class="comment" contenteditable>
<p>
<font size="5">teste de <span style='text-shadow: 0px 0px 10px red;'><strong>te</strong></span><span style="text-shadow: 0px 0px 10px blue;"><font color="red"><strong><em>xt</em>e</strong></font></span> shadow</font>
</p>
</div>
<input type="button" value="backblue" onclick="replaceSelection('blue')" />
<input type="button" value="backgreen" onclick="replaceSelection('green')" />
<input type="button" value="backRED" onclick="replaceSelection('red')" />
<input type="button" value="backmagenta" onclick="replaceSelection('magenta')" />
<input type="button" value="none" onclick="replaceSelection(false)" />
<input type="button" id="html" value="coupe" onclick="coupe()" />
<input type="button" id="html" value="HTML" onclick="alert(document.getElementById('comment').innerHTML)" />
</br>
<textarea id="res" rows="15" cols="100">
</textarea>
<textarea id="innernewnode" rows="15" cols="100">
</textarea>
</body>
</html> |
Partager