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. 详细介绍C++STL:unordered_map

    不得不提一下,hash_map未加入在C++11标准中. 在VC中编译: #include <hash_map> using namespace stdext; hash_map<i ...

  2. echarts折线图个性化填充、线条、拐点样式

    由于每组数据的拐点样式.线条颜色都不一样,所以series里的每组数据都需要单独设置样式. 首先先来看一下完成后的效果吧 具体设置如下 series: [ { name:systemName[0], ...

  3. 在C++里一个类成员函数多少行代码才是最好呢?

    这个问题,很多同事以及学生都问我这个问题.其实这是一个比较实际的问题,因为设计一个类成员函数的好与坏,决定了一个类代码的质量. 为了回答这个问题,昨晚又重新看看斯坦福大学的编程视频,可以用下面这个截图 ...

  4. magento的必备插件(转)

    标签: 插件 magento magento插件 必备插件 Magento插件 ,插件,我要常见Magento必备插件 .. 都是免费的Magento插件,多而杂,乡亲们自己挑~~ [因收集而强大 & ...

  5. iOS-----推送机制(上)

    推 送 机 制 使用NSNotificationCenter通信 NSNotificationCenter实现了观察者模式,允许应用的不同对象之间以松耦合的方式进行通信. NSNotification ...

  6. TensorBoard 实践 1

    从新查看图的时候,删除旧的logs/下面的文件 tf.scalar_summary('loss',self.loss) AttributeError: 'module' object has no a ...

  7. X-Mirage苹果屏幕录制工具7天试用期破解 imsoft.cnblogs

    X-Mirage (PC) 能让你的 Windows 变成一个 iPhone.iPad 或者 iPod Touch 的屏幕镜像,应用程序.游戏.照片.视频等等一切可以在 iOS 移动端显示的东西,都镜 ...

  8. JavaScript高级程序设计——闭包

    前言 有很多人搞不清匿名函数和闭包这两个概念,经常混用.闭包是指有权访问另一个函数作用域中的变量的函数.匿名函数就是没有实际名字的函数. 闭包 概念 闭包,其实是一种语言特性,它是指的是程序设计语言中 ...

  9. microsoft webMatrix 使用 IISnode 进行node express 开发

    微软的microsoft webMatrix是一个免费的开发工具,我们可以使用它进行node 开发并利用iisnode 模块进行iis 的nodejs网站的维护,还是比较方便的. 一个简单的node ...

  10. 根据IP获得城市信息(百度API的运用)

    /**      * 根据IP获取城市      * @param string $ip ip地址      * @return array      * http://api.map.baidu.c ...