zoukankan      html  css  js  c++  java
  • (转)用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编辑器内容是否为空的检测了。

    当然可能这篇博文还有很多不完善的地方,希望各位高手们指出,以便日后完善一下。

  • 相关阅读:
    用户体验的时间尺度
    ibatis的xml中的dtd问题
    ASP.NET AJAX调用服务
    C#打包安装与卸载
    学习 WCF (6)学习调用WCF服务的各种方法
    C#.NET ActiveX控件的制作
    如何使用C#开发“类ActiveX组件”
    Asp.Net框架下WebService和Remoting的区别
    今天打开网站,突然发现sql 2005出现错误:数据库 'mybase_db' 的事务日志已满。若要查明无法重用日志中的空间的原因,请参阅 sys.databases 中的 log_reuse_wait_desc 列。
    VS部署中的ProductCode问题
  • 原文地址:https://www.cnblogs.com/wanshutao/p/4353430.html
Copyright © 2011-2022 走看看