jQuery line count code editor

Question

Im trying to accomplish this:

http://jsfiddle.net/WkVb9/

But instead of using a textarea, use an iframe with designmode = 'on'

http://jsfiddle.net/ysgEf/

It doesn't seem to work =/

Answer 1

Here is a good start : http://jsfiddle.net/ysgEf/3/

It returns erroneous line numbers, but the code is working, which is better than nothing for now.

Know this : implementation is different across browsers! Finding the line numbers from the content of an iframe is not a straight forward task!

** EDIT **

Based on Yi Jiang's answer :

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

This also counts for text nodes, not returned by JQuery. And will also not wrap the lines around.

Answer 2

Have a look at this piece of 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);
});

Here's the behavior of the various browsers tested:

• Firefox 3.6: <br /> tags are appended to form the line breaks. At the start, there's no <br />, while after the first line break one is added before the current cursor position and one after
• Chrome: <div> are used to contain each line. <br /> are used for empty lines. The first line is not wrapped
• IE 8 Compatibility: <p> are used to contain each line.

Lesson: Don't use contentEditable or designMode! The behavior is horribly inconsistent and quite useless for cases like this. Of course you can use hacks to get around this, but what happens when new browsers come out? You'd have to maintain this till the end of time!