wie man das Verhalten von zufriedenen Blöcken ändert, nachdem man in verschiedenen Browsern gedrückt hat

Beim drücken von enter in <div contenteditable="true"> </div> im firefox <br /> produziert wird - das ist ok. Aber im Chrome oder IE eine neue <div> oder <p> erstellt. Was sollte ich tun, damit Chrome und IE Verhalten sich wie Firefox .

InformationsquelleAutor der Frage liysd | 2010-04-29

23

Als Douglas schon sagte, Browser versuchen zu Klonen vorherigen tag beim Kunden beginnt ein neuer Absatz auf einer bearbeitbaren Seite. Die Diskrepanz tritt auf, wenn der browser hat nichts damit zu fahren aus - z.B. wenn zunächst die Seite leer ist. In diesem Fall verschiedene Browser Verhalten sich unterschiedlich: IE startet, wickeln Sie jede Zeichenfolge in <p> - tag, Chrome, wird jeder Zeile in <div>.

Erhöhen, cross-browser-Erfahrung, die WebKit-Entwickler eingeführt haben, die DefaultParagraphSeparator Befehl. Sie können mit dem folgenden JavaScript auf der Seite, laden für Chrome, ändern der Standard-Absatz-separator <p> - tag:
```
document.execCommand('defaultParagraphSeparator', false, 'p');
```
InformationsquelleAutor der Antwort Sergey Volodko

Folgenden wird eine <br> wenn die EINGABETASTE gedrückt wird, in allen gängigen Browsern und versucht, platzieren Sie den Cursor direkt nach dem es. Jedoch, WebKit, Opera und IE alle haben Probleme mit der Platzierung der Einfügemarke richtig nach der <br>was mit dem folgenden code versucht nicht zu korrigieren.

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);
}

InformationsquelleAutor der Antwort Tim Down

8

Hervorragende Referenzen befinden sich hier auf der contenteditable.

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

Führt zu einer wirklich schönen API hier
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/

Wenn Sie bereit sind, nehmen Sie 30 Minuten bis zu einer Stunde Lesen all dieser, werden Sie absolut nicht einige crappy third party editor wie tinyMCE oder ckeditor oder was auch immer, Sie können erstellen und passen Sie es an sich und um ehrlich zu sein, es ist einfacher UND schneller zu tun, es von Grund auf als sich alle Reste und unnötige API eines Dritten WYSIWYG-editor.

InformationsquelleAutor der Antwort brandon
3

Wenn Sie es vorziehen, um glücklich zu sein anstatt jagen bugs 🙂 es wäre viel besser, zu versuchen, FF verwenden Sie p oder div als gut. Nicht nur besause es stellte sich heraus, dass eine Mehrheit 🙂

Der Grund dafür ist, dass die br alleine ist grenzwertig illegal, wenn man sich einen tag mit XML-Augen (es spritzt mixed-Daten-Modell - wie in einem text, der nicht bewacht von einem tag) und die thrend das seit Jahren (von allen Browsern) zur vollständigen XML-isierung.

Abhängig von Ihrer tatsächlichen app, für die es sich lohnen könnte, zu versuchen ein div mit voll ausgebildeten Stil und auf jeden Fall mit einigen ersten Inhalt, wenn Sie sah die Seiten, auf denen Sie sehen ausgegrauten text wie "geben Sie hier Ihren Kommentar ein", " und es verschwindet der zweite Sie auf in es (oder remians - das ist eine design-Entscheidung).

Der Grund dafür ist, dass die Semantik von "contenteditable" ist "es bereits content => browser hat genug info, um zu wissen, was zu tun ist" so, während Browser tun Ihr bestes, um etwas zu tun, wenn Sie sich mit keinen Inhalt, es macht die situation viel mehr random.

InformationsquelleAutor der Antwort ZXX
2

Ich glaube, wenn das div hat bereits ein Absatz-tag drin, und der Benutzer drückt return, während Sie konzentrieren sich innerhalb des Absatz-tag, dann wird Firefox legen Sie eine andere ein. Also, wenn Sie haben:
```
<div contenteditable="true">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>
```
und die Konzentration, die EINGABETASTE drücken, Firefox fügt einen Dritten Absatz.

Könnten Sie in der Lage zu bekommen, um mit der & nbsp ; in die Absatz-tags, indem Sie minimale Höhe, und Sie könnten in der Lage sein, um Weg mit nur einer. Ich habe nie auf den Grund, das Verhalten zu meiner Zufriedenheit das Letzte mal sah ich diese. Sie werden wahrscheinlich brauchen einige JavaScript erzwingen ein minimum von einem Absatz-tag innerhalb des div.

InformationsquelleAutor der Antwort Douglas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.