前言
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。
可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及 ABAP等不同的编程语言相结合。"FCKeditor"名称中的"FCK"是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。
如何启动访问demo?
- 下载最新版的FCKEDITOR
- 解压缩到你的站点根文件夹中名为FCKEDITOR的文件夹中(名称必须为FCKEDITOR,因为配置文件中已经使用此名称来标示出FCKEDITOR的位置)
- 现在,编辑器就可以使用了,如果想要查看演示,可以按下面方法访问: http://< your-site>/FCKeditor/_samples/default.html
注意:你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹fckeditor.js中编辑器BasePath参数,如下所示: 修改FCKeditor.BasePath = '/fckeditor/'
另外,FCKEDITOR文件夹中所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运行时必需的。
如何将FCKEDITOR整合进我的页面?
- Javascript的方式
- 假如编辑器已经安装在你的站点的/FCKEDITOR/文件夹下.那么,第一步我们需要做的就是在页面的HEAD段中放入SCRIPT标记以引入JAVASCRIPT整合模块.例如:
< script type="text/javascript" src="fckeditor/fckeditor.js">< /script>
其中路径是可更改的; -
现在,FCKEDITOR类已经可以使用了.在页面中建立一个FCKEDITOR编辑器:
方法:在页面的FORM标记内需要插入编辑器的地方置入以下代码:<script type="text/javascript"> var ff= new FCKeditor("msg"); ff.BasePath="fckeditor/"; ff.Create(); < /script>
- 假如编辑器已经安装在你的站点的/FCKEDITOR/文件夹下.那么,第一步我们需要做的就是在页面的HEAD段中放入SCRIPT标记以引入JAVASCRIPT整合模块.例如:
- Jsp的方式(需要到官方网站下载fckeditor-java-demo-2.6.rar)
web.xml配置:
FckEditor for java 2.6.10版本 <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>
导入lib的jar:
打开fckeditor-java-demo-2.6.rar里面看到的lib文件夹,你会看到大概6个jar文件,像commons-fileupload-1.2.1.jar、java-core-2.6.jar等,把它们全部复制到你的项目的WEB-INF\lib里面。
在JSP中使用标签调用demo:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %> <html> <head> <title>FckEditor测试</title> </head> <body style="text-align: center;"> FckEditor测试 <hr> <form action="ShowData.jsp" method="post"> <FCK:editor instanceName="test" height="400pt"> <jsp:attribute name="value"> 这里是http://baike.baidu.com/">数据测试 </jsp:attribute> </FCK:editor> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form> </body> </html>