当前位置:

首页 > 编程开发 > 当使用ckeditor控件时,需要校验输入内容是否为空的一种解决办法(转帖)

当使用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() 获取内容,但原理上,理解这个“延迟提交”的思路,对处理其他类似的编辑器问题也很有帮助。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
作者最新文章
编程开发
相关文章 更多
ckeditor和ueditor那个好 CKEditor和UEditor使用比较
ckeditor和ueditor那个好 CKEditor和UEditor使用比较

CKEditor功能成熟但需自行编写较多逻辑;UEditor界面美观、开箱即用,但前后台交互较复杂,上传配置需注意路径前缀,还需处理Struts过滤器对静态请求的拦截问题。两者各有侧重,需根据项目需求选择。

最新版CKEditor的配置方法及插件(Plugin)编写示例
最新版CKEditor的配置方法及插件(Plugin)编写示例

CKEditor是开源HTML编辑器,通过编辑config.js配置文件可自定义工具栏和字体大小。插件开发以分页插件为例:在插件目录plugins下创建名为apage的子文件夹,编写plugin.js实现对话框或直接插入分页符,需在配置中声明extraPlugins参数以加载该插件。

ckeditor syntaxhighlighter代码高亮插件配置分享
ckeditor syntaxhighlighter代码高亮插件配置分享

通过整合SyntaxHighlighter插件,为CKEditor添加代码高亮功能。需下载编辑器与插件,创建insertcode插件并编写plugin.js与dialog.js,修改ckeditor.js配置以注册插件并添加工具栏按钮,最后在语言文件中添加映射。该方法支持多种编程语言代码的插入与高亮显示。

CKEditor中加入syntaxhighlighter代码高亮插件
CKEditor中加入syntaxhighlighter代码高亮插件

在CKEditor3.3.1中集成SyntaxHighlighter需新建insertcode插件目录,包含plugin.js、对话框配置及图标;修改ckeditor.js添加插件引用,调整语言文件,在前端引入样式与脚本,完成插入代码高亮功能。

dedecms ckeditor编辑器添加链接默认新窗口打开的修改方法
dedecms ckeditor编辑器添加链接默认新窗口打开的修改方法

用DEDECMS做网站的朋友,多半都遇到过这个小小的困扰:文章页里插入的链接,默认总是直接在当前窗口跳转,而不是在新标签页打开。去网上搜一下,找到的教程几乎全是针对老版FCKeditor的,而DEDECMS v5.7 默认搭载的已经是ckeditor编辑器了。这里简单记一下修改方法,希望能帮到同样被

ckeditor插件开发简单实例
ckeditor插件开发简单实例

具体步骤:在CKeditor中开发自定义插件,先创建插件文件夹并放置图标,然后编写plugin.js实现选中文字后自动插入一个带超链接的图标,最后修改config.js加载插件并配置工具栏按钮,即可在编辑器中使用该插件。

SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色
SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

基于3.0.83版SyntaxHighlighter与3.5.3版CKEditor,整理了一套代码语法着色集成方案。在CKEditor中开发insertcode插件,通过配置config.js添加工具栏按钮,实现在页面中插入代码并高亮显示,支持多种编程语言,提升代码可读性。

PHP中CKEditor和CKFinder配置问题小结
PHP中CKEditor和CKFinder配置问题小结

在PHP中配置CKEditor和CKFinder时,需预设config.js的默认设置,使用PHP类生成编辑器,设置CKFinder的CheckAuthentication函数通过session验证,利用session定位上传路径,并采用日期重命名上传文件以防乱码,最后通过CKFinder::SetupCKEditor实现两者配合,提升安全性。

ckeditor syntaxhighlighter代码高亮插件,完美修复
ckeditor syntaxhighlighter代码高亮插件,完美修复

针对CKeditor与FCKeditor对象模型差异,采用先插入新节点再删除原节点的方法修复代码高亮插件。高级配置新增“不自动转换超链接”选项,用户可自由控制代码中网址是否自动转为超链接,提升灵活性。

CKeditor与syntaxhighlight打造joomla代码高亮
CKeditor与syntaxhighlight打造joomla代码高亮

具体步骤如下:在Joomla1.5.9版本中,首先安装CKEditor编辑器及SyntaxHighlighter语法高亮插件,然后修改ckeditor.js文件,在其中添加插件引用和工具栏按钮配置,最后在模板index.php文件中引入对应的JavaScript和CSS文件,最终即可成功实现代码语法高亮显示功能。

查看更多
精品专题 更多
装机必备
装机必备

正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

Windows
Windows

正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

PDF教程
PDF教程

正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法,同时介绍常用PDF软件和工具的使用技巧。

Mac软件 更多
Postman macOS版
Postman macOS版
Mac

Postman是一套面向API全生命周期的开发与测试平台,可在Mac上发送和调试多种协议请求,管理集合、环境及认证信息,并完成脚本测试、模拟服务、监控、文档发布和团队协作。它适合开发、测试及运维人员使用,提供个人免费方案。

Docker Desktop macOS版
Docker Desktop macOS版
Mac

Docker Desktop 是 Docker 官方为 Mac 提供的容器开发环境,集成 Docker Engine、命令行工具、Compose、Build、Kubernetes 与图形化管理界面。

Android Studio macOS版
Android Studio macOS版
Mac

Android Studio 是 Google 面向安卓应用开发提供的官方集成开发环境,基于 IntelliJ IDEA 构建。它整合智能代码编辑、Gradle 构建、界面预览、设备模拟、性能分析、调试测试及 APK 分析等工具。

WINDOWS 更多
PixPix 网页版
PixPix 网页版
Windows

PixPix 是面向品牌、卖家和内容团队的在线 AI 图片视频创作平台,提供图视频 Agent、无限画布、图片生成、视频生成、自然语言编辑及商品套图、产品精修和带货视频等电商工具。

Postman Windows版
Postman Windows版
Windows

Postman 是面向 API 全生命周期的开发与协作平台。Windows 桌面版可用于构建和发送 HTTP、GraphQL、gRPC、WebSocket、MQTT 等请求,并提供环境变量、集合、脚本测试、模拟服务、监控、文档及团队工作区等

Docker Desktop Windows版
Docker Desktop Windows版
Windows

Docker Desktop 为 Windows 开发者提供集成式容器环境,内置 Docker Engine、命令行工具、Compose、Build 与 Kubernetes 等组件,可在本机完成镜像构建、容器运行、日志查看和资源管理。