TinyMCE：寻找行数解决方案[关闭]答案

【问题标题】：TinyMCE: Looking for line count solution [closed]TinyMCE：寻找行数解决方案[关闭]
【发布时间】：2010-09-21 15:29:55
【问题描述】：

我正在寻找具有通用编辑器中的“行数”或“行号”等功能的插件或代码。行号通常显示在编辑器内容的左边框上。有人知道如何使用 TinyMCE 进行操作吗？

例子：

行号 |内容

第一行
第二个 3.
跳过一行（三为空） 5.
内容结束

【问题讨论】：

标签： javascript html editor tinymce

【解决方案1】：

这是来自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);   
    });
     }

});

您可以修改它以查找换行符/n,<br>,etc...

【讨论】：

嗯，这不是我想要的。这里重要的是数字必须直接在行的前面。我将发布我的解决方案作为答案。

【解决方案2】：

我使用一个特殊的样式表解决了这个问题，该样式表包含一个 png，其数字从 1 到 999 放置在编辑器 iframe 的左侧。重要的是，此解决方案仅适用于预定义的字体大小和行高！

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

【讨论】：

您的图片存在.. 请更新您的代码