`

js获取ckeditor的值

阅读更多
今天在做一个留言版块的时候,输入内容用的是ckeditor在线编辑器,原想更别的input一样,用js来判断他们的值是否为空的时候,发现

<div class="right message">
                <div id="DTitle"><img src="images/message_bg.png" /></div><br />
                <div id="icompany" runat="server">
                    <ul>
                        <li><b>主题:</b><i><asp:TextBox ID="TxtSubject" runat="server"></asp:TextBox><font color="#ff0000">*</font></i></li>
                        <li><b>姓名:</b><i><asp:TextBox ID="TxtName" runat="server"></asp:TextBox></i></li>
                        <li><b>E-mail:</b><i><asp:TextBox ID="TxtMail" runat="server"></asp:TextBox></i></li>
                        <li><b>来自:</b><i><asp:TextBox ID="TxtFrom" runat="server"></asp:TextBox>例如:江苏苏州</i></li>
                        <li><b>电话:</b><i><asp:TextBox ID="TxtTel" runat="server"></asp:TextBox></i></li>
                        <li>
                            <asp:HiddenField ID="HdIp" runat="server" />
                            <b>反馈信息:</b><i><asp:TextBox ID="TxtContent" runat="server" TextMode="MultiLine"></asp:TextBox><font color="#ff0000">*</font></i><br /><asp:ImageButton
                            ID="ImgSubmit" CssClass="submit" runat="server" OnClientClick="return oncheck();" ImageUrl="images/submit.gif" OnClick="ImgSubmit_Click" /></li>
                           
                    </ul>
                    <script type="text/javascript">
           var editor=CKEDITOR.replace("TxtContent",{language:'zh-cn',width:500, height:180, toolbar:[['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['Cut','Copy','Paste'],['TextColor','BGColor'],]});
        </script>
                </div>
            </div>



f($("#TxtSubject")[0].value=="")
    {
        alert("请输入主题");
        $("#TxtSubject")[0].focus();
        return false;
    }

用这样的命令可以获取主题输入框的值是成功的,但是如果还是用同样的方法来获取TxtContent的值的话,是获取不到的,获取的值总是为空!不论您往里面填入什么,都是空的,因为TxtContent的值,已经用ckeditor来代替,所以用js获取不到,但是在服务器端确实可以获取得到的,也就是"this.TxtContent.Text.Tostring()"是能获取到ckeditor里面的值的!
但是不能在客户端进行判断!所以,简单“bd”了一下,

“在页面内注册编辑器,并赋值给一个变量,以便引用。

var editor=CKEDITOR.replace( 'editor1' );
然后使用如下语句就可以取得编辑器内的值。

editor.document.getBody().getText(); //取得纯文本

editor.document.getBody().getHtml(); //取得html文本


以上是别人的回复!于是这样就可以了,所以,现在我上面的代码中再加上

   else if(editor.document.getBody().getText()==""){
        alert("请输入留言内容");
        return false;
       
    }

就是可以了!



===
CKEditor 是著名的 HTML 编辑器,IBM、Oracle、Adobe 等都在用。CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更名为 CKEditor。其开源协议是基于 GPL, LGPL 和 MPL 的。官方网站:http://ckeditor.com/
一般来说,我们在编辑内容时,先是读入到 textarea,再将 textarea 的内容赋给编辑器。因为直接把内容作为字符串给编辑器的 Value 属性赋值使用的是 JavaScript 代码,要让 JS 代码不受内容中双引号、换行等的干扰,只有先读入到 textarea 最方便。
使用 CKeditor 3.0.1
<textarea  cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
    CKEDITOR.replace("content");
//-->
</script>
可以看出,3.x 版本的使用非常方便,也不用担心会形成两个同名的 content。实际上 textarea 的 id 省略了也是可以的,因为 CKEditor 会先按 name 来查找,查找不到,再按 id 来查找。
并且编辑器会在 textarea 的位置替换原有的 textarea。
设置编辑器皮肤、宽高
<textarea  cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
    CKEDITOR.replace("content",
      {
          skin: "kama", width:700, height:300
      });
//-->
</script>
skin 值应该是 ckeditor/skins 文件夹下的某个文件夹名称,如果指向不存在的皮肤,则不会显示编辑器。
设置值、取值
设置值
CKEDITOR.instances.content.setData("输入文字"); // content 就是前面 CKEDITOR.replace 的第一个参数值

var editor = CKEDITOR.replace("content");
editor.setData("输入文字");
取值
alert(CKEDITOR.instances.content.getData()); // content 就是前面 CKEDITOR.replace 的第一个参数值

var editor = CKEDITOR.replace("content");
alert(editor.getData());
插入图片
若要演示此示例,最好是放在按钮的事件处理程序中,目的是有些延迟。
CKEDITOR.instances.content.insertHtml("<img src=...>");

================
取值:
CKEDITOR.instances.CKEditorID.getData();

赋值:
CKEDITOR.instances.CKEditorID.setData("Hello World!");
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics