因为编者我还是一个初学入门者,无论是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版本编辑器内容为空的方法的更多相关文章

  1. js判断登陆用户名及密码是否为空的简单实例

    js判断登陆用户名及密码是否为空的简单实例 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript ...

  2. js判断浏览器是否安装或启用了flash的方法总结

    目录 # js判断浏览器是否安装或启用了flash的方法 # chrome浏览器启用flash插件的方法 # 参考 # js判断浏览器是否安装或启用了flash的方法 在传统浏览器,可以使用windo ...

  3. js判断IE浏览器版本

    if(navigator.userAgent.indexOf("MSIE")>0){ if(navigator.userAgent.indexOf("MSIE 6. ...

  4. 更靠谱的js判断浏览器及其版本

    所有的前端开发人员都没有办法回避一个问题,那就是浏览器版本判断,当我们无法回避需要进行浏览器版本判断时,前辈们往往会告诉我们,可以判断 UserAgent这个用来标示浏览器的字符串,通过判断这一字符串 ...

  5. 实验:JS判断浏览器中英文版本

    <script type="text/javascript"> var lang = (navigator.systemLanguage?navigator.syste ...

  6. js判断IE浏览器版本(IE8及以下)

    var DEFAULT_VERSION = 8.0; var ua = navigator.userAgent.toLowerCase(); var isIE = ua.indexOf("m ...

  7. JS判断PC操作系统版本

    var version = navigator.userAgent; console.log(version); //"Mozilla/5.0 (Windows NT 10.0; WOW64 ...

  8. JS判断浏览器是否支持某一个CSS3属性的方法

    var div = document.createElement('div'); console.log(div.style.transition); //如果支持的话, 会输出 "&quo ...

  9. JS判断指定dom元素是否在屏幕内的方法实例

    前言 刷网页的时候,有时会遇到这样一个情景,当某个dom元素滚到可见区域时,或者图片的懒加载效果,它就会展现显示动画,十分有趣.那么这是如何实现的呢? 实现原理 想要实现这个功能,就要知道具体的实现原 ...

随机推荐

  1. Python数据类型list(列表)和tuple(元组)

    list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> ...

  2. POJ1505 Copying Books(二分法)

    B - 二分 Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu   Description   Be ...

  3. function的粗浅理解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. OC & java 对比

    Objective-C的语法对比(和Java的对比)    Objective-C的语法对比(和Java的对比) 1.函数的对比 例子: helloworld方法 Java 语言:     publi ...

  5. SCALA中类的继承

    慢慢的,回想起以前学习JAVA和C#当中的的类的特性了. 感觉大同小异吧... package com.hengheng.scala class OOPInScala { } class Studen ...

  6. html动态编辑框

    简述: 随着在输入框中增加字符,动态矿高度增加(IE9及以上 chrome  firefox) 由于IE8 不支持oninput函数,所以不能实现此效果 事件函数: function feedDivO ...

  7. java 、Android 提交参数转码问题

    1.解决Android.JAVA.ajax提交中文.URL中文参数传递后的乱码问题的解决办法  2.JAVA 中URL链接中文参数乱码的处理方法  3.JAVA URL中带有中文时的处理 在提交参数的 ...

  8. Javascript语法基础

    Javascript语法基础   一.基本数据类型   JavaScript中支持数字.字符串和布尔值三种基本数据类型: 1.数字 数字型是JavaScript中的基本数据类型.在JavaScript ...

  9. lr11 录制脚本时候,无法自动启动ie,查了网上很多方法都未解决?

    解决办法是把杀毒软件.防火墙都关闭,再重新运行一次,就可以了

  10. 关于JavaScriptSerializer使用的问题

    初学C#的同学们,你们有没有这样的问题:遇到不懂的问题,就到处搜索,好不容易搜索出来答案吧,却发现缺少引用,缺少引用就添加引用吧,结果在添加中找不到!是不是很恼火? 解决办法:查看项目的目标框架,如果 ...