目前市面上用的比较多的富文本编辑器有：

​​FreeTextBox​​ 一个有很多年历史的富文本编辑器了，使用简单，而且一般的使用是免费的，但是不开源，上传图片上传附件等功能没有，扩展性差。


​​CuteEditor​​最强大的富文本编辑器，巨牛无比，但是是收费的，个人使用的话用下破解版倒无所谓，要想在企业中使用那就得买了，所以虽然强大，但是想节约的话就不考虑这个了。看看他的菜单就知道他有多牛了：


​​FCKEditor​​（升级版CKEditor）强大的开源富文本编辑器，各个语言中都可以使用。支持上传图片、Flash等，功能强扩展性强。



​​TinyMCE​​ 也是一个开源的富文本编辑器，不过名气没有FCKEditor大，功能还是不错。


​​KindEditor ​​一个国人开发的富文本编辑器，貌似还不错，没有深入研究。



下面我写了一个很简单CKEditor实例

web.xml


[html] ​​view plain​​​​copy​​​​print​​​​?​​


  2. <?xml version="1.0" encoding="UTF-8"?>
  3. <web-app version="2.5"
  4. xmlns="http://java.sun.com/xml/ns/javaee"
  5. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  6. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  7. http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  8. <filter>
  9. <filter-name>struts2</filter-name>
  10. <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
  11. </filter>
  12. <filter-mapping>
  13. <filter-name>struts2</filter-name>
  14. <url-pattern>/*</url-pattern>
  15. </filter-mapping>

  17. <welcome-file-list>
  18. <welcome-file>index.jsp</welcome-file>
  19. </welcome-file-list>
  20. </web-app> 


<?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">     <filter>      <filter-name>struts2</filter-name>      <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>     </filter>     <filter-mapping>      <filter-name>struts2</filter-name>      <url-pattern>/*</url-pattern>     </filter-mapping>     <welcome-file-list>     <welcome-file>index.jsp</welcome-file>   </welcome-file-list> </web-app>

CkeditorAction



[java] ​​view plain​​​​copy​​​​print​​​​?​​


  2. import com.opensymphony.xwork2.ActionSupport;

  4. public class CkeditorAction extends ActionSupport{
  5. private String editor1;

  7. public String execute(){
  8. <strong>System.out.println(editor1);</strong>
  9. return SUCCESS;
  10. }


  13. public String getEditor1() {
  14. return editor1;
  15. }
  16. public void setEditor1(String editor1) {
  17. this.editor1 = editor1;
  18. }
  19. } 


import com.opensymphony.xwork2.ActionSupport;  public class CkeditorAction extends ActionSupport{  private String editor1;    public String execute(){   System.out.println(editor1);   return SUCCESS;  }     public String getEditor1() {   return editor1;  }  public void setEditor1(String editor1) {   this.editor1 = editor1;  } }

在控制台打印使用CKEditor从页面传过来的的CKEditor文本内容，




struts.xml


[html] ​​view plain​​​​copy​​​​print​​​​?​​


  2. <?xml version="1.0" encoding="UTF-8" ?>
  3. <!DOCTYPE struts PUBLIC
  4. "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
  5. "http://struts.apache.org/dtds/struts-2.0.dtd">

  7. <struts>
  8. <package name="wan" extends="struts-default">
  9. <!--导出Ckeditor -->
  10. <action name="Ckeditor" class="com.wanwan.app.action.CkeditorAction">
  11. <result name="success">/ce/uploadImage.jsp</result>
  12. </action>
  13. </package>

  15. </struts> 


<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"     "http://struts.apache.org/dtds/struts-2.0.dtd">  <struts>  <package name="wan" extends="struts-default">   <!--导出Ckeditor  -->   <action name="Ckeditor" class="com.wanwan.app.action.CkeditorAction">    <result name="success">/ce/uploadImage.jsp</result>   </action>  </package>  </struts>

index.jsp [html] ​​view plain​​​​copy​​​​print​​​​?​​


  2. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6. %>
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9. <head>
  10. <base href="<%=basePath%>">
  11. <title>富文本框</title>
  12. <strong><script type="text/javascript" src="ckeditor/ckeditor.js"></script></strong>
  13. <script type="text/javascript">
  14. </script>
  15. </head>
  16. <body>
  17. <form action="Ckeditor" method="post" >
  18. <strong><textarea id="editor1" name="editor1"><p>Initial value.</p></textarea><br/>
  19. <script type="text/javascript">
  20. CKEDITOR.replace( 'editor1' );
  21. </script></strong>
  22. <input type="submit" value="提交">
  23. </form>
  24. </body>
  25. </html> 


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% 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>     <base href="<%=basePath%>">      <title>富文本框</title>      <script type="text/javascript" src="ckeditor/ckeditor.js"></script>     <script type="text/javascript">       </script>     </head>   <body>    <form action="Ckeditor" method="post" >         <textarea id="editor1" name="editor1"><p>Initial value.</p></textarea><br/>         <script type="text/javascript">            CKEDITOR.replace( 'editor1' );        </script>      <input type="submit" value="提交">       </form>   </body> </html>


注意粗体部分，引用ckeditor



说明：以上代码是将CKEditor文本类容传到action，并且在action打印出来，相信看到的人会连接数据库，这里我就不写了，一般数据库类型可以用大文本或者CLOB，当然可以直接生成一个静态页面，