Pourquoi ContentEditable supprime-t-il "ID" de div

Je rencontre des problèmes pour faire fonctionner un éditeur HTML. Nous utilisons "contentEditable" pour l'implémenter, cependant quand une option de formatage de paragraphe est faite sans contenu sélectionné, IE supprime l'ID de l'un des divs de la page.Pourquoi ContentEditable supprime-t-il "ID" de div

Le problème se répète pour moi avec le HTML,

simplement l'enregistrer dans un fichier,
ouvrir alors dans IE
permettre JScript lorsqu'on lui a demandé
Appuyez sur le bouton
vérifiez que vous obtenez deux boîtes de message
1. le premier dit "MainContents = objet"
2. secondes on dit « MainContents = NULL »

J'utilise IE 6.0.2900.5512 avec XP SP3

Donc, cela vous répétez?

Que se passe-t-il?

<html> 
<head> 

</head> 

<body id="BODY"> 
<div contentEditable="true" id="EDITBOX"> 
</div> 

<div id="MAINCONTENTS" unselectable="on"> 
<button title="Ordered List" unselectable="on" 
    onclick='alert("MainContents = " + document.getElementById("MAINCONTENTS")); 
    document.execCommand("InsertOrderedList"); 
    alert("MainContents = " + document.getElementById("MAINCONTENTS")); 
        '> 
    Push Me 
</button> 
</div> 

</body> 
</html> 

<script type="text/javascript"> 
    document.getElementById("EDITBOX").focus(); 
</script>

Contexte Je travaille pour un éditeur de logiciels qui vendent des logiciels aux entreprises, à l'heure actuelle tous nos clients utilisent IE et il n'y a pas de marché dépendent de soutenir d'autres navigateurs. On m'a dit d'implémenter un éditeur HTML en utilisant contentEditable. Toutes les options de formatage sont basées sur document.execCommand(), par ex. document.execCommand ("bold");

En raison de restrictions de licence (LGPL n'est pas aimé) et/ou le coût, il est très difficile d'obtenir l'approbation d'utiliser un éditeur HTML tiers. Il nous a fallu un temps de connexion juste pour pouvoir utiliser jquery.

L'éditeur travaille indépendamment des commandes de formatage de paragraphe lorsque l'utilisateur n'a aucun élément sélectionné. Le code HTML que j'ai posté est un petit peu de HTML que j'ai écrit pour reproduire le problème que j'ai.

voir aussi http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML12/jsdhtml12-02.htm et Risk of using contentEditable in IE

Source

2009-02-09 Ian Ringrose

Merci pour l'aide de tout le monde, quiconque pense à utiliser "contentEditable" devrait lire les autres réponses à ma question et ensuite penser très dur avant d'utiliser "contentEditable".

J'ai trouvé que si j'utilise un iframe par ex.

<iframe id=EditorIFrame > 
</iframe>

Et créer la div qui est modifiable dans le iframe par exemple

theEditorIFrame = document.getElementById('EditorIFrame'); 
theEditorDoc = theEditorIFrame.contentWindow.document; 
theEditorDoc.body.innerHTML = '<body><div contentEditable="true" id="EDITBOX"></div></body>'; 
theEditorDiv = theEditorDoc.getElementById("EDITBOX") 
theEditorDiv.focus(); 

theEditorDoc.execCommand("InsertOrderedList")

Il semble tout le travail pour moi, à l'heure actuelle jusqu'à ce que je la prochaine mauvaise surprise de « contentEditable » et « execCommand »

Ps Comment puis-je aligner la première ligne de mon code avec le reste?

Source

2009-02-09 14:07:42

ID sont sensibles à la casse. Essayez MAINCONTENTS au lieu de MainContents.

Source

2009-02-09 12:20:23

Merci, je viens de changer mon code pour utiliser MAINCONTENTS au lieu de MainContents, cela ne supprime pas le problème. –

Le premier problème, comme Gary a souligné est l'incohérence dans le cas où il n'affectera pas IE comme l'explorateur getElementById va à l'encontre des spécifications W3 et n'est pas sensible à la casse. Changement de la commande exec pour être: document.execCommand("insertOrderedList",true,""); semble être des objets pour les deux alertes et fait également fonctionner le code un peu mieux dans firefox (qui ne fonctionnait pas du tout).

Je suppose que ma première question serait, avez-vous vraiment besoin de faire cela en utilisant execCommand? Je sais que vous essayez probablement de faire plus que simplement insérer une liste ordonnée, mais je risquerais de deviner que l'implémentation de ce que vous essayez de faire avec le DOM serait probablement une façon plus simple de le faire.

J'ajoute une modification à cette réponse, car plus je joue avec votre code de test, plus mes résultats deviennent incohérents. Je reçois des résultats différents la première fois que je l'exécute dans différents navigateurs et j'obtiens des résultats différents après l'avoir exécuté plusieurs fois et ensuite en redémarrant le navigateur. Pour être parfaitement honnête, c'est exactement le genre de choses que vous voulez absolument éviter en faisant du développement javascript, donc je vais réitérer ma question initiale. Avez-vous vraiment besoin de cette technique pour atteindre vos objectifs. Il y a des moyens meilleurs et plus faciles de faire l'insertion dans le DOM.

Source

2009-02-09 12:34:10 Steerpike

Merci, -> Modification de la commande exec pour qu'elle soit: document.execComman ("insertOrderedList", true, ""); Ne fonctionne pas pour moi. J'ai édité mes questions pour donner un peu plus de contexte. Avec un choix libre, je n'utiliserais pas "contentEditable". –

Essayez ceci;

<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function addToList(text) { 
     var list = document.getElementById('list'); 
     list.innerHTML += '<li>'+text+'</li>'; 
} 
</script> 
</head> 
<body> 

<div contentEditable="true" id="editBox" style="width: 300px; height: 100px; border:1px solid #ff0000;"> </div> 
<ol id="list"></ol> 

<button title="Ordered List" unselectable="on" onclick="addToList(document.getElementById('editBox').innerHTML)">Push me</button> 


</body> 
</html>

Ce qui précède devrait donner des résultats fiables dans la plupart des navigateurs. J'ai testé le dessus dans FF3 et IE6.

Source

2009-02-09 13:14:45

Pourquoi ContentEditable supprime-t-il "ID" de div

Répondre

Questions connexes