今天在做一个留言版块的时候,输入内容用的是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!");
分享到:
相关推荐
CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.instances.content.getData()==””){alert(“内容不能...
ckeditor富文本编辑器需要引入的js,包括两个js:ckeditor.js,config.js
把ckeditor 3.4的ckeditor.js复盖就行
然后配置config.js文件的节点:config.extraPlugins = 'flvPlayer'; 最后配置视频上传路径的URL路径,也就是POST上传文件的地址:config.filebrowserFlvPlayerUploadUrl = '/ckeditor/upload_json.ashx?dir=media',...
ckeditor
chart.js CKEditor插件 这个插件增加了从Digital Factory中的CKEditor创建图表的可能性,它基于库。 安装 要安装此插件,您需要将chart文件夹复制到javascript/plugins下的ckeditor模块中,然后部署CKEditor模块并转...
NULL 博文链接:https://zhangyinhu8680.iteye.com/blog/2111496
CKEditor实现本地视频和图片的上传功能,不用kfinal
用法找见自己的ckeditor地址让后放到ckeditor/plugins/ 下,最后修改ckeditor/config.js,如果之前添加过工具则在 config.extraPlugins = 'gongju'; 这里面直接跟到后面 config.extraPlugins = 'gongju,lineheight'; ...
ckeditor文件
本插件源码来自互联网,由于源代码基于ckeditor3.6.61,故对源码进行过简单修改,以求适应ckeditor4.4.7
直接在ckeditor的按钮中显示文件浏览按钮,点击后打开文件浏览窗口,上传或管理文件(必须安装.../ckeditor/plugins/file,把plugin.js放到里面 把图标file.gif复制到每个skin里,例如 ckeditor/skins/v2/file.gif
ckeditor.js解決传路径的问题
CKeditor富文本编辑器的js压缩包,CKEditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域
CKEditor绑定,js操作 <%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>-------引进CKEditor控件 【图书特色】 <CKEditor:CKEditorControl ID="bookFeature" runat=...
ckeditor
ckeditor4.3.2
Ember.js的CKEditor 5组件联合国官员富文本编辑器组件的Ember.js。为什么我们做到了是一个内容创建平台。 一个好的富文本编辑器是我们产品的核心。 我们的平台使用因此我们自然需要与CKEditor 5良好地集成,从,我们...
ckeditor最新