(转)用JS判断ckeditor3.6版本编辑器内容为空的方法
因为编者我还是一个初学入门者,无论是JS还是PHP,都是懂了点皮毛。今天在研究ckeditor编辑器的时候遇到了一些问题,虽然这只是我的个人问题,但觉得可以分享给其他人,或许也有像我这样的初学者也会遇到这问题。
好了,现在谈一下这问题。
在接触ckeditor编辑器之前,编者制作的表单都是用的<textarea>标签,比如制作的留言本、新闻发布器等,但由于<textarea>的输入框输入的内容格式单一,基本没什么扩展功能,所以使用了ckeditor编辑器。在这里先声明,编者使用的是ckeditor3.6版本的。
在<textarea>的时候,我们用js判断输入框内容是否为空一般都是这么写的:
|
1
2
3
4
5
6
7
8
|
<script> function check_form(){ if(myform.content.value==""){ alert("请输入内容!"); return false; } }</script> |
下面是表单代码:
|
1
2
3
4
|
<form action="" name="myform" method="post"> <textarea name="content" rows=10 cols=40>默认内容</textarea> <input type="submit" name="sub" check_form()"></form> |
上面的两端代码组合是可以进行输入框内容验证的。
那么在使用了ckeditor3.6之后,如果js里继续使用myform.content.value获取输入框里的内容的话是没有效果的了。后来网上了解到,在ckeditor3.6版本里,要获取到编辑器里的内容,需要使用CKEDITOR.instances.content_name.getData(),其中content_name换成你自己的name属性值,在3.0及之前版本使用CKEDITOR.instancesgetData()。而且获取到的编辑器里的内容是带有html标签的,这要注意了。
譬如编者最后改版的js代码如下:
|
1
2
3
4
5
6
7
8
9
10
|
<script>function check_form(){ var content= CKEDITOR.instances.content.getData(); if(content==""||content.match("请在这里输入新闻内容!")){ xw.content.focus(); alert("请填写新闻内容!"); return false; }}</script> |
JS代码可见,用CKEDITOR.instances.content_name.getData()获取到编辑器里的内容到变量content里,再在if条件里判断content内容是否为空,也判断是否包含下面我设置的默认值“请在这里输入新闻内容!”,一旦判断有其中之一就认为没有用户填写新闻内容。这里之所以用content.match()方法判断而不用content=="请在这里输入新闻内容!"是因为获取到的编辑器里的内容带有html标签,所以嘛,就不解释了。
再看表单代码如下(结合PHP):
|
1
2
3
4
5
|
<form name="myform" action="" method="post"> //显示编辑器(之前要创建CKEditor对象,这里就不写了) <?php $ed->editor("content","请在这里输入新闻内容!"); ?> <input type="submit" name="sub" check_form()"></form> |
表单代码中可见,显示的编辑器的name属性值是content,默认显示的文字是“请在这里输入新闻内容!”
这样就完成了对ckeditor编辑器内容是否为空的检测了。
当然可能这篇博文还有很多不完善的地方,希望各位高手们指出,以便日后完善一下。
(转)用JS判断ckeditor3.6版本编辑器内容为空的方法的更多相关文章
- js判断登陆用户名及密码是否为空的简单实例
js判断登陆用户名及密码是否为空的简单实例 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript ...
- js判断浏览器是否安装或启用了flash的方法总结
目录 # js判断浏览器是否安装或启用了flash的方法 # chrome浏览器启用flash插件的方法 # 参考 # js判断浏览器是否安装或启用了flash的方法 在传统浏览器,可以使用windo ...
- js判断IE浏览器版本
if(navigator.userAgent.indexOf("MSIE")>0){ if(navigator.userAgent.indexOf("MSIE 6. ...
- 更靠谱的js判断浏览器及其版本
所有的前端开发人员都没有办法回避一个问题,那就是浏览器版本判断,当我们无法回避需要进行浏览器版本判断时,前辈们往往会告诉我们,可以判断 UserAgent这个用来标示浏览器的字符串,通过判断这一字符串 ...
- 实验:JS判断浏览器中英文版本
<script type="text/javascript"> var lang = (navigator.systemLanguage?navigator.syste ...
- js判断IE浏览器版本(IE8及以下)
var DEFAULT_VERSION = 8.0; var ua = navigator.userAgent.toLowerCase(); var isIE = ua.indexOf("m ...
- JS判断PC操作系统版本
var version = navigator.userAgent; console.log(version); //"Mozilla/5.0 (Windows NT 10.0; WOW64 ...
- JS判断浏览器是否支持某一个CSS3属性的方法
var div = document.createElement('div'); console.log(div.style.transition); //如果支持的话, 会输出 "&quo ...
- JS判断指定dom元素是否在屏幕内的方法实例
前言 刷网页的时候,有时会遇到这样一个情景,当某个dom元素滚到可见区域时,或者图片的懒加载效果,它就会展现显示动画,十分有趣.那么这是如何实现的呢? 实现原理 想要实现这个功能,就要知道具体的实现原 ...
随机推荐
- iOS开发——C篇&数组与指针
2015-07-17 13:23 编辑 前面我们介绍了关于C语言的内存分配问题,下面我们就开始介绍关于C语言的两个非常重要的知识点:数组与指针 数组与指针其实不仅仅是再C语言中,再OC中(当然OC是内 ...
- The formatter threw an exception while trying to deserialize the message in WCF
有一个WCF应用, 主要功能是存储doc, txt等类型文件到database,当文件的大小在16kb之内,调用WCF service能正常工作:但如果文件大小超出16KB之外, 它将抛出这样一个错误 ...
- 实验七:Linux内核如何装载和启动一个可执行程序
原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 题目自拟,内容围绕对Linu ...
- 终端编写c程序
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:JackAlan链接:http://www.zhihu.com/question/21483375/answer/322672 ...
- process launch failed : failed to get the task for process xxx
原因: 证书问题,project和targets的证书都必须是开发证书,ADHOC的证书会出现此问题. 解决方案: project和targets的证书使用开发证书. 其他: This error ...
- Vim记录
Command Mode下: . 代表当前行 % 代表所有行 $ 代表结束行 :1,$normal i# 全部行前加#,同下 :%normal i# :read ! cd /usr/bin/; ...
- totolink的n200r路由在卓越网和京东网的价钱
totolink的n200r路由在卓越网和京东网的价钱, 应朋友需要帮忙买totolink的n200r的路由, 一向是在京东买电子产品的,之前都有在卓越网购物,所以今天也去看看卓越网上n200r的价格 ...
- ionic中使用Cordova Uglify 压缩js与css
参照:https://www.npmjs.com/package/cordova-uglify 安装:npm install cordova-uglify 安装完成之后,打开: hooks/uglif ...
- 常用的JQuery UI框架
http://www.ligerui.com/ http://www.jeasyui.com/index.php http://www.jqwidgets.com/
- KEIL C编译器常见警告与错误信息的解决办法
对于函数的自变量.局部变量和全局变量声明如果没有指定内存类型,则内存模式将成为内定的内存类型.如果指定了内存类型的变量,则不理会内存模式,完全有所指定的内存类型为主. SMALL模式:小模式 ...