CKEditor无法验证的解决方案(js验证+jQuery Validate验证)


Posted in Javascript onMay 09, 2016

最近项目的前端使用了jQuery,表单的前端验证用的是jQuery Validate,用起来很简单方便,一直都很满意的。

前段时间,根据需求为表单中的 textarea 类型的元素加上了html富文本编辑器,用的是CKEditor,功能强大,定制方便,也很满意。

不过用CKEditor增强过的 textarea 元素,这个字段要求是非空的,在jQuery Validate总是验证不通过,原因就是在 CKEditor 编辑器填写了内容之后,编辑器并不是立即把内容更新到原来的 textarea 元素中的,我没仔细看源代码,试过一种情况就是每一次提交不通过,第二次提交就可以通过的,貌似编辑器是在 submit 事件之前把编辑器的内容更新到 textarea 中的(这个是猜测,不知道对不对,我对jQuery 和 CKEditor 都不太熟悉,算是拿来就用,有问题就放狗的那种)。

于是在网上找到了解决问题的代码,代码不是我写的,我只是记录一下我遇到的问题,代码非原创。原理就是当编辑器更新了内容之后,立即把内容更新到 textarea 元素。

CKEDITOR.instances["page_content"].on("instanceReady", function() 
    { 
            //set keyup event 
            this.document.on("keyup", updateTextArea); 
             //and paste event 
            this.document.on("paste", updateTextArea); 
 
    }); 
 
    function updateTextArea() 
    { 
        CKEDITOR.tools.setTimeout( function() 
              {  
                $("#page_content").val(CKEDITOR.instances.page_content.getData()); 
                $("#page_content").trigger('keyup'); 
              }, 0);  
    }

目前一切使用正常,算是解决了一个让我头痛的问题。

另一种解决思路:

CKEditor 编辑器是增强过的 textarea 元素,在填写了内容之后,编辑器并不立即把内容更新到原来的 textarea 元素中的,而是等到 submit 事件之前把编辑器的内容更新到 textarea 中.
因此,普通的js验证或是jquery validate验证都获取不到编辑器的值.)

1.js验证
获取CKEditor 编辑器的值其实很容易,其值就是CKEDITOR.instances.mckeditor.getData(),实例代码如下:

<script language="javascript" type="text/javascript">   
 
  function checkForm() 
       { 
         var f=document.form1; 
         var topicHeading=f.tbTopicHeading.value; 
         topicHeading = topicHeading.replace(/^\s+/g,""); 
         topicHeading = topicHeading.replace(/\s+$/g,""); 
                 if (topicHeading =="") 
                  { 
                    alert("请输入发表话题的标题."); 
                    f.tbTopicHeading.focus(); 
                    return false; 
                  } 
                  if(topicHeading.length>50); 
                  { 
                   alert("话题的主题长度必须在50字符以内."); 
                   f.tbTopicHeading.focus(); 
                   return false; 
                  } 
         var topicContent=CKEDITOR.instances.mckeditor.getData(); 
          
         topicContent = topicContent.replace(/^\s+/g,""); 
         topicContent = topicContent.replace(/\s+$/g,""); 
                 if (topicContent =="") 
                  { 
                    alert("请填写话题内容."); 
                    f.mckeditor.focus(); 
                    return false; 
                  }  
 
                  if(topicContent.length>4000) 
                  { 
                   alert("话题内容的长度必须在4000字符以内."); 
                   f.mckeditor.focus(); 
                   return false; 
                  }       
 
       }  
       </script>

其中,mckeditor为编辑器的textarea的id和name.
ASP.NET中也是一样:

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine" Width="94%" Height="400px" CssClass="ckeditor"></asp:TextBox> 

2.jQuery Validate验证
jquery的验证模式不能直接使用CKEDITOR.instances.mckeditor.getData()这个值.
它是使用如下形式来提交验证:

function InitRules() { 
      opts = { 
         rules: 
         { 
            tbTopicHeading:{ 
            required:true, 
            maxlength:50   
          },           
          mckeditor:{ 
            required:true, 
            maxlength:4000 
          }  
         }, 
         messages: 
         { 
          tbTopicHeading:{ 
          required:"请输入发表话题的标题.", 
          maxlength:jQuery.format("话题的主题长度必须在50字符以内.")  
        }, 
          mckeditor:{ 
          required:"请填写话题内容.", 
          maxlength:jQuery.format("话题内容的长度必须在4000字符以内.")  
        } 
         }  
      } 
    }

其中mckeditor为控件id,不仅有取值的作用,还有提示信息定位的作用.
因此,可以在页面加载时,加入实例化编辑器代码,实现编辑器更新了内容之后,立即把内容更新到 textarea 元素。

代码如下:

<script type="text/javascript"> 
//<![CDATA[ 
CKEDITOR.instances["mckeditor"].on("instanceReady", function()    
    {    
            //set keyup event  
            this.document.on("keyup", updateTextArea);  
             //and paste event 
            this.document.on("paste", updateTextArea);   
    });    
 
    function updateTextArea()  
    {    
        CKEDITOR.tools.setTimeout( function() 
              {    
                $("#mckeditor").val(CKEDITOR.instances.mckeditor.getData());    
                $("#mckeditor").trigger('keyup');    
              }, 0);  
    }   
//]]> 
              </script>

此段代码放在编辑器控件之下即可.完整实例如下:

<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine" Width="98%" Height="400px" CssClass="ckeditor"></asp:TextBox> 
<script type="text/javascript"> 
//<![CDATA[ 
CKEDITOR.replace( '<%=mckeditor.ClientID %>',// mckeditor.ClientID为TextBox mckeditor生成的对应客户端看到的id 
{ 
skin : 'kama',//设置皮肤 
enterMode : Number(2),//设置enter键的输入1.<p>2为<br/>3为<div> 
shiftEnterMode : Number(1), // 设置shiftenter的输入 
disableNativeSpellChecker:false,  
scayt_autoStartup:false, 
toolbar_Full : [ 
['Source','-','Save','NewPage','Preview','-'], 
['Cut','Copy','Paste','PasteText','PasteFromWord','-'], 
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], 
['NumberedList','BulletedList','-','Outdent','Indent'], 
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], 
['Link','Unlink','Anchor'], 
['Image','Table','HorizontalRule'],['Subscript','Superscript'], 
'/', 
['Bold','Italic','Underline'], 
['TextColor','BGColor'], 
['Styles','Format','Font','FontSize'] 
], 
//filebrowserBrowseUrl: '<%=ResolveUrl("~/ckfinder/ckfinder.html")%>', //启用浏览功能,正式使用场合可以关闭,只允许用户上传 
//filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>', 
//filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>' 如果使用ckfinder 就不要屏蔽 
//自定义的上传 
filebrowserImageUploadUrl:'<%=ResolveUrl("~/fileupload/fileupload.aspx?command=QuickUpload&type=Images")%>' 
}); 
CKEDITOR.instances["mckeditor"].on("instanceReady", function()  
    { 
            //set keyup event 
            this.document.on("keyup", updateTextArea);  
             //and paste event 
            this.document.on("paste", updateTextArea);  
    });  
 
    function updateTextArea() 
    { 
        CKEDITOR.tools.setTimeout( function()  
              { 
                $("#mckeditor").val(CKEDITOR.instances.mckeditor.getData());  
                $("#mckeditor").trigger('keyup');  
              }, 0);  
    }   
//]]> 
              </script>

以上就是解决CKEditor无法验证的两种方案,相信大家和小编一样都有所收获,谢谢大家的阅读。

Javascript 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
Javascript变量作用域详解
Dec 06 Javascript
js生成随机数的过程解析
Nov 24 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 #Javascript
jQuery绑定事件的几种实现方式
May 09 #Javascript
jquery实现左右无缝轮播图
Jul 31 #Javascript
node.js从数据库获取数据
May 08 #Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 #Javascript
基于jquery实现最简单的选项卡切换效果
May 08 #Javascript
基于javascript实现图片滑动效果
May 07 #Javascript
You might like
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP模板解析类实例
2015/07/09 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
Smarty3配置及入门语法
2017/02/22 PHP
javascript 写类方式之九
2009/07/05 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
美国翻新电子产品商店:The Store
2019/10/08 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
劳资人员岗位职责
2013/12/19 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis