用javascript/jQuery给CKEditor取值/赋值
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="http://banu.blog.163.com/blog/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="http://banu.blog.163.com/blog/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=...>");
转自: http://hi.baidu.com/gud613/item/d1e0a833be822226b2c0c504
用javascript/jQuery给CKEditor取值/赋值的更多相关文章
- jquery操作select取值赋值与设置选中[转]
本节内容:jquery实现select下拉框的取值与赋值,设置选中的方法大全. 比如<select class="selector"></select> 1 ...
- jquery 元素文本取值/赋值
select元素选中option值 jq $("#select1 option:selected").text(); $("select id或class option: ...
- Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...
- Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)
Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...
- JQuery TextArea的取值与赋值问题---(textarea中回车清空问题)——个人转载整理
JQuery TextArea的取值与赋值问题---(textarea中回车清空问题) JQuery TextArea的取值与赋值问题 首先,说明这不是一个简单的问题! 先说取值: $("# ...
- Jquery 关于span标签的取值赋值用法
span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素. //赋值 $("#spanid").html(value) //取值 $("#span ...
- JQuery关于span标签的取值赋值
span取值赋值方法有别于一般的页面元素.JQ://赋值$("#spanid").html("hello world") //取值$("#spanid ...
- jquery data方法取值与js attr取值的区别
<a data-v="3"></a> jquery data方法的运行机制: 第一次查找dom,使用attributes获取到dom节点值,并将其值存到缓存 ...
- winform 批量控件取值赋值
以前写winform 最多写几个文本框,最近需要入录一个人员信息,那好几十个字段,一下子干蒙了,这要是一个个取值赋值都写到明天了,于是就自己写了个方法,也不是什么高大上的,就是很简单很普通很low的方 ...
随机推荐
- 关于Java Logger类的使用问题 - 内存不释放
原文地址:http://www.ihuxu.com/p/236.html 说明:这是一个利用Java Logger类的示例,完成简单的日志记录功能.代码中有部分类库没有说明,但不影响阅读. 本人技 ...
- jQuery 3.1 参考手册.CHM离线版下载
制作了一份jQuery 3.1 参考手册.CHM离线版供大家使用 点击下载 预览一下
- QAV250四轴穿越机安装全程详解(多图)
QAV250四轴穿越机安装全程详解 最近团队准备使用轻型穿越机QAV250做实验,本文记录了QAV250的安装过程,整理了开箱后较合理的安装顺序,以及各个步骤的注意事项,希望对有需要的朋友有所帮助.主 ...
- 框架流程图绘制工具OmniGraffle 7 for Mac
1.官网下载地址 https://www.omnigroup.com/omnigraffle 2.激活方法 Omnigraffle Pro 7注册码/许可证 名字:Appked 序列号:MFWG-GH ...
- asp.net mvc json数据缓存
一些虚拟主机资源给的少, 如果直接用框架缓存, 估计内存就爆了吧, 如果不用缓存, 虚拟主机自带的数据库也是限制资源的, 访问多了就直接给timeout了, 用json文件形式缓存查询出来的数据, 虽 ...
- nib must contain exactly one top level object which must be a UICollectionReusableView instance
多了一个
- mysql完整版
mysql: dbs 数据库系统 bdms 数据库管理系统 bda 数据库管理员 db 数据库 dba通过dbms来操作db! 关系型数据库和非关系型数据库 登录mysql mysql -h主机地址 ...
- java反射机制的作用与优点
java的反射机制就是增加程序的灵活性,避免将程序写死到代码里,例如: 实例化一个 person()对象, 不使用反射, new person(); 如果想变成 实例化 其他类, 那么必须修改源代码, ...
- eclipse 配置jdk和maven
准备工作:确保已安装好jdk和maven,并完全配置环境.若是没有请参考前两篇博客: jdk: http://www.cnblogs.com/qinbb/p/6861851.html maven ...
- 新建Android一个项目-菜鸟篇
①打开Eclipse,单击菜单栏的“File”->把鼠标光标移动到“New”->在弹出的列表框中,如果直接能看到“Android Applicaion Project”选项项,则直接单击此 ...