当使用ckeditor控件时,需要校验输入内容是否为空的一种解决办法(转帖)
CKEditor内容非空验证失效,因编辑器在表单提交后才更新隐藏域,验证脚本提前读取空值。解决方法:在验证函数中取消表单提交,利用setTimeout延迟50毫秒,待编辑器完成同步后再执行验证和提交。
先说一个让不少开发者头疼的经典场景:当你第一次尝试用Ja vaScript验证FCKeditor(现在叫CKEditor了)的内容是否为空时,十有八九会碰到“内容明明填了,但验证函数死活认为它是空的”这种诡异问题。非得再点一次提交按钮,才能拿到正确的值。这到底是怎么回事?
问题的根源,其实出在FCKeditor对 onsubmit 事件的“监听”机制上。编辑器会在表单提交之后,才把自己的最新内容同步到隐藏域(也就是 document.form1.content)中。而你的验证脚本是在提交之前执行的——它读到的自然是还没来得及更新的旧值,也就是空字符串。
最常见的写法是这样的:
这个写法,在普通文本框上没问题,但放在FCKeditor上就失效了。原因就是上面说的——编辑器还没把内容写进隐藏域,验证就已经跑完了。
那么,怎么解决?其实思路很简单:我们不让验证函数直接读取隐藏域的值,而是等编辑器把内容更新完毕之后,再去读取。这里有一个非常实用的技巧——利用 setTimeout 延迟一小段时间再执行验证,同时让表单先不提交。
改写后的代码如下:
改动就两个关键点:
- 在
checkForm里return false,先取消表单的默认提交行为。 - 用
setTimeout延迟50毫秒(这个时间足够编辑器完成同步了),再去执行真正的验证和提交。
这样一来,编辑器有足够的时间把内容写入隐藏域,验证函数就能拿到正确的值了。这个小技巧,并非什么高深原理,只是摸清了FCKeditor的“脾气”——它会在表单提交后,而不是提交前,更新隐藏域。所以我们要做的,就是让验证发生在它更新之后。
这个方案经过实际项目检验,稳定有效。如果你还在用老版本的FCKeditor,或者遇到类似的问题,不妨试试这个思路。当然,如果换成新版CKEditor,它的API更完善,通常可以直接用 CKEDITOR.instances.content.getData() 获取内容,但原理上,理解这个“延迟提交”的思路,对处理其他类似的编辑器问题也很有帮助。
Postman是一套面向API全生命周期的开发与测试平台,可在Mac上发送和调试多种协议请求,管理集合、环境及认证信息,并完成脚本测试、模拟服务、监控、文档发布和团队协作。它适合开发、测试及运维人员使用,提供个人免费方案。
Docker Desktop 是 Docker 官方为 Mac 提供的容器开发环境,集成 Docker Engine、命令行工具、Compose、Build、Kubernetes 与图形化管理界面。
Android Studio 是 Google 面向安卓应用开发提供的官方集成开发环境,基于 IntelliJ IDEA 构建。它整合智能代码编辑、Gradle 构建、界面预览、设备模拟、性能分析、调试测试及 APK 分析等工具。
PixPix 是面向品牌、卖家和内容团队的在线 AI 图片视频创作平台,提供图视频 Agent、无限画布、图片生成、视频生成、自然语言编辑及商品套图、产品精修和带货视频等电商工具。
Postman 是面向 API 全生命周期的开发与协作平台。Windows 桌面版可用于构建和发送 HTTP、GraphQL、gRPC、WebSocket、MQTT 等请求,并提供环境变量、集合、脚本测试、模拟服务、监控、文档及团队工作区等
Docker Desktop 为 Windows 开发者提供集成式容器环境,内置 Docker Engine、命令行工具、Compose、Build 与 Kubernetes 等组件,可在本机完成镜像构建、容器运行、日志查看和资源管理。













