常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor


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

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

常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor_第1张图片

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

常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor_第2张图片

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

常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor_第3张图片

常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor_第4张图片

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

常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor_第5张图片

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

常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor_第6张图片


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

web.xml

 

  1. <?xml version="1.0" encoding="UTF-8"?> 

  2. <web-app version="2.5"  

  3.     xmlns="http://java.sun.com/xml/ns/javaee"  

  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  

  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee  

  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 

  7.     <filter> 

  8.         <filter-name>struts2</filter-name> 

  9.         <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class> 

  10.     </filter> 

  11.     <filter-mapping> 

  12.         <filter-name>struts2</filter-name> 

  13.         <url-pattern>/*</url-pattern> 

  14.     </filter-mapping> 

  15.      

  16.   <welcome-file-list> 

  17.     <welcome-file>index.jsp</welcome-file> 

  18.   </welcome-file-list> 

  19. </web-app> 

CkeditorAction

 

 

  1. import com.opensymphony.xwork2.ActionSupport; 

  2.  

  3. public class CkeditorAction extends ActionSupport{ 

  4.     private String editor1; 

  5.      

  6.     public String execute(){ 

  7.         <strong>System.out.println(editor1);</strong> 

  8.         return SUCCESS; 

  9.     } 

  10.      

  11.  

  12.     public String getEditor1() { 

  13.         return editor1; 

  14.     } 

  15.     public void setEditor1(String editor1) { 

  16.         this.editor1 = editor1; 

  17.     } 

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

 



struts.xml

 

  1. <?xml version="1.0" encoding="UTF-8" ?> 

  2. <!DOCTYPE struts PUBLIC 

  3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 

  4.     "http://struts.apache.org/dtds/struts-2.0.dtd"> 

  5.  

  6. <struts> 

  7.     <package name="wan" extends="struts-default"> 

  8.         <!--导出Ckeditor  --> 

  9.         <action name="Ckeditor" class="com.wanwan.app.action.CkeditorAction"> 

  10.             <result name="success">/ce/uploadImage.jsp</result> 

  11.         </action> 

  12.     </package> 

  13.  

  14. </struts>    

index.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 

  2. <

  3. String path = request.getContextPath(); 

  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 

  5. %>  

  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

  7. <html> 

  8.   <head> 

  9.     <base href="<%=basePath%>">  

  10.     <title>富文本框</title>  

  11.     <strong><script type="text/javascript" src="ckeditor/ckeditor.js"></script></strong> 

  12.     <script type="text/javascript">   

  13.     </script>   

  14.   </head> 

  15.   <body> 

  16.     <form action="Ckeditor" method="post" > 

  17.         <strong><textarea id="editor1" name="editor1"><p>Initial value.</p></textarea><br/> 

  18.         <script type="text/javascript">   

  19.             CKEDITOR.replace( 'editor1' );   

  20.         </script></strong> 

  21.         <input type="submit" value="提交">  

  22.         </form> 

  23.   </body> 

  24. </html> 

 

注意粗体部分,引用ckeditor



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


你可能感兴趣的:(fckeditor,ckeditor,FreeTextbox,富文本框插件,CuteEditor)