 今天看到官方的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中的代码。 --- 格式居然全乱了，重新编排一下。 最后修改：4年前 © 著作权归作者所有