zoukankan      html  css  js  c++  java
  • 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函数 请见下一篇文章

  • 相关阅读:
    绿豆加速器
    电脑派位系统(新生入学摇号) v2016
    硬盘安装win10
    msbuild
    async
    win sshd
    Ftp软件
    nginx basic auth 登陆验证模块
    深入理解docker的link机制
    Docker Compose to CoreOS
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/3594586.html
Copyright © 2011-2022 走看看