CKEditor如何统计文字数量
今天在修改v5后台的比赛系统时,发现文本框需要限制输入字数。我们这个系统用的是3.6.3版本的,前台代码是这样的
<script> //编辑器 CKEDITOR.replace('matchContent',{ resize_enabled : false, //是否窗口可以扩展 sharedSpaces : { top : 'topSpace', bottom : 'bottomSpace' }, toolbar :[ ['Cut','Copy','Paste','PasteText','-'], ['Undo', 'Redo', '-', ,'Find','SelectAll', 'RemoveFormat'], //加粗 斜体, 下划线 穿过线 下标字 上标字 ['Bold','Italic','Underline','Strike'], //数字列表 实体列表 减小缩进 增大缩进 ['NumberedList','BulletedList','-','Outdent','Indent'], //左对齐 居中对齐 右对齐 两端对齐 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], //图片 flash 表格 水平线 表情 特殊字符 分页符 ['Image','Table','HorizontalRule','SpecialChar'], //样式 格式 字体 字体大小 ['Styles','Format','Font','FontSize'], //文本颜色 背景颜色 ['TextColor','BGColor'], ], height:150 }, { type : 'textarea', id : 'message', label : 'Your comment', 'default' : '', validate : function() { if ( this.getValue().length < 5 ) { api.openMsgDialog( 'The comment is too short.' ); return false; } } } ); </script>
经过不断的尝试,最终采用CKEDITOR.instances.matchContent.getData().length,这就是这个输入框的文字长度,然后给它添加一段javascript即可。请主要matchContent就是上面的代码中定义的,所以要注意更改。
而这儿继而又延伸出两个问题,第一个就是,虽然CKEDITOR.instances.matchContent.getData()可以取出我们输入的内容,但是里面会包括html标签(例如<p>123</p>),故而我们要写一段javascript来过滤html标签——filterHtml函数;其二就是如何计算字符,而我们定下来的规则则是(中文2个字符,英文1个字符)——strleng函数。
具体代码如下。
else if (strlen(filterHtml(CKEDITOR.instances.matchContent.getData()))>600){ alert("比赛介绍不能超过300字"); return false; }
filterHtml函数和strleng函数 请见下一篇文章。