`

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!");
分享到:
评论

相关推荐

    javascript获取ckeditor编辑器的值(实现代码)

    CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.instances.content.getData()==””){alert&#40;“内容不能...

    JS 获取编辑器的值....

    在JavaScript(JS)中,获取编辑器的值是常见的需求,尤其在富文本编辑器或者代码编辑器的应用中。这通常涉及到与DOM(Document Object Model)的交互,因为编辑器的内容是以HTML元素的形式存在。以下将详细介绍如何...

    js获取在线编辑器的值

    本文将详细介绍如何使用JS获取CKEditor实例中的内容,并探讨一些相关的编程技巧和注意事项。 CKEditor是一款功能强大的富文本编辑器,它提供了一种简单的方式来在网页中创建可编辑区域。在CKEditor中,每个编辑器...

    ckeditor插入数据库例子

    这里的`:content`是占位符,将被JavaScript获取的CKEditor内容替换。 5. **执行SQL**:使用数据库连接执行插入语句。在PHP中,这可能是`$conn-&gt;prepare()`和`$stmt-&gt;execute()`;在Python中,可能是`cursor....

    CKEditor编辑器行高插件

    3. 配置:在CKEditor的配置文件(通常是config.js)中,启用该插件,通过`CKEDITOR.config.extraPlugins`设置,添加"lineheight"到插件列表中。 4. 引用:在HTML页面中引用CKEditor,并确保页面加载后编辑器会自动...

    ckeditor 自动排版插件

    2. **解压插件**:将下载的“autoformat”压缩包解压,你会得到一系列文件,这些文件通常包括JavaScript文件(如`plugin.js`)、语言文件(如`lang/en.js`)以及可能的配置文件和样式表。 3. **放置插件**:接下来...

    ckeditor 3 自定义控件

    private const string CKEDITORJS = @"&lt;script language='javascript' src='{0}ckeditor/ckeditor.js' type='text/javascript'&gt;&lt;/script&gt;"; ``` 这些字符串模板将在页面加载时替换为具体的值,并插入到 HTML 文档中...

    CKeditor3.0详细配置[定义].pdf

    - 需要在网页中引用CKeditor的JavaScript脚本。 - 使用CKeditor替换HTML中的文本输入控件,将其转换为富文本编辑器。 6. **CKeditor的配置参数**: - `autoUpdateElement`:表单提交时是否自动更新关联元素的值...

    ASP.NET C# CKEditor(4.14版本)+CKFinder上传图片

    5. **获取编辑器值**:在用户完成编辑后,可以通过调用CKEditor的API来获取包含图片链接的HTML内容。在ASP.NET中,这通常是在表单提交时,通过JavaScript将CKEditor的`getData()`方法返回的值传递到服务器。 6. **...

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

    另一种解决方案是直接在JavaScript验证函数中获取CKEditor的值进行验证,避免依赖于`&lt;textarea&gt;`元素的状态。这种方式更加直接有效,示例如下: ```javascript function checkForm() { var f = document.form1; ...

    ckeditor 3.6.2 怎么使用

    3. 获取编辑器的值:在表单提交时,可以通过 `$_POST['FCKeditor1']` 来获取编辑器中的内容。 接下来,我们看看如何配置和集成 CKFinder: 1. 安装 CKFinder:将 CKFinder 解压缩到 web 根目录,最好与 CKEditor ...

    CKEditor使用教程

    ##### 2.1 获取CKEditor 访问CKEditor官方网站(http://ckeditor.com/),下载所需版本。本文档中使用的版本为v3.0.1。 ##### 2.2 引入CKEditor核心文件 在网页的`&lt;head&gt;`部分引入CKEditor的核心文件`ckeditor.js`...

    Laravel开发-laravel-ckeditor

    为了保存编辑器中的内容,你需要在控制器中创建一个方法接收POST请求,并从`request`对象中获取CKEditor的值。例如: ```php // app/Http/Controllers/EditorController.php public function store(Request $...

    CKeditor的使用

    例如,当用户完成编辑后,你可以通过JavaScript获取编辑器的值,并发送到服务器进行存储: ```javascript var editorContent = CKEDITOR.instances.editor1.getData(); $.ajax({ type: "POST", url: "/save-...

    struts 整合ckeditor

    2. **配置CKEditor**:可以通过配置文件(config.js)或在初始化时设置参数来调整CKEditor的功能,如工具栏选项、图片上传等。 3. **创建编辑器实例**:在HTML页面中,使用JavaScript代码创建CKEditor实例,指定一...

    CKeditor4 字体颜色功能配置方法教程

    CKeditor4是一款流行的开源富文本编辑器,广泛用于网站内容管理、博客系统和其他需要文本编辑功能的项目。在默认配置中,它可能并...记住,始终参考CKeditor4的官方文档,因为它是获取最新信息和解决问题的最可靠来源。

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

    由于CKEditor本质上是JavaScript代码,所以在不同的服务器端语言中,获取CKEditor内容的方法基本相同,关键在于在表单提交前确保内容已经被同步到textarea元素中,以及在提交表单之前进行必要的验证检查。...

    含有CKEditor的表单如何提交

    // 获取CKEditor的所有实例 for (var instance in CKEDITOR.instances) { // 更新每个实例的内容到其textarea元素 CKEDITOR.instances[instance].updateElement(); } ``` 这段代码通过`CKEDITOR.instances`对象...

Global site tag (gtag.js) - Google Analytics