vermeiden ie contentEditable-element zum erstellen von Absätzen auf Enter-Taste

Auf den InternetExplorer, eine contentEditable DIV wird ein neuer Absatz erstellt (<p></p>) jedes mal, wenn Sie Enter drücken, während Firefox erstellt eine <br/> tag.
Ist es möglich, zu zwingen, den IE einfügen <br/> statt einen neuen Absatz ?

InformationsquelleAutor Franck Freiburger | 2010-01-13

  1. 7

    Ja, es ist möglich, vermeiden das einfügen von Absätzen durch das anhalten der keydown-Ereignis ersten (window.event.stopPropagation();) und fügt dann die Zeichenfolge durch die Verwendung von insert HTML-Befehl.

    IE allerdings hängt dieses divs für das festlegen von Stilen etc. und Sie werden in Schwierigkeiten geraten mit <br>en.

    Schlage ich Ihnen vor, mit einem Projekt wie TinyMCE oder andere Editoren und der Suche nach einem editor, der sich so verhält, wie Sie möchte, da Sie alle Arten von workarounds für verschiedene browser Probleme. Vielleicht finden Sie einen editor, der verwendet <br>s...

    Diese Strategie bricht Rückgängig machen. Jedes mal, wenn Sie Enter drücken Sie mutieren, der DOM, so dass der Benutzer kann nicht mehr Rückgängig", um die änderung rückgängig machen!
    Manipulieren Sie das DOM mit den Befehlen bricht NICHT rückgängig machen. Jeder Befehl kann rückgängig gemacht werden. Natürlich Sie müssen vermeiden, Sachen wie div.innerHTML = "foo";

    InformationsquelleAutor Jonathan Weiß

  2. 6

    Hier ist eine Lösung (jQuery verwendet). Nachdem Sie auf den 'Ändern, BR' - Taste, die <br> - tag eingefügt werden, anstatt der <p></p> tag.

    Html:

    <div id='editable' contentEditable="true">
This is a division that is content editable. You can position the cursor 
within the text, move the cursor with the arrow keys, and use the keyboard 
to enter or delete text at the cursor position.
</div>
<button type="button" onclick='InsertBR()'>Change to BR</button>
<button type="button" onclick='ViewSource()'>View Div source</button>

    Javascript:

    function InsertBR()
{
    $("#editable").keypress(function(e) {
        if (e.which == 13) 
        {
            e.preventDefault();
            document.selection.createRange().pasteHTML("<br/>")     
        }
    });
}

function ViewSource()
{           
    var div = document.getElementById('editable');
    alert('div.innerHTML = ' + div.innerHTML);
}

    Diese links geholfen.
    Beispiel hier.

    verwenden insertNode() statt pasteHTML() für IE11+ und cross-browser-wie bereits here

    InformationsquelleAutor rosscj2533

  3. 5

    Können Sie immer lernen, verwenden Sie SHIFT + ENTER für eine einzige Zeile zurückgibt, und ENTER für Absatz kehrt. IE verhält sich wie MS-Word in dieser Hinsicht.

    InformationsquelleAutor Fenton

  4. 1

    Änderung der line-height des <p> innerhalb der editierbaren <div> funktioniert:

    #editable_div p
{
    line-height: 0px;
}

    InformationsquelleAutor user1649326

  5. 1

    Wenn Sie es verwenden können, FCKEditor hat eine Einstellung für dieses

    InformationsquelleAutor Mason

Schreibe einen Kommentar