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 api中的js函数,从而解决了CKEditor的项目路径问题,在CKEditor的自定义标签中不支持表达式,所以不能使用项目路径,所以需要使用js代码解决
CKEditor 5是一款先进的富文本编辑器,专为现代Web应用程序设计。它的全屏按钮功能是编辑器的一个重要特性,允许用户将编辑区域扩展到浏览器的整个窗口,从而提供无干扰的写作体验。这个功能在编写长篇文章、报告...
"ckeditor 行间距插件"就是专门为CKEditor设计的一个增强功能,旨在让用户能够更加灵活地调整文本的行间距,以满足不同设计需求。 CKEditor 的行间距插件通常包含以下几个核心知识点: 1. **安装与集成**:首先,...
《ckeditor4行高插件详解及应用》 在网页编辑器的发展中,CKEditor一直以其强大的功能和良好的用户体验而备受青睐。CKEditor4是其重要的一代产品,它提供了丰富的可扩展性,允许用户根据需求定制编辑器的功能。在...
把ckeditor 3.4的ckeditor.js复盖就行
最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...
**ckeditor自定义上传图片** 在使用ckeditor作为富文本编辑器时,经常需要集成图片上传功能。ckeditor是一款强大的在线文本编辑器,它提供了丰富的文本格式化工具,使得在网页上编辑内容变得简单。然而,ckeditor...
在本文中,我们将深入探讨ckeditor-5这一强大的富文本编辑器的最新更新——“已增加调整行高”功能。ckeditor-5是互联网上广泛使用的文本编辑工具,它以其用户友好的界面和丰富的功能集而备受赞誉。这次更新为用户...
CKEditor是一款著名的富文本编辑器,它为网页提供高级文本编辑功能,广泛应用于网站内容管理、博客、论坛等在线交互平台。在这个“ckeditor的demo代码”中,我们主要关注的是如何在网页中集成并使用CKEditor,以及...
《ckeditor5_v19完整版》是一款强大的在线文本编辑器,专为网页内容创作而设计。这个版本提供了全面的功能,适合直接部署在您的网站根目录下,为用户提供一个高效的文本编辑环境。它集成了多种工具,使用户可以方便...
**ckeditor数学公式编辑器** 在IT领域,尤其是Web开发中,富文本编辑器(Rich Text Editor)是不可或缺的工具,它允许用户在网页上创建和编辑格式化的文本。CKEditor是一款广泛使用的开源富文本编辑器,它提供了...
**ckeditor5 全功能版(纯手工编译)** CKEditor 5 是一款现代、开源且功能强大的富文本编辑器,被广泛应用于网站、应用程序和其他需要高质量文本输入的场景。这款编辑器以其易于使用、高度可定制和丰富的功能集而...
在IT行业中,富文本编辑器CKEditor 4是一款广泛应用的在线文本编辑工具,它提供了丰富的功能,如格式化、图片上传、链接管理等。本文将深入探讨如何为CKEditor 4自定义音频和视频上传插件,以满足特定的媒体处理需求...
2. `ckeditor-java-core-3.5.3.jar`:这是CKEditor Java库的核心文件,包含了CKEditor与Java交互的代码,我们需要将其添加到项目的类路径中,以便在JSP页面上使用CKEditor。 3. `ckeditor-java-core-3.5.3-sources....
CKEditor是一款功能强大的富文本编辑器,广泛应用于Web开发中,提供给用户类似桌面应用程序的文本编辑体验。这款编辑器支持HTML元素的创建、格式化、图像上传以及各种媒体嵌入,极大地提升了网页内容的编辑效率。...
CKEditor是一款广泛应用于企业网站的富文本编辑器,被誉为“最好用版本”。相较于EWebEditor,CKEditor在功能、易用性和灵活性上有着显著的优势。本文将深入探讨CKEditor的特点、优势以及如何在企业网站中进行JS调用...
CKEditor 是一款非常知名的开源富文本编辑器,广泛应用于网页制作、内容管理系统和论坛等需要进行文本编辑的场景。CKEditor 3.0 稳定版是该编辑器的一个重要版本,它提供了丰富的功能和良好的用户体验。在这个版本中...
CKeditor 是一款强大的富文本编辑器,被广泛应用于网页、内容管理系统和其他需要用户输入格式化文本的场景。这款编辑器以其丰富的功能、易用性和高度可定制性而受到开发者的青睐。"一键排版"是CKeditor 提供的一项...
CKEditor编辑器是一款广泛应用于网页和在线应用的富文本编辑器,它提供了丰富的文本格式化选项,使得非技术用户也能方便地编辑和排版文本。"行高插件"是CKEditor的一个扩展功能,旨在为用户提供调整文本行高的能力,...
CKEditor 4.0 是一款广泛使用的开源富文本编辑器,专为网页内容创作而设计。这个最新版本的发布带来了许多改进和增强的功能,旨在提供更高效、更易用的在线文本编辑体验。CKEditor 4.0 的核心特点包括高度自定义、...