Zeilenumbruch vor und nach Inline contenteditable Element in IE

Ich muss Inline-Element contenteditable machen. Es funktioniert gut für Chrome/Firefox, aber IE (mindestens 11) fügt Zeilenumbrüche vor und nach der Spanne ein, wenn es contenteditable ist.Zeilenumbruch vor und nach Inline contenteditable Element in IE

Link zu fummeln: https://jsfiddle.net/nokpy02g/1/

Dies ist, wie es in Chrome aussieht:

Und das ist IE:

irgendeine Weise

Gibt es ist etwas reparieren?

UPD:

My IE Version:

IE-Modus auf meine Geige Seite:

Auch ich bin mit Windows 7 Professional, 64bit

Quelle

2016-04-26 Nikolai Mavrenkov

Ich kann keinen Grund sehen, ein Kind Element eines Absatzes zu bearbeiten, ein bisschen sinnlos. Du könntest versuchen, 'float: left;': 'p * [contenteditable] {float: left;}' ist alles, außer du * willst * wirklich * verrückt * sein und das Problem umschreiben. Ich würde aber empfehlen, nur * Inline-Elemente zu überarbeiten. – John

@John Nun, leider habe ich bereits eine Menge Code, der diesen Ansatz verwendet, so dass es unmöglich ist, einen anderen Ansatz zu verwenden. Wir benötigen diese Funktionalität, um eine Art von Online-Editor zu implementieren, wenn ein Benutzer Markierungen für Textbereiche erstellen kann, und dann ein anderer Benutzer den Text entsprechend diesen Markierungen ändern kann (z. B. Fehler korrigieren). Ich verstehe es nicht mit Ihrer "Float" -Lösung, können Sie bitte eine Geige damit machen? –

Ah, schau jetzt auf die Geige. IE11 64 Bit (Standardmodus mit Doctype) sieht also nicht wie Ihr Bildschirm aus; Die Spannen werden in Chrome 49 und IE 11 in mutmaßlicher/intuitiver Reihenfolge dargestellt. Stellen Sie sicher, dass Sie IE 11 verwenden und die Seite im Standardmodus gerendert wird. Machen Sie auch einen Unterschied in der Art der Spanne und der DOM? Ich sehe keine 'br' Elemente und Whitespaces würden nur in einem' pre' Element oder einem Element mit 'white-space: pre;' wirksam werden. – John

Beachten Sie: contentEditable ist extrem buggy und inkonsistent über alle Browser und sogar Versionen. Sie sind viel besser, einen JS WYSIWYG-Editor wie CKEditor (der inline bearbeiten kann) zu verwenden. Zum Beispiel werden einige Browser den vorherigen Textblock umbrechen, wenn Sie drücken Geben Sie in  oder oder  ein, andere geben   ein. Manchmal muss eine   oder zwei an der Front oder am Ende sein. Zwei   s zählen als eine einzige Zeile ... bis es nicht geht. IE unterstützt contentEditable nicht ordnungsgemäß in Tabellen- oder Inline-Elementen. Beim Einfügen wird HTML anstelle von Text eingefügt. Die Probleme gehen weiter und weiter und werden dich endlos frustrieren.

Quelle

2016-04-26 11:39:22 lerouche

Ich denke, du hast Recht, es wäre besser, CKEditor in meiner Situation zu verwenden.Allerdings haben wir bereits eine Menge Code mit "contenteditable", und leider ist es keine Option, es jetzt neu zu schreiben. Aber danke trotzdem. –

OK, okay, der einzige Grund, warum ich das sage, ist, dass ich viel Zeit (und Haare) verloren habe, um 'contentEditable' zum Arbeiten zu bringen, Probleme wie die deine zu lösen, bevor ich realisiert habe, dass WYSIWYG JS Editoren existierten. Ich denke auch nicht, dass es eine Lösung gibt, ohne JS zu benutzen, aber ich wünsche dir alles Gute für dein Bemühen :) – lerouche

Zeilenumbruch vor und nach Inline contenteditable Element in IE

Antwort

Verwandte Themen