Webkit, IE désélectionnant le texte

Question

Je travaille sur la création d'un plugin jQuery contentEditable. J'ai créé une barre 'outils' pour effectuer des actions sur le texte telles que le mettre en gras, en italique, etc. en utilisant execCommand. Le problème est que lorsque vous sélectionnez du texte et cliquez sur l'un des boutons (divs avec des événements onclick), il désélectionne le texte que vous avez sélectionné (tous les navigateurs). Pour résoudre ce problème, j'ai utilisé:

toolBar.onmousedown=function(){return false}; 

Ce qui fonctionne bien dans Firefox et Opera. J'essaie d'utiliser

toolBar.onselectstart = function(){return false}; 

qui empêche la sélection de texte dans IE. Cependant, ni webkit ni IE fonctionnent. J'ai déjà vu cela avec des boutons de saisie, mais je préfère utiliser les divs. Des idées?

Answer 1

J'ai résolu ce problème en resélectionnant le texte.

Sur mouseup je capture les informations de sélection:

$.getSelection = function() { 
    // ie has its own way of doing things from here on. 
    if($.browser.msie) return document.selection.createRange(); 

    if (window.getSelection) { 
     var selection = window.getSelection(); 
    } 
    else if (document.selection) { // should come last; Opera! 
     var selection = document.selection.createRange(); 
    } 

    if (selection.getRangeAt) 
     var range = selection.getRangeAt(0); 
    else { // Safari! 
     var range = document.createRange(); 
     range.setStart(selection.anchorNode, selection.anchorOffset); 
     range.setEnd(selection.focusNode, selection.focusOffset); 
    } 
    if (!range.toString().match(/[^\t\r\n ]/)) return false; 

    var ret = {}; 

    // start end length text 

    ret.startContainer = range.startContainer; 
    ret.start = range.startOffset; 
    ret.endContainer = range.endContainer; 
    ret.end  = range.endOffset; 
    ret.length = ret.end - ret.start; 
    ret.collapsed = range.collapsed; 

    return ret; 
}; 

Ceci est stocké quelque part de votre choix.

je puis soit RESELECT le texte si le navigateur est compatible w3c pour la gamme DOM (ie tous, mais par exemple) et effectuer la execCommand:

function handleReselection() { 
    if($.browser.msie) { 
     return this.selection; 
    } 
    else { 
     setSelection(this.selection); 
     return document 
    } 
} 

function setSelection(selection) { 
    var sel = window.getSelection(); 
    sel.removeAllRanges(); 
    var range = document.createRange(); 
    range.setStart(selection.startContainer, selection.start); 
    range.setEnd(selection.endContainer, selection.end); 
    sel.addRange(range); 
} 

handleReselection().execCommand('bold', false, null); 

Answer 2

Une alternative simple consiste à utiliser <bouton> balises pour votre barre d'outils . De cette façon, il ne perd pas la sélection de texte en premier lieu.