`

jq获取ckeditor中textarea里面的内容

    博客分类:
  • Java
阅读更多

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=...>");  

分享到:
评论

相关推荐

    javascript获取ckeditor编辑器的值(实现代码)

    CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.instances.content.getData()==””){alert&#40;“内容不能...

    CKEditor在表单中使用

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

    ckeditor配置上传视频

    需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹里面的plugins文件夹下面。然后配置config.js文件的节点:config.extraPlugins = 'flvPlayer'; 最后配置视频上传路径的URL路径,也就是POST上传文件...

    ckEditor在jsp中的使用

    ckEditor在jsp中的使用zckEditor在jsp中的使用

    让ckeditor只读 让ckeditor只读

    把ckeditor 3.4的ckeditor.js复盖就行

    ckeditor3.4.1+ckfinder2.0.1(asp.net整合版)

    &lt;textarea id="TextArea1" cols="20" rows="2" class="ckeditor"&gt;&lt;/textarea&gt; 如果是ASP.NET环境,也可用服务器端控件 &lt;asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"&gt; 注意...

    CKEDITOR实现新闻内容富文本显示以及添加修改

    CKEDITOR实现新闻内容富文本显示以及添加修改,文档为前台实现ckeditor的代码。

    ckeditor html5_video 插件添加封面和中文功能

    ckeditor4 视频插件html5-video功能增强,添加中文显示,新增添加封面的功能。内有用法示例,请丢在服务器里预览效果。

    CKEditor 4.10.1 中文版.zip

    CKEditor是新一代的FCKeditor,是一个重新开发的版本,CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。CKEditor 4.10.1 中文版 更新日志:2018-11-01已修复问题...

    ckeditor富文本编辑器

    CKEditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域。但用文本区域要实现同样的效果,并不容易,它需要用户输入html代码。 但是,实际上,...

    ckeditor Demo

    ckeditor

    jsp中使用ckeditor

    jsp中使用ckeditor需要的jar包,js以及本人成功使用步骤

    extjs中嵌入ckeditor完整实例

    extjs中嵌入ckeditor的完整实例,同时有ckeditor的配置说明

    ckeditor 4.1 两端对齐按钮支持中文两端对齐补丁

    在ckeditor 4.1两端对齐按钮插件中加入text-justify:inter-ideograph,以支持中文两端对齐显示。

    CKEditor 3.6.2中文文档

    FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。不用多介绍 全中文说明 英文不好的同学有福了

    CKEditor示例源码20121228

    CKEditor示例源码 源码描述: CKEditor示例源码 在.net中加入CKEditor编辑器在编写内容, 里面有配置方法存放在docs文件夹下 源码是一个示例,欢迎感兴趣的用户下载学习

    lineheight支持最新的ckeditor

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

    ckeditor文件管理按钮

    直接在ckeditor的按钮中显示文件浏览按钮,点击后打开文件浏览窗口,上传或管理文件(必须安装.../ckeditor/plugins/file,把plugin.js放到里面 把图标file.gif复制到每个skin里,例如 ckeditor/skins/v2/file.gif

    ckeditor5_v19完整版

    ckeditor5_v19完整版,可直接放在网站根目下使用,工具齐全,注意ckfinder请自行下载并放在网站根目录下。

Global site tag (gtag.js) - Google Analytics