CKEditor如何统计文字数量

最新推荐文章于 2025-01-09 16:11:57 发布

转载最新推荐文章于 2025-01-09 16:11:57 发布 · 568 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanliyuan/p/3594586.html

本文详细介绍了在使用CKEditor编辑器时限制文本框输入字数的方法，并提出了两个辅助函数：filterHtml用于过滤HTML标签，strleng用于计算符合中文与英文不同权重的字符长度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在修改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函数 请见下一篇文章。

转载于:https://www.cnblogs.com/wanliyuan/p/3594586.html