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. 26个你不知道的Python技巧

    Python是目前世界上最流行的编程语言之一.因为: 1.它容易学习 2.它用途超广 3.它有非常多的开源支持(大量的模块和库) 不好意思,优达菌又啰嗦了. 本文作者 Peter Gleeson 是一 ...

  2. CUDA Samples: 获取设备属性信息

    通过调用CUDA的cudaGetDeviceProperties函数可以获得指定设备的相关信息,此函数会根据GPU显卡和CUDA版本的不同得到的结果也有所差异,下面code列出了经常用到的设备信息: ...

  3. B+与B-树

    1 .B-树定义 B-树是一种平衡的多路查找树,它在文件系统中很有用. 定义:一棵m 阶的B-树,或者为空树,或为满足下列特性的m 叉树:⑴树中每个结点至多有m 棵子树:⑵若根结点不是叶子结点,则至少 ...

  4. MVA Prototype Only User License

    This App is only a protetype of MVA WP app, the intent is to demostrate to Leadership person about w ...

  5. 解析Linux中的VFS文件系统机制

    转载:原文地址https://www.ibm.com/developerworks/cn/linux/l-vfs/ 1. 摘要 本文阐述 Linux 中的文件系统部分,源代码来自基于 IA32 的 2 ...

  6. 【机器学习算法】cascade classifier级联分类器

    前言 参考 1.级联分类器: 完

  7. 如何查看linux系统的版本信息

    前言 有时候需要查看linux系统的版本信息,本文将对此简单介绍. 方法 1.输入"uname -a ",可显示电脑以及操作系统的相关信息. 2.输入"cat /etc/ ...

  8. ZOJ2401 Zipper 双塔式 DP(双塔DP)

    第二次遇到双塔DP,再写一下. (flag是为了避免memset多次导致的时间浪费) #include<cstdio> #include<cstdlib> #include&l ...

  9. 20155301 2016-2017-2 《Java程序设计》第9周学习总结

    20155301 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC全名Java DataBase Connectivity,是联机数据库的标准规范.具 ...

  10. centos7安装mysql5.7的终极解决方案

    在centos7中安装最新版本mysql5.7.10可能会出现各种各样的问题,不管出现什么问题,先仔细阅读下面,或许对你有帮助! 1.systemctl stop mysqld.service 关闭m ...