`
woshixushigang
  • 浏览: 562959 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

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="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">
<!--
var editor = 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 的第一个参数值
editor.document.getBody().getHtml();

var editor = CKEDITOR.replace("content");
alert(editor.getData());

插 入图片

若要演示此示例,最好是放在按钮的事件处理程序中,目的是有些延迟。

CKEDITOR.instances.content.insertHtml("<img src=...>");
分享到:
评论

相关推荐

    CKEditor在表单中使用

    在这个包中,包含了原来的代码,当时这里调用了CKEditor api中的js函数,从而解决了CKEditor的项目路径问题,在CKEditor的自定义标签中不支持表达式,所以不能使用项目路径,所以需要使用js代码解决

    让ckeditor只读 让ckeditor只读

    把ckeditor 3.4的ckeditor.js复盖就行

    ckeditor配置上传视频

    最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...

    ckeditor Demo

    ckeditor

    ckeditor4 行高插件

    本插件源码来自互联网,由于源代码基于ckeditor3.6.61,故对源码进行过简单修改,以求适应ckeditor4.4.7

    ckeditor5-v30 全工具版.rar

    ckeditor5-v30 全工具版 ,基本将免费的工具备齐了,源文件,可自行修改重新打包,node_modules 文件夹为包文件,该文件夹容量较大,在实际应用时可以删除,必须在网站模式使用,如:...该版本表格插件与微软的edge...

    lineheight支持最新的ckeditor

    之前在网上下载的都不可以用,于是想尽办法发现是网上提供的是不支持最新的ckeditor.用法找见自己的ckeditor地址让后放到ckeditor/plugins/ 下,最后修改ckeditor/config.js,如果之前添加过工具则在 config....

    ckeditor插件工具

    ckeditor插件工具,ckeditor插件工具,ckeditor插件工具,ckeditor插件工具,

    ckeditor4音频视频上传自定义插件

    ckeditor4音频视频上传自定义插件

    ckeditor文件管理按钮

    直接在ckeditor的按钮中显示文件浏览按钮,点击后打开文件浏览窗口,上传或管理文件(必须安装ckfinder先) config.js中添加名为File的按钮 config.js中添加 ... 创建目录 ...ckeditor/skins/v2/file.gif

    ckeditor4.4

    ckeditor

    CKEditor FLV视频播放插件

    FLV视频格式具有本身占有率低、视频质量良好、体积小等特点,非常适合在网络...但是,在新版本的CKEditor里却没有FLV格式视频的支持。于是我自己动手开发CKEditor的FLV视频播放插件现在上传。PS:这个版本是.net版的。

    CKEditor 4.0 行距插件lineheight

    用于最新CKEditor4.0的行距插件,不能用于CKEditor3.X.X及以前版本

    ckeditor4.0 最新版本

    不错编辑器 最新版本ckeditor4.0 最新版本

    CKEditor操作(操作说明)

    &lt;%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %&gt;-------引进CKEditor控件 【图书特色】 &lt;CKEditor:CKEditorControl ID="bookFeature" runat="server" &gt;&lt;/CKEditor:...

    ckeditor4.3.2

    ckeditor4.3.2

    ckeditor 行间距插件

    ckeditor 行间距插件

    ckeditor_4.15.1_812ea7723937_C++_ckeditor_

    ckeditor file upload

    ckeditor文件

    ckeditor文件

    CKEditor实现本地视频和图片的上传功能

    CKEditor实现本地视频和图片的上传功能,不用kfinal

Global site tag (gtag.js) - Google Analytics