编辑器FCKeditor使用指南
HTML编辑器FCKeditor使用详解... 1
引言... 1
一、简介... 1
二、下载... 1
三、部署... 1
四FCK具体配置：... 3
1、配置语言... 3
2、字体列表：... 3
3、文件上传：... 3
4、表单调用： js调用方法：... 5
5、前台取得效果... 5
五 结语... 5
六 附录... 5
引言
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。本文讲述了HTML编辑器FCKeditor的使用方法。
一、简介
功能：所见即所得，支持图片和Flash，工具栏可自由配置，使用简单
兼容性：IE 5.5+、Firefox 1.5+、Safari 3.0+、Opera 9.50+、Netscape 7.1+、 Camino 1.0+
成熟度：使用广泛，被Baidu、CSDN等选用
二、下载
现在由于一系列因素,FCKEDITOR己经出到3.X系列,并更名为CKEDITOR.在其官网上己经找不到我现在所用版本的引子.我所采用的是2.6.4版本,这个版本比较稳定.至于新版本3系列,目前据说还只能用在测试上,不能正式使用.所以,这个介绍,是针对2.6.4来使用的.
三、部署
第一步：下载fckeditor
fckeditor支持很多语言。
分为两个，一个是公用的包使用版本是2.6.4，里面基本是js和css等语言无关文件，用来生成编辑框。
另一个是和语言有关的，我用的是java 下载java的，最新版式2.4.1
下载fck是没法使用的，会报错。还需要一个s4fj的包 slf4j-simple-1.5.2.jar
第二步 建立sample
讲fck的包和那个slf4j的包加入项目路径
fck的包 包括 fckeditor-java-core-2.4.1.jar
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
slf4j-api-1.5.2.jar
复制fck2.6.4里面的文件夹到工程根目录
在工程目录src/下新建一个文件fckeditor.properties，添加内容：connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
connector.userFilesPath=/upload/UserFiles保存即可。
2)修改web.xml，用来提供上传功能支持，
添加内容：
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
3）建立sample。jsp
<%@ page contentType="text/html; charset=GBK" %>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<html>
<head>
</head>
<body>
<span>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('office.content');//传入参数为表单元素（由FCKeditor生成的input或textarea）的name
oFCKeditor.BasePath='<%=request.getContextPath()%>/fckeditor/';//指定FCKeditor根路径，也就是fckeditor.js所在的路径
oFCKeditor.Height='97%';
oFCKeditor.ToolbarSet='Default';//指定工具栏
oFCKeditor.Value="";//默认值
oFCKeditor.Create();
</script>
</span>
</body>
</html>
如些这般就配好了.可以正常始用
本例以WebRoot作为应用根路径，部署后的目录结构如下图所示：
![]()
从官网上下载的文件有很多是不需要的,本着尽量去掉多余部分,减少项目所占空间的原则,上面是我精简后的部分,可以直接使用.
四FCK具体配置：
1、配置语言
打开fckconfig.js文件(相对FCKeditor文件夹，以下同)，把自动检测语言改为不检测，把默认语言改为简体中文：
FCKConfig.AutoDetectLanguage = false；
FCKConfig.DefaultLanguage = 'zh-cn'；
FCKConfig.TabSpaces = 1； //在编辑器中是否可以是否TAB键 0 不可用 1 为可用
2、字体列表：
打开fckconfig.js文件，在字体列表中添加常用的“宋体；黑体；隶书；楷体_GB2312”
FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'；
编辑器域内默认的显示字体为12px，想要修改可以通过修改样式表来达到要求，打开/editor/css/fck_editorarea.css，把body, td下的font-size:14px即可
3、文件上传：
FCKeditor的文件管理程序在filemanager文件夹中，又分为浏览(browser)和上传(upload)两种。浏览是指浏览服务器文件并可以选择，也可以上传本地文件至服务器；上传是指快速上传(QuickUpload)，在窗口中点“上传”选项卡打开就是，跟我们使用的UBB编辑器有点相似，选择本地文件后上传就行。
也就是说FCKeditor中有一个文件浏览，有两个文件上传，而这些设置有些在一个文件中，有的则在多个文件中。比较复杂，改动比较多，我们再分几个小点儿来说。
①打开和关闭文件浏览和上传功能：
fckconfig.js，以下内容设为true为开，false则为关。
文件浏览和浏览中上传功能：
FCKConfig.LinkBrowser = false；
FCKConfig.ImageBrowser = false；
FCKConfig.FlashBrowser = false；
文件快速上传功能：
FCKConfig.LinkUpload = true；
FCKConfig.ImageUpload = true；
FCKConfig.FlashUpload = true；
editor\filemanager\connectors\asp\config.asp
ConfigIsEnabled = False //表示文件浏览关闭
ConfigIsEnabled = True //表示文件快速上传打开
②文件上传：
editor\filemanager\connectors\asp\config.asp
ConfigUserFilesPath = "/userfiles/" //上传的路径设置
我的文件上传目录在根目录下面，就照以上设置。如果在本地测试这个网站在虚拟目录test中，则应该设置为：
ConfigUserFilesPath = "/test/userfiles/"
③改默认语言
fckconfig.js
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
④可以自己加上重定义文件名的程序
4、表单调用：
js调用方法：
<script type="text/javascript">
var oFCKeditor = new FCKeditor('office.content');//传入参数为表单元素（由FCKeditor生成的input或textarea）的name
oFCKeditor.BasePath='<%=request.getContextPath()%>/fckeditor/';//指定FCKeditor根路径，也就是fckeditor.js所在的路径
oFCKeditor.Height='97%';
oFCKeditor.ToolbarSet='Default';//指定工具栏
oFCKeditor.Value="";//默认值
oFCKeditor.Create();
</script>
5、前台取得效果
注意要转义特殊字符,例如
String content = offi.getContent();
if (content != null) {
content = content.replaceAll("\r\n", "");
content = content.replaceAll("\r", "");
content = content.replaceAll("\n", "");
content = content.replaceAll("\"", "'");
}else{
content = "";
}
五 结语
FCK主要在HR的后台公告发布中使用,可以分配多种模板和皮肤供不同的需求.
六 附录
配图
![]()
- 大小: 19.3 KB
- 大小: 31.7 KB
分享到：
相关推荐
**Fckeditor 2.6.4 详细配置指南** Fckeditor 是一款开源的富文本编辑器，它允许用户在网页上直接编辑文本内容，类似于Word的功能。2.6.4 版本是其历史版本之一，它在处理中文文件夹和图片时可能会遇到一些问题。...
2. **说明.txt**：提供了编辑器的使用指南和安装步骤，帮助开发者和用户了解如何配置和使用FCKeditor。 3. **fckeditor**：这是一个文件夹，包含了FCKeditor的所有核心组件和资源，如JavaScript文件、CSS样式表、...
6. **使用文档**：随FCKeditor提供的使用指南详细介绍了如何安装、配置和使用编辑器，对于开发者来说是一份宝贵的参考资料。 **与Ckeditor的对比** Ckeditor是FCKeditor的后续版本，进行了大量的优化和改进，尤其...
FCKeditor 2.6.4是其在2008年发布的一个稳定版本，据描述所示，它在实际应用中表现出良好的性能和可用性。 FCKeditor的核心特性包括： 1. **所见即所得（WYSIWYG）编辑**：用户在网页上直接进行文本编辑，看到的...
示例代码通常展示了如何在ASP.NET页面中使用FCKeditor控件，而文档则提供了详细的使用指南和技术支持。 总的来说，FCKeditor_2.6.4和FCKeditor.Net_2.6.3是为Web开发者提供的一种强大、易用的富文本编辑解决方案，...
**FCKEditor使用指南.pdf** 这份文档应该是官方提供的详细使用手册，包含了FCKeditor的基本操作、配置、API介绍、集成到项目中的步骤等内容。对于初学者来说，这是一个宝贵的资源，能够帮助快速理解如何在自己的网站...
1. **FCKeditor详细文档.doc**：这份文档可能包含了FCKeditor的详细使用指南，包括编辑器的配置、API调用、事件处理等。 2. **如何使用.doc**：这份文档可能指导用户如何在Java项目中安装和配置FCKeditor，包括添加...
### FCKEditor使用指南知识点详解 #### 一、FCKEditor简介 FCKeditor是一款功能强大且易于使用的HTML文本编辑器，它为Web应用程序提供了类似于桌面编辑器MS Word的强大编辑功能。这款编辑器的设计目标是轻量级和...
### FCKeditor在Java环境下的配置使用指南 #### 一、FCKeditor简介 FCKeditor是一款非常实用的在线富文本编辑器，它能够提供类似于Microsoft Word的强大编辑功能，极大地提升了Web应用程序的用户体验。FCKeditor是...