TinyMCE: Looking for line count solution.

Question

I am looking for a plugin or code with a functionality like the "line count" or "line number" in common editors. The line number usually is shown on the left border of the editors content. Anyone got an idea how to do it with TinyMCE?

Example:

line number | content

1. line number one
2. number two 3.
3. one line skipped (three is empty) 5.
4. contents end

Answer 1

Here is a character count from http://tinymce.moxiecode.com/punbb/viewtopic.php?id=10581

tinyMCE.init({
    ....

     //Character count
     theme_advanced_path : false,
     setup : function(ed) {
          ed.onKeyUp.add(function(ed, e) {   
               var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig,"");
               var text = strip.split(' ').length + " Words, " +  strip.length + " Characters"
        tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);   
    });
     }

});

You could modify this to look for the line breaks /n,<br>,etc...

Answer 2

I solved this issue using a special stylesheet containing a png with the numbers from 1 to 999 placed on the left side of the editors iframe. Important is here that this solution only works for a predefined font size and line-height!

body {
  background-color:#FFFFFF;
  background-image:url("http://www.mydomain.com/images/editor_lines.png") !important;
  background-repeat:repeat-y !important;
  font-family: Helvetica, sans-serif;
  font-size: 12pt;
  line-height: 19px;
  margin: 1px 0 0;
  padding-left: 40px !important;  /*space for the png*/
}