backspace div contenteditable et suppression des problèmes de noeud de texte
Il y a beaucoup de problèmes avec contenteditable divs et la suppression de html et/ou de non contenu contenu modifiable modifiable à l'intérieur de divs.
À l'aide d'une réponse par l'excellent Tim ici-Bas: Comment faire pour supprimer un élément HTML à l'intérieur d'un div avec l'attribut contentEditable?
À l'aide de Tim code, à l'ensemble du texte nœud est supprimé. J'ai besoin de ce travail comme tout textarea serait, la suppression de caractère par caractère et juste pour s'assurer que les éléments html peuvent être backspaced.
J'ai essayé les
else if(node){
var index = node.length-1;
if(index >= 0)
node.deleteData(index,1);
else
this.removeChild(node);
}Mais c'est évidemment de ne pas fonctionner correctement. Si je suis à la fin du contenu, les choses fonctionnent comme prévu. Mais si je place le curseur n'importe où ailleurs, c'est encore la suppression de la fin.
Je suis perdu à ce point, que toute aide est très appréciée
http://jsfiddle.net/mstefanko/DvhGd/1/
source d'informationauteur mstef
Vous devez vous connecter pour publier un commentaire.
Après décomposant de la façon dont google utilise contenteditable divs dans leur google plus utilisateur de marquage, j'ai atterri sur une beaucoup plus solution raisonnable. Peut-être que ça aidera quelqu'un d'autre.
Après l'ajout de 1 tag, vous pouvez déjà voir beaucoup de différences dans le code html de votre navigateur.
Dans Google Chrome, un espace est ajouté à chaque balise. Le bouton de la balise est utilisée. Et le chrome seulement contenteditable="texte seulement" est utilisé.
Quand je la touche retour arrière de l'espace dans google chrome, une balise BR est ensuite ajouté.
Dans Firefox, la balise BR est ajouté immédiatement à la première balise. Les espaces ne sont pas nécessaires. Et une balise input est utilisée à la place de la balise button.
La balise BR est la plus grande percée, j'ai eu en creusant à travers cela. Avant d'ajouter cela, il y avait beaucoup de bizarre le comportement de la suppression des balises, ainsi que des problèmes de focus.
Dans IE, plus intéressant, des modifications ont été apportées. Un span avec contenteditable faux est utilisé pour les balises. Pas d'espaces ni de balises BR, mais un vide nœud de texte.
Avec tout ça, vous n'avez pas à copier google exactement.
Les parties importantes:
Si vous êtes le rendu HTML, procédez de la manière suivante...
1. Chrome devrait utiliser le bouton tag
2. Firefox/IE doit utiliser la balise d'entrée
Pour la plage/la sélection en général, vous voulez traiter les choses comme des balises comme un seul caractère. Vous pouvez l'intégrer dans votre gamme/sélection de la logique, mais le comportement de l'entrée/bouton de balises est beaucoup plus fiable et beaucoup moins de code.
IE se comporte mieux dans IE7-8 à l'aide d'un empan. Simplement à partir d'un point de vue de l'INTERFACE utilisateur. Mais si vous n'avez pas de soins si votre site est assez dans les anciennes versions d'IE, l'entrée a du bon comportement dans IE ainsi que firefox.
3. Chrome uniquement, utilisez la contenteditable="texte seulement" attribut modifiable div.
Sinon, beaucoup de problèmes bizarres se produisent pas uniquement lorsqu'un utilisateur essaie de coller de texte enrichi, mais aussi lors de la suppression d'éléments html, parfois, les styles peuvent être transmis à la div, j'ai noté beaucoup d'étranges problèmes avec cela.
4. Si vous avez besoin de définir la position du curseur à la fin de la div, de définir la fin de la plage avant la BR.
pour FireFox: