FF : remplacement séléction wysiwyg
Salut à tous,
J'ai un div avec la propriété contentEditable="true" (but wysiwyg), le problème est sous firefox, j'ai emprunté une partie du code de l'éditeur "Midas" de Firefox (http://www.mozilla.org/editor/midasdemo/) et je l'ai intégré en une fonction gérant IE :
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
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
| function replace_selection_by(html) {
if(navigator.appName == 'Microsoft Internet Explorer') {
document.selection.createRange().pasteHTML(html);
}
else {
var node = document.createElement('span');
node.innerHTML = html;
document.body.appendChild(node);
var sel = window.getSelection();
var range = sel.getRangeAt(0);
sel.removeAllRanges();
range.deleteContents();
var container = range.startContainer;
var pos = range.startOffset;
range = document.createRange();
if(container.nodeType == 3 && node.nodeType == 3) {
container.insertData(pos, node.nodeValue);
range.setEnd(container, pos+node.length);
range.setStart(container, pos+node.length);
}
else {
var afterNode;
if(container.nodeType == 3) {
var textNode = container;
container = textNode.parentNode;
var text = textNode.nodeValue;
var textBefore = text.substr(0,pos);
var textAfter = text.substr(pos);
var beforeNode = document.createTextNode(textBefore);
afterNode = document.createTextNode(textAfter);
container.insertBefore(afterNode, textNode);
container.insertBefore(node, afterNode);
container.insertBefore(beforeNode, node);
container.removeChild(textNode);
}
else {
afterNode = container.childNodes[pos];
container.insertBefore(node, afterNode);
}
range.setEnd(afterNode, 0);
range.setStart(afterNode, 0);
}
sel.addRange(range);
}
} |
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Le problème est que si par exemple j'ai ce schéma :
|||||| HEADER ||||||
MENU CONTENU
|||||| FOOTER ||||||
admettons que le "CONTENU" soit contentEditable="true", si je séléctionne une partie de texte dans le "MENU", "HEADER" ou "FOOTER", et que je lance la fonction, elle écrasera le contenu, alors que le reste n'a pas la propriété contentEditable="true"
Je sais pas trop si vous avez compris, et si vous avez besoin d'eclaircissement, n'hésitez pas :)
Merci d'avance