comment changer le comportement des blocs contenteditable après enter pressé dans divers navigateurs

en appuyant sur Entrer dans <div contenteditable="true"> </div> firefox <br /> est produit - c'est ok. Mais dans Chrome ou IE un nouveau <div> ou <p> est créé. Que dois-je faire pour que Chrome et IE se comportent comme Firefox?

27
demandé sur Frankie 2010-04-29 12:07:22

5 réponses

comme Douglas L'a dit plus tôt, les navigateurs essaient de cloner l'étiquette précédente lorsque le client commence un nouveau paragraphe sur une page modifiable. La divergence se produit lorsque le navigateur n'a rien à changer, par exemple lorsque le corps de la page est vide. Dans ce cas, différents navigateurs se comportent différemment: IE commence à envelopper chaque chaîne dans une balise

, Chrome enveloppe chaque ligne dans

.

pour augmenter l'expérience de cross-browser, les développeurs de WebKit ont introduit le DefaultParagraphSeparator la commande. Vous pouvez utiliser le JavaScript suivant sur le chargement de page pour Chrome pour changer le séparateur de paragraphe par défaut à < P> tag:

document.execCommand('defaultParagraphSeparator', false, 'p');
23
répondu Sergey Volodko 2013-03-18 17:10:16

La suite va ajouter un <br> lorsque la touche enter est pressée dans tous les navigateurs principaux et tente de placer le caret directement après elle. Cependant, WebKit, Opera et IE ont tous des problèmes pour placer le signe d'insertion correctement après le <br>, que le code suivant Ne tente pas de corriger.

function enterKeyPressHandler(evt) {
    var sel, range, br, addedBr = false;
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    if (charCode == 13) {
        if (typeof window.getSelection != "undefined") {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                br = document.createElement("br");
                range.insertNode(br);
                range.setEndAfter(br);
                range.setStartAfter(br);
                sel.removeAllRanges();
                sel.addRange(range);
                addedBr = true;
            }
        } else if (typeof document.selection != "undefined") {
            sel = document.selection;
            if (sel.createRange) {
                range = sel.createRange();
                range.pasteHTML("<br>");
                range.select();
                addedBr = true;
            }
        }

        // If successful, prevent the browser's default handling of the keypress
        if (addedBr) {
            if (typeof evt.preventDefault != "undefined") {
                evt.preventDefault();
            } else {
                evt.returnValue = false;
            }
        }
    }
}

var el = document.getElementById("your_editable_element");

if (typeof el.addEventListener != "undefined") {
    el.addEventListener("keypress", enterKeyPressHandler, false);
} else if (typeof el.attachEvent != "undefined") {
    el.attachEvent("onkeypress", enterKeyPressHandler);
}
14
répondu Tim Down 2010-08-16 10:46:36

Excellentes références se trouvent ici sur contenteditable.

http://blog.whatwg.org/the-road-to-html-5-contenteditable

ce qui conduit à une API vraiment sympa ici http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-1/ http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-2/

si vous êtes prêt à prendre de 30 minutes à une heure pour lire tout cela, vous n'aurez absolument pas à utilisez un éditeur tiers merdique comme tinyMCE ou ckeditor ou autre, vous pouvez le construire et le personnaliser vous-même et pour être Franc, il est plus facile et plus rapide de le faire à partir de zéro que de traiter avec toute la cruft et inutile API D'un éditeur tiers WYSIWYG.

8
répondu brandon 2011-07-25 08:55:12

si vous préférez être heureux plutôt que de chasser les bogues :-) il serait beaucoup mieux d'essayer de faire en sorte que FF utilise aussi P ou div. Non seulement parce qu'il s'est avéré être un vote majoritaire : -)

la raison est que br seul est à la limite de l'illégalité si vous regardez une balise avec des yeux XML (il injecte modèle de données mixte - comme dans un texte qui n'est pas gardé par une balise) et le thrend a été pendant des années (par tous les navigateurs) vers XML-ionisation complète.

selon votre application, il pourrait être vaut la peine d'essayer de mettre une div avec le style entièrement formé et certainement avec du contenu initial - si vous avez vu des pages où vous voyez le texte grisé comme "Tapez votre commentaire ici" et il disparait à la seconde où vous cliquez dedans (ou remians-c'est une décision de conception).

La raison en est que la sémantique de la "contenteditable" est "il a déjà content => navigateur dispose de suffisamment d'informations pour savoir quoi faire" ainsi, alors que les navigateurs font de leur mieux pour faire quelque chose face à l'absence de contenu, il rend la situation beaucoup plus aléatoire.

3
répondu ZXX 2010-08-17 20:43:52

je crois que si le div a déjà une étiquette de paragraphe à l'intérieur, et que l'utilisateur appuie sur le retour alors que focus est à l'intérieur de cette étiquette de paragraphe, alors Firefox en insérera une autre. Donc, si vous avez ceci:

<div contenteditable="true">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>

et vous vous concentrez, appuyez sur la touche retour, Firefox permet d'ajouter un troisième paragraphe.

vous pourriez être en mesure d'obtenir autour d'avoir le & nbsp ; dans le paragraphe tags en leur donnant des hauteurs minimales, et vous pourriez être en mesure de vous en tirer avec un seul. Je n'ai jamais eu à le fond du comportement à ma satisfaction, la dernière fois que j'ai regardé cette. Vous aurez probablement besoin de JavaScript pour appliquer un minimum d'une balise de paragraphe à l'intérieur de la div.

2
répondu Douglas 2010-08-16 08:41:00