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="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=...>");
相关推荐
### CKEditor 3.6.2中文文档知识点详解 #### 一、CKEditor简介 - **定义**: CKEditor(原名FCKeditor)是一款专为网页设计的开放源代码所见即所得的文字编辑器。这款编辑器的目标在于轻量化的设计理念,让用户无需...
可以通过`CKEDITOR.instances.editor.getData()`获取编辑器的当前内容。 5. **处理响应和错误**:在JSP中,你可能需要对用户的输入进行验证,或者在服务器返回错误时显示给用户。这通常涉及到AJAX请求和响应处理,...
- 当表单提交时,可以通过`request.getParameter("editor1")`获取编辑器中输入的内容。 - 示例代码: ```java String content = request.getParameter("editor1"); if (content != null && !content.equals("")...
在上述代码中,`'editor1'`是对应于`<textarea>`的ID,`CKEDITOR.replace()`方法会替换这个`<textarea>`,并将其转换为CKEditor实例。你还可以在括号内传递一个配置对象,自定义CKEditor的行为,如设置语言、工具栏...
对于新安装,开发者应首先从CKEditor官方网站下载最新版本的CKEditor压缩包,然后将解压后的文件夹放置在网站根目录下的ckeditor目录中。如果需要自定义存放路径,可以通过相对路径或绝对路径进行引用。对于升级安装...
CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.instances.content.getData()==””){alert(“内容不能...
在本文中,我们将深入探讨如何在CodeIgniter (CI) 框架中集成流行的富文本编辑器CKEditor。CKEditor是一款功能强大的Web文本编辑器,适用于创建和编辑网页内容。它提供了丰富的文本格式化选项,使用户可以轻松地创建...
例如,如果你使用的是Servlet,你可以在`doPost`方法中获取编辑器的内容: ```java protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ...
CKEditor是一款广泛应用于Web开发中的富文本编辑器,它提供了丰富的文字格式化功能,使得用户在网页上可以像在桌面应用程序中一样编辑内容。在JSP(JavaServer Pages)环境中集成CKEditor,可以让用户在服务器端进行...
在这个包中,包含了原来的代码,当时这里调用了CKEditor api中的js函数,从而解决了CKEditor的项目路径问题,在CKEditor的自定义标签中不支持表达式,所以不能使用项目路径,所以需要使用js代码解决
3. **初始化编辑器**:通过JavaScript调用`CKEDITOR.replace()`或`CKEDITOR.appendTo()`方法,指定要替换的textarea或者创建新的编辑区域。 4. **配置编辑器**:可以通过配置对象设置编辑器的属性,例如工具栏按钮、...
需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹里面的plugins文件夹下面。然后配置config.js文件的节点:config.extraPlugins = 'flvPlayer'; 最后配置视频上传路径的URL路径,也就是POST上传文件...
在IT领域,尤其是在Web开发中,富文本编辑器如CKEditor常常被用来提供用户友好的内容编辑体验。CKEditor允许用户在网页上编辑文本,格式化样式,插入图片等,就像是一个轻量级的桌面文字处理软件。这个“ckeditor...
在实际应用中,你可能还需要处理CKEditor的事件,例如当用户保存编辑内容时,可以监听`instanceReady`事件来获取编辑器中的HTML内容。这可以通过CKEditor的API实现: ```javascript CKEDITOR.instances.myEditor.on...
在本文中,我们将深入探讨ckeditor-5这一强大的富文本编辑器的最新更新——“已增加调整行高”功能。ckeditor-5是互联网上广泛使用的文本编辑工具,它以其用户友好的界面和丰富的功能集而备受赞誉。这次更新为用户...
你也可以通过CKEditor的API获取或设置编辑器的内容,如`CKEDITOR.instances['myEditor'].getData()`用于获取编辑器的当前内容,`CKEDITOR.instances['myEditor'].setData(html)`则用于设置编辑器的内容。 总的来说...
在"ckeditor_3.4.1"这个压缩包中,可能包含以下内容: - `ckeditor`目录:这是CKEditor的核心文件夹,包含了编辑器的所有必需文件,如JavaScript库、CSS样式表、语言文件、图片和其他资源。 - `samples`目录:包含...
CKEditor是一款功能强大的富文本编辑器,常用于网站内容管理系统,提供用户友好的界面来创建和编辑HTML内容。在这个“ckeditor简单实例”中,我们将探讨如何在网页中集成CKEditor并利用其基本功能。 首先,我们需要...
在实际应用中,CKEditor 5全屏按钮是提高内容创作者效率的一个实用工具,尤其适合新闻编辑、博客发布、在线文档协作等场景。其灵活性和可定制性使得它能够满足不同项目的需求,无论是在大型企业级应用还是小型个人...