document.execCommand ('unlink') ne fonctionne pas pour les ancres dans Firefox

Question

J'utilise document.execCommand("unlink", false, false); pour supprimer les liens hypertexte et les ancres dans mon propre éditeur html. Cela fonctionne bien sauf dans un cas: il ne supprime pas les ancres dans Firefox. Est-ce que ce n'est pas supporté dans Firefox ou est-ce qu'il y a une autre manière de résoudre ceci?

Voici mon exemple:

<div contenteditable="true">This is an <a name="anker">anchor</a>. And this is a <a href="#">normal hyperlink</a>. Please try to select them and then press the "Unlink" button.</div> 

<input type="button" id="btn" value="Unlink"> 

$(document).ready(function() {  
    $('#btn').click(function() { 
     document.execCommand("unlink", false, false); 
    }); 
}); 

Check it out on Fiddle

Answer 1

Pour répondre à votre question sur quelles alternatives il y a, vous pourriez forcer la question et définir href attribut de tout élément a avant d'appeler unlink:

$(document).ready(function() {  
    var $editable = $('[contenteditable]'); 

    $('#btn').click(function() { 
     $editable.find('a:not([href])').attr('href', '#'); 
     document.execCommand("unlink", false, false); 
    }); 
}); 

http://jsfiddle.net/Bz7pR/7/

Il existe, bien sûr, plusieurs façons de "résoudre" le problème. Je pense que $.unwrap() fonctionnerait probablement aussi bien. Je ne suis pas si versé sur document.execCommand et les éditeurs de texte riche, mais j'imagine que vous devez être prudent, précis et test de test.

Remarque, ce n'est qu'une démonstration; Vous devez vraiment penser à cela et considérer exactement comment vous allez gérer ce problème. Par exemple, vous pouvez détecter et exécuter uniquement si Firefox est le navigateur, ce qui limiterait les dommages inattendus ou les résultats que vous pourriez avoir.

EDIT

Et voici une version plus complète qui affecte uniquement la plage de texte sélectionné:

$(document).ready(function() {  
    $('#btn').click(function unlink() { 
     var holder, 
      frag, 
      range, 
      child; 

     if (window.getSelection && window.getSelection().getRangeAt) { 
      holder = document.createElement('div'); 
      frag = document.createDocumentFragment(); 
      range = window.getSelection().getRangeAt(0); 

      $(holder) 
       .append(range.cloneContents()) 
       .find('a:not([href])') 
       .attr('href', '#'); 

      while ((child = holder.firstChild)) { 
       frag.appendChild(child); 
      } 

      range.deleteContents(); 
      range.insertNode(frag); 
     } 

     document.execCommand("unlink", false, false); 
    });  
}); 

http://jsfiddle.net/Bz7pR/12/

Je ne suis pas le génie en matière de texte gammes et sélections, donc j'ai modifié le code trouvé dans cette réponse:

https://stackoverflow.com/a/6252893/451969

Pour trouver ce qui est ci-dessus. Si quelqu'un voit quelque chose d'incorrect ou d'incohérent, laissez-moi un commentaire ci-dessous.