开发者

TinyMCE: Looking for line count solution [closed]

开发者 https://www.devze.com 2023-01-01 09:17 出处:网络
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 7 years ago.

Improve this question

I am looking for a plugin or code with a functionality like the "line count" or "line number" in common edit开发者_Go百科ors. 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


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...


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*/
}
0

精彩评论

暂无评论...
验证码 换一张
取 消