(1) 下载应用
① FCKeditor 下载地址
② 把FCKeditor 2.6.5 解压到项目的 WebRoot 下
③ 解压fckeditor-java-2.6-bin.zip,把文件夹中的fckeditor-java-core-2.6.jar以及lib中的所有jar包拷贝到你的web程序的lib中,fckeditor-java-demo-2.6.war中的slf4j-simple-1.5.8.jar也要拷进去(注意:slf4j-api和slf4j-simple的版本一定要一致)。如果你觉得麻烦,那么就从fckeditor-java-demo-2.5.war中直接将lib文件夹下的所有jar包复制到项目的lib中,效果是一样的
④ 在web.xml中配置相应的Servlet实现应用
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>
</web-app>
⑤ 把fckeditor-java-demo-2.6.war 中的fckeditor.properties复制到你项目的src中
⑥ 在需要应用的jsp页面添加
<%@taglib uri="http://java.fckeditor.net" prefix="FCK"%>
⑦ 在要显示编辑框的地方加入
<FCK:editor instanceName="content" basePath="/fckeditor" value="valuesDemo"></FCK:editor>
1.这里的value就是在文本框内要显示的内容,可以利用java从作用域中取得对象放在这里
2.instanceName 的性质就和input中的name是一样的,利用它进行传值,对应的java类型是String,可以在数据库中存入clob
⑧ 通过iframe添加应用
<input id="content" name="content" value="" type="hidden" /><iframe id="content___Frame" frameborder="0" height="200" scrolling="no" width="100%" src="/dsqcb.com/fckeditor/editor/fckeditor.html?InstanceName=content&Toolbar=Default"> </iframe>
⑨ 测试页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.fckeditor.net" prefix="FCK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body style="text-align:center;">
<FCK:editor instanceName="content" basePath="/fckeditor" value="valuesDemo"></FCK:editor>
</body>
</html>
⑩ 效果
(2) 10个免费的javascript富文本编辑器 (jQuery and non-jQuery)
MarkitUp - jQuery
一个轻量级的、可定制的和灵活的富文本编辑器,常用在CMS、Blog、论坛等网站上。
markItUp不是一个所见即所得的编辑器,支持一些常用快车键和常用的浏览器。
jWYSIWYG - jQuery
jWYSIWYG是比较常用的Jquery所见即所得编辑器,提供了html代码编辑功能、文字编辑功能,图片连接功能,从而保证了jWYSIWYG的简单的特性。
Lightweight RTE- jQuery
Lightweight RTE是一个非常简单的Jquery富文本编辑器,体积只有7kb。提供了一些基本的文字格式化操作功能。
HTMLBox - jQuery
HTMLBox跨浏览器、交互性非常好、开源的Jquery富文本编辑器,在Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari等常用浏览器下测试通过。此编辑器用户手册可以帮住你非常容易地把此编辑器整合到自己的Web系统中
D Small Rich Text Editor - jQuery
D Small Rich Text Editor使用了AjaxFileUpload插件实现图片上传功能。
WYMEditor - jQuery
WYMeditor是一个所建即所得Jquery富文本编辑器。支持插件扩展功能、
TinyMCE - non-jQuery
TinyMCE 国内很多网站都在使用,是一个非常不错的所见即所得编辑器,而且开源。具体功能不再赘述,大家自己发现吧。
fckeditor - Non-jQuery
Fckeditor是一个功能非常强大的富文本编辑器,博客园有使用此编辑器,我做的大部分项目也使用此编辑器,是asp.net网站的首选,提供了weconfig.xml文件用来定制符合自己需求的富文本编辑器。完全可以与MS的Word媲美。
Yahoo YUI Rich Text Editor - Non-jQuery
YUI Rich Text Editor是轻量级的富文本编辑器,提供了一些常用的文字编辑功能。
Xinha - Non-jQuery
Xinha是一个所见即所得的富文本编辑器,提供了强大的文字,图片。视频。音频等编辑功能