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&nbsp; 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取值/赋值的更多相关文章

  1. jquery操作select取值赋值与设置选中[转]

    本节内容:jquery实现select下拉框的取值与赋值,设置选中的方法大全. 比如<select class="selector"></select> 1 ...

  2. jquery 元素文本取值/赋值

    select元素选中option值 jq $("#select1 option:selected").text(); $("select id或class option: ...

  3. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  4. Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)

    Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...

  5. JQuery TextArea的取值与赋值问题---(textarea中回车清空问题)——个人转载整理

    JQuery TextArea的取值与赋值问题---(textarea中回车清空问题) JQuery TextArea的取值与赋值问题 首先,说明这不是一个简单的问题! 先说取值: $("# ...

  6. Jquery 关于span标签的取值赋值用法

    span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素. //赋值 $("#spanid").html(value) //取值 $("#span ...

  7. JQuery关于span标签的取值赋值

    span取值赋值方法有别于一般的页面元素.JQ://赋值$("#spanid").html("hello world") //取值$("#spanid ...

  8. jquery data方法取值与js attr取值的区别

    <a data-v="3"></a> jquery data方法的运行机制: 第一次查找dom,使用attributes获取到dom节点值,并将其值存到缓存 ...

  9. winform 批量控件取值赋值

    以前写winform 最多写几个文本框,最近需要入录一个人员信息,那好几十个字段,一下子干蒙了,这要是一个个取值赋值都写到明天了,于是就自己写了个方法,也不是什么高大上的,就是很简单很普通很low的方 ...

随机推荐

  1. 关于Java Logger类的使用问题 - 内存不释放

    原文地址:http://www.ihuxu.com/p/236.html   说明:这是一个利用Java Logger类的示例,完成简单的日志记录功能.代码中有部分类库没有说明,但不影响阅读. 本人技 ...

  2. jQuery 3.1 参考手册.CHM离线版下载

    制作了一份jQuery 3.1 参考手册.CHM离线版供大家使用 点击下载 预览一下

  3. QAV250四轴穿越机安装全程详解(多图)

    QAV250四轴穿越机安装全程详解 最近团队准备使用轻型穿越机QAV250做实验,本文记录了QAV250的安装过程,整理了开箱后较合理的安装顺序,以及各个步骤的注意事项,希望对有需要的朋友有所帮助.主 ...

  4. 框架流程图绘制工具OmniGraffle 7 for Mac

    1.官网下载地址 https://www.omnigroup.com/omnigraffle 2.激活方法 Omnigraffle Pro 7注册码/许可证 名字:Appked 序列号:MFWG-GH ...

  5. asp.net mvc json数据缓存

    一些虚拟主机资源给的少, 如果直接用框架缓存, 估计内存就爆了吧, 如果不用缓存, 虚拟主机自带的数据库也是限制资源的, 访问多了就直接给timeout了, 用json文件形式缓存查询出来的数据, 虽 ...

  6. nib must contain exactly one top level object which must be a UICollectionReusableView instance

    多了一个

  7. mysql完整版

    mysql: dbs 数据库系统 bdms 数据库管理系统 bda 数据库管理员 db 数据库 dba通过dbms来操作db! 关系型数据库和非关系型数据库 登录mysql mysql -h主机地址 ...

  8. java反射机制的作用与优点

    java的反射机制就是增加程序的灵活性,避免将程序写死到代码里,例如: 实例化一个 person()对象, 不使用反射, new person(); 如果想变成 实例化 其他类, 那么必须修改源代码, ...

  9. eclipse 配置jdk和maven

    准备工作:确保已安装好jdk和maven,并完全配置环境.若是没有请参考前两篇博客: jdk:    http://www.cnblogs.com/qinbb/p/6861851.html maven ...

  10. 新建Android一个项目-菜鸟篇

    ①打开Eclipse,单击菜单栏的“File”->把鼠标光标移动到“New”->在弹出的列表框中,如果直接能看到“Android Applicaion Project”选项项,则直接单击此 ...