re voila ma version quasi finale
re
bon ben je suis aller jusqu'au bout de mon idée avec extractcontent() et contextualfragment
j'ai un résultat quasi hyperpropre sauf les "</strong><strong>" ,"</em><em>" dans la meme balise parent
j'ai mis des commentaires a gogo
Code:
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
| <!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;
////tagParent=sel.getRangeAt(0).startContainer.parentNode.tagName;
var mySelectionhtml = sel.getRangeAt(0).extractContents();
var Span = document.createElement("SPAN");
Span.appendChild(mySelectionhtml); // on place les éléments de la sélection dans Span
Span.innerHTML = Span.outerHTML; // au cas ou on sélectionne une balise shadow complète on prend le tag span de lélément en tant qu'enfant du nouveau span
var str = Span.innerHTML; //recupération du string html de l'innerhtml du span
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); // suppression 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 sélection entière 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.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
if (range.createContextualFragment) {
fragment = range.createContextualFragment(Span.outerHTML); //on créé un fragment
}
var firstInsertedNode = fragment.firstChild; //on determine le debut du fragment
var lastInsertedNode = fragment.lastChild; //on determine fin du fragment
range.insertNode(fragment); //on insert dans le range que l'on vider le fragment issue du new span que l'on a nétoyé
if (firstInsertedNode) { // si j'ai bien compris on bride le range au fragment ainsi les range vide deletée précèdemment ont disparu donc 1 seul range
range.setStartBefore(firstInsertedNode);
range.setEndAfter(lastInsertedNode);
}
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)
var sp = oParent.getElementsByTagName("*");
for (var i = 0; i < sp.length; i++) {
if (sp[i].innerText == "") {
sp[i].parentElement.removeChild(sp[i]);
}
if (sp[i].innerText == " ") {
sp[i].parentElement.replaceChild(sp[i], " ");
}
}
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><strong><font color="red"></font></strong> 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> |