jQuery Zeilenzahl-Code-Editor

Question

Im Versuch, dies zu tun:

http://jsfiddle.net/WkVb9/

Doch statt einen Textbereich, verwenden Sie einen Iframe mit designmode = 'on'

http://jsfiddle.net/ysgEf/

Es scheint nicht zu Arbeit = /

Answer 1

Haben Sie einen Blick auf dieses Stück Code:

var editable = $(document.getElementById('edit').contentWindow.document);

editable.attr('designMode', "on").keyup(function(){
    var length = $(this).find('body').children('br, p, div').length;

    if($(this).find('body').html().length && !length){
        length = 1;
    }

    $('#lc').text(length);
});

Hier ist das Verhalten der verschiedenen Browser getestet:

• Firefox 3.6 : <br /> Tags werden angefügt die Zeilenumbrüche zu bilden. Zu Beginn gibt es keine <br />, während nach dem ersten Zeilenumbruch man vor der aktuellen Cursorposition hinzugefügt und ein nach
• Chrome : <div> verwendet werden, um jede Zeile zu enthalten. <br /> werden für Leerzeilen verwendet. Die erste Zeile wird nicht umgebrochen
• IE 8 Kompatibilität : <p> wird verwendet, um jede Zeile zu enthalten.

Lektion: Do not contentEditable oder designMode verwenden! Das Verhalten ist schrecklich inkonsequent und ziemlich nutzlos für Fälle wie diesen. Natürlich können Sie Hacks verwenden, dies zu umgehen, aber was passiert, wenn neue Browser kommen? Sie würden diese bis zum Ende der Zeit zu halten haben!

Answer 2

Hier ist ein guter Anfang: http://jsfiddle.net/ysgEf/3/

Es gibt fehlerhafte Zeilennummern, aber der Code funktioniert, das ist besser als nichts für jetzt.

Dieses Wissen: Umsetzung in allen Browsern anders! Das Finden der Zeilennummern aus dem Inhalt eines iframe ist keine straight forward Aufgabe!

** Bearbeiten **

Basierend auf Yi Jiang 's Antwort:

var editable = $(document.getElementById('edit').contentWindow.document)
    .find('body').css({'overflow':'auto', 'white-space':'nowrap'}).end();

editable.attr('designMode', "on").keyup(function(){
    var length = $(this).find('body')[0].childNodes.length;

    $('#lc').text(length);
});​

Dies gilt auch für Textknoten, kehrte nicht von JQuery. Und wird auch nicht die Linien umschlingen.