代码 - 开发笔记分享

最后修改人	果农
最后修改时间	2020-01-04 13:24:25
创建人	果农
创建时间	2019-12-22 17:28:11

该文档由果农创建于 2019-12-22 17:28:11 ，果农在 2020-01-04 13:24:25 修改了该文档。

[TOCM]

![](/storage/6/images/b260f366c64f12ac9ee29579a9c1478a.png)  
今天看到官方的Issues里有人[提到了这个](https://github.com/leanote/leanote/issues/924)，我很少用网页端，所以就整理一下客户端里怎么实现这个。  
首先需要分析一下客户端里用到的编辑器，官方的客户端里使用了两种编辑器（不知道准不准确，只是翻代码看到而已），一个是MD的编辑器：Ace，一种是普通笔记时用到的Tinymce，就从这两个编辑器入手。  
## 统计字数  
这里，需要一个通用的函数，来统计内容中的字数，我直接写在/public/js/common.js中了  
```js  
/**  
 * 统计字数（中文按单字算，英文按单词算)  
 */  
function calcWords(str) {  
	sLen = 0;  
	try{  
		str = str.replace(/<[^>]+>/g,"");        //过滤所有的HTML标签  
		//先将回车换行符做特殊处理  
		str = str.replace(/(\r\n+|\s+|　+)/g,"龘");  
		//处理英文字符数字，连续字母、数字、英文符号视为一个单词  
		str = str.replace(/[\x00-\xff]/g,"m");  
		//合并字符m，连续字母、数字、英文符号视为一个单词  
		str = str.replace(/m+/g,"*");  
		//去掉回车换行符  
		str = str.replace(/龘+/g,"");  
		//返回字数  
		sLen = str.length;  
	}catch(e){  
		
	}  
	return sLen;  
}  
```  
## Tinymce编辑器中统计字数  
修改的文件为/public/js/app/page.js，打开该文件，搜索  
```  
setup: function(ed) {  
```  
找到后在下面添加如下代码：  
```js  
ed.on('input undo redo execCommand focus', function(e){  
    content = getEditorContent(false);  
    msg = '字符数：' + content.length + ' 字数：' + calcWords(content);  
    console.log(msg);  
    fmsg = '<div id="calcWords" tabindex="-1">' + msg + '</div>';  
    i = $('#popularToolbar').find('#calcWords');  
    if(i.length == 0) {  
        $('#popularToolbar').append(fmsg);  
    } else {  
        $(i[0]).html(msg).css({"float":"right"});  
    }  
});  
```  
## MD 编辑器  
这个比较麻烦，原客户端中使用的是main-v2.min.js，需要修改一下note.html，让它使用main-v2.js  
打开note.html，搜索：  
```html  
<script src="public/md/main-v2.min.js"></script>  
```  
替换为：  
```html  
<script src="public/md/main-v2.js"></script>  
```  
然后，打开/public/md/main-v2.js，搜索  
```js  
        if(!window.lightMode) {  
            aceEditor.setValue(initDocumentContent, -1);  
            // 重新设置undo manage  
            // aceEditor.getSession().setUndoManager(new ace.UndoManager());  
        }  
        else {  
            $editorElt.val(initDocumentContent);  
        }  
```  
找到后，在下面添加：  
```js  
        aceEditor.getSession().on('change', function() {  
          content = getEditorContent(true)[0];  
          msg = '字符数：' + content.length + ' 字数：' + calcWords(content);  
          console.log(msg);  
          fmsg = '<div id="calcWords" tabindex="-1">' + msg + '</div>';  
          i = $('#wmd-button-bar').find('#calcWords');  
          if(i.length == 0) {  
              $('#wmd-button-bar').append(fmsg);  
          } else {  
              $(i[0]).html(msg).css({"float":"right", "padding-right": "10px"});  
          }  
        });  
```  
修改完成后，直接刷新客户端或者重启一下客户端即可看到效果。  
统计效果也就那样，这里只是贴出思路，想要更合适的字数统计，可以直接修改共用函数calcWords中的代码。

---  
格式居然全乱了，重新编排一下。