Umgang mit Zeilenumbrüchen bei contentEditable DIV

Ich habe ein problem mit contenteditable Zeilenumbrüche auf SAFARI/CHROME. Wenn ich drücken Sie "return" auf eine contentEditable <div>anstatt eine <br> (wie Firefox), erzeugen Sie eine neue <div>:

<div>Something</div>
<div>Something</div>

Dass so aussieht (auf der contentEditable DIV):

Something
Something

Aber nach Bereinigung (entfernen <div>), bekomme ich diese:

SomethingSomething

In Firefox, die contenteditable ist:

Something
<br>
Something

Ist und dass nach Bereinigung sieht das gleiche:

Something
Something

Ist es eine Lösung zu "normalisieren" das ist in allen Browsern?

Ich habe festgestellt, das der code auf Machen Sie eine <br> statt <div></div> durch drücken der EINGABETASTE auf einem contenteditable

$(function(){

  $("#editable")

  //make sure br is always the lastChild of contenteditable
  .live("keyup mouseup", function(){
    if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
      this.appendChild(document.createChild("br"));
     }
  })

  //use br instead of div div
  .live("keypress", function(e){
    if (e.which == 13) {
      if (window.getSelection) {
        var selection = window.getSelection(),
          range = selection.getRangeAt(0),
          br = document.createElement("br");
        range.deleteContents();
        range.insertNode(br);
        range.setStartAfter(br);
        range.setEndAfter(br);
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);
        return false;
      }
    }
  });
});

Dies funktioniert, aber (in SAFARI und CHROME) ich drücken zwei mal die "return" - Taste eine neue Zeile...

Irgendeine Idee?

Bearbeiten: Mit dem code fand ich ( am Ende dieser Frage) ist in Ordnung, außer die Funktion, "stellt sicher, dass <br> element ist immer der lastChild... keine Ahnung, wie man dieses Problem beheben?

Edit 2: ich bin immer diese Fehlermeldung auf der Konsole: Uncaught TypeError: Object #<HTMLDocument> has no method 'createChild'

Edit 3: Ok, ich änderte die document.createChild("br"); zu document.createElement("br"); und ich denke ich habe es in FF/Safari/Chrome... Alle zurück <br> für die neuen Linien...

Das problem ist jetzt, dass wenn ich innerhalb einer Geordneten oder Ungeordneten Liste, die ich brauche, um eine neue Zeile ohne <br>...

Edit 4: Wenn jemand Interesse an der Lösung der letzten änderung: Vermeiden Sie die createElement-Funktion, wenn es innerhalb eines <LI> - element (contentEditable)

InformationsquelleAutor der Frage Santiago | 2011-05-16

  1. 26

    Diese Technik erscheint, um zu vermeiden, die Chrome-bug, der zeigt BRs ersten mal (mit dem code, den Sie wissen müssen Sie drücken Sie zwei mal die Enter-Taste).

    Es ist nicht perfekt, hack, aber es funktioniert: es fügt ein Leerzeichen nach deinem BR, sodass es zu zeigen, richtig.
    Jedoch sehen Sie, dass das hinzufügen nur ein Leerzeichen "" wird sich nichts ändern, es funktioniert auch mit anderen Buchstaben. Der browser wird nicht zeigen, wahrscheinlich, weil es ist wie ein leerer Raum innerhalb einer html-Seite, es tut sich einfach gar nichts zu bedeuten. Um loszuwerden, die Fehler, die ich erstellt ein div mit jQuery enthält ein &nbsp; tag, und ich nehme mir die text() - Eigenschaft, um es in der textnode sonst funktioniert es nicht.

    $editables = $('[contenteditable=true]');

$editables.filter("p,span").on('keypress',function(e){
 if(e.keyCode==13){ //enter && shift

  e.preventDefault(); //Prevent default browser behavior
  if (window.getSelection) {
      var selection = window.getSelection(),
          range = selection.getRangeAt(0),
          br = document.createElement("br"),
          textNode = document.createTextNode("\u00a0"); //Passing " " directly will not end up being shown correctly
      range.deleteContents();//required or not?
      range.insertNode(br);
      range.collapse(false);
      range.insertNode(textNode);
      range.selectNodeContents(textNode);

      selection.removeAllRanges();
      selection.addRange(range);
      return false;
  }

   }
});

    InformationsquelleAutor der Antwort Micaël Félix

  2. 13

    Hören Tastatureingaben scheint wie eine Menge Arbeit. Würde etwas so einfaches wie das machbar sein:

    var html = $('.content').html().replace(/<div>/gi,'<br>').replace(/<\/div>/gi,'');

    JSFiddle demo hier.

    Auch, es sieht aus wie sanitize.js ermöglicht eine benutzerdefinierte Konfiguration. Haben Sie versucht, indem div als einem element erlaubt?

    Erlaubt HTML/CSS ist gefährlich, so sicherzustellen, dass Sie besonders vorsichtig sein.

    EDIT: Entfernt der server-Seite Kommentare. Hygienisierung erfolgt zum Zeitpunkt der Nutzung - wenn der Kunde will, zu umgehen dieses lokal kann es so geschehen auf eigene Gefahr. Dank Vincent McNabb für den Hinweis.

    InformationsquelleAutor der Antwort Kurt

  3. 3

    Können Sie einfach den folgenden Befehl verwenden
    document.execCommand('insertHTML',false,'<br>');

    Diesem Befehl wird verhindert, Standard-Verhalten, und fügen Sie einen tag, das Sie wünschen.
    Das ist alles, 1 Zeile code

    Und sogar einfacher Ansatz.

    NUR CSS.

    Ihnen contenteditable-element anwenden display:inline-block Regel
    und diese fügen brs nur

    InformationsquelleAutor der Antwort Karb

  4. 2

    Webkits nicht Rendern Sie ein einzelnes br wenn es das Letzte ist (auch nicht leere) untergeordnetes Element eines Containers. Für Safari, die native Tastatureingabe einen Zeilenumbruch einfügen ist Strg + Return. Wenn Sie genau hinsehen, werden Sie feststellen, dass Safari tatsächlich fügt zwei brs, während nur rendering; jedoch, es wird legen Sie eine einzelne br wenn es einige nachgestellte text, oder loswerden Doppelzimmer brs sobald Sie einige (wenn es verdoppelt).

    Offenbar, es scheint eine Lösung für Webkits zu legen Doppelzimmer brs, wie Sie selbst, und lassen Sie den rest erledigen.

    InformationsquelleAutor der Antwort Klim Lee

  5. 1

    Möchten Sie vielleicht zu prüfen, die css - white-space Eigenschaft. Einstellung der Stil zu white-space: pre-wrap ermöglicht es Ihnen, um loszuwerden, alle, die javascript, denn es ändert sich das Verhalten von whitespace-Zeichen angezeigt anstelle des Zusammenbruchs.

    Und sehen diese Antwort: HTML - Newline char in DIV-Inhalt bearbeitet werden?

    InformationsquelleAutor der Antwort B T

Schreibe einen Kommentar