当前位置: 首页 > news >正文

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函数 请见下一篇文章。

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

相关文章:

  • Oracle 11G创建表空间、用户、授权命令(Oracle 11g使用)
  • TIMESTAMP with ****问题连不上mysql
  • window.location.href的一种用法
  • StringBuffer 用法
  • 创建本地CM 离线服务器
  • mysql 每日简单备份和定期删除
  • 无法远程连接 MySQL 的解决方法
  • IOS UISearchDisplayController 点击搜索出现黑条问题解决方案
  • Python进阶07 函数对象
  • 为文本数据创建索引
  • haproxy配置文档说明
  • Android中 android:layout_weight 属性 完美解释
  • C#中的字段,常量,属性与方法
  • JAVA中的类型转换 int和String
  • 简单文件存储进内存
  • “Material Design”设计规范在 ComponentOne For WinForm 的全新尝试!
  • 【347天】每日项目总结系列085(2018.01.18)
  • CSS实用技巧
  • es的写入过程
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • Python 使用 Tornado 框架实现 WebHook 自动部署 Git 项目
  • webgl (原生)基础入门指南【一】
  • Webpack 4 学习01(基础配置)
  • 从setTimeout-setInterval看JS线程
  • 第13期 DApp 榜单 :来,吃我这波安利
  • 好的网址,关于.net 4.0 ,vs 2010
  • 聚簇索引和非聚簇索引
  • 前端技术周刊 2019-01-14:客户端存储
  • #### go map 底层结构 ####
  • #HarmonyOS:基础语法
  • #LLM入门|Prompt#1.7_文本拓展_Expanding
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • (Git) gitignore基础使用
  • (Repost) Getting Genode with TrustZone on the i.MX
  • (附源码)python旅游推荐系统 毕业设计 250623
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (一)Linux+Windows下安装ffmpeg
  • (原创) cocos2dx使用Curl连接网络(客户端)
  • (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly DetectionRecommender Systems...
  • (转)Oracle存储过程编写经验和优化措施
  • (轉貼) 2008 Altera 亞洲創新大賽 台灣學生成果傲視全球 [照片花絮] (SOC) (News)
  • .net core webapi Startup 注入ConfigurePrimaryHttpMessageHandler
  • .NET Entity FrameWork 总结 ,在项目中用处个人感觉不大。适合初级用用,不涉及到与数据库通信。
  • .NET 中选择合适的文件打开模式(CreateNew, Create, Open, OpenOrCreate, Truncate, Append)
  • .net中我喜欢的两种验证码
  • .secret勒索病毒数据恢复|金蝶、用友、管家婆、OA、速达、ERP等软件数据库恢复
  • @ModelAttribute 注解
  • @TableId注解详细介绍 mybaits 实体类主键注解
  • [ 环境搭建篇 ] 安装 java 环境并配置环境变量(附 JDK1.8 安装包)
  • [].shift.call( arguments ) 和 [].slice.call( arguments )
  • [BIZ] - 1.金融交易系统特点
  • [BZOJ2208][Jsoi2010]连通数
  • [Codeforces] combinatorics (R1600) Part.2
  • [Hadoop in China 2011] 蒋建平:探秘基于Hadoop的华为共有云
  • [Hive] CTE 通用表达式 WITH关键字