首次体现FCKeditor在线编辑器

先看看效果吧:

 

开发环境:

Tomcat6.0 MyEclipse6.0.1

FCKeditor 版本 FCKeditor_2.5.1 FCKeditor-2.3 这里需要用到两个包

下载地址:http://www.fckeditor.net/download/default.html

 

开始:

 

新建工程,名称为 FCKeditor

 

解压 FCKeditor_2.2 包中的 edit 文件夹到项目中的 WebRoot 目录

解压 FCKeditor_2.2 包中的 fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件夹到项目中的 WebRoot 目录

解压 FCKeditor-2.3.zip 包中的 \web\WEB-INF\lib 下的两个 jar 文件到项目的 WebRoot\WEB-INF\lib 目录

解压 FCKeditor-2.3.zip 包中的 \src 下的 FCKeditor.tld 文件到项目的 WebRoot\WEB-INF 目录

删除 WebRoot\edit 目录下的 _source 文件夹

 

刷新一下工程,有一个文件会出错,不管它是什么错,将错误信息清除

 

修改 web.xml 文件,加入以下内容

 

 

  
  
  
  
  1. <servlet>  
  2.  
  3. <servlet-name>Connector</servlet-name>  
  4.  
  5. <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>  
  6.  
  7. <init-param>  
  8.  
  9. <param-name>baseDir</param-name>  
  10.  
  11. <!-- 此为文件浏览路径 -->  
  12.  
  13. <param-value>/UserFiles/</param-value>  
  14.  
  15. </init-param>  
  16.  
  17. <init-param>  
  18.  
  19. <param-name>debug</param-name>  
  20.  
  21. <param-value>true</param-value>  
  22.  
  23. </init-param>  
  24.  
  25. <load-on-startup>1</load-on-startup>  
  26.  
  27. </servlet>  
  28.  
  29.  
  30. <servlet>  
  31.  
  32. <servlet-name>SimpleUploader</servlet-name>  
  33.  
  34. <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>  
  35.  
  36. <init-param>  
  37.  
  38. <param-name>baseDir</param-name>  
  39.  
  40. <!-- 此为文件上传路径,需要在WebRoot 目录下新建 UserFiles 文件夹 -->  
  41.  
  42. <!-- 根据文件的类型还需要新建相关的文件夹 Image、Flash -->  
  43.  
  44. <param-value>/UserFiles/</param-value>  
  45.  
  46. </init-param>  
  47.  
  48. <init-param>  
  49.  
  50. <param-name>debug</param-name>  
  51.  
  52. <param-value>true</param-value>  
  53.  
  54. </init-param>  
  55.  
  56. <init-param>  
  57.  
  58. <!-- 此参数为是否开启上传功能 -->  
  59.  
  60. <param-name>enabled</param-name>  
  61.  
  62. <param-value>true</param-value>  
  63.  
  64. </init-param>  
  65.  
  66. <init-param>  
  67.  
  68. <param-name>AllowedExtensionsFile</param-name>  
  69.  
  70. <param-value></param-value>  
  71.  
  72. </init-param>  
  73.  
  74. <init-param>  
  75.  
  76. <!-- 此参数为文件过滤,以下的文件类型都不可以上传 -->  
  77.  
  78. <param-name>DeniedExtensionsFile</param-name>  
  79.  
  80. <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>  
  81.  
  82. </init-param>  
  83.  
  84. <init-param>  
  85.  
  86. <param-name>AllowedExtensionsImage</param-name>  
  87.  
  88. <param-value>jpg|gif|jpeg|png|bmp</param-value>  
  89.  
  90. </init-param>  
  91.  
  92. <init-param>  
  93.  
  94. <param-name>DeniedExtensionsImage</param-name>  
  95.  
  96. <param-value></param-value>  
  97.  
  98. </init-param>  
  99.  
  100. <init-param>  
  101.  
  102. <param-name>AllowedExtensionsFlash</param-name>  
  103.  
  104. <param-value>swf|fla</param-value>  
  105.  
  106. </init-param>  
  107.  
  108. <init-param>  
  109.  
  110. <param-name>DeniedExtensionsFlash</param-name>  
  111.  
  112. <param-value></param-value>  
  113.  
  114. </init-param>  
  115.  
  116. <load-on-startup>1</load-on-startup>  
  117.  
  118. </servlet>  
  119.  
  120. <servlet-mapping>  
  121.  
  122. <servlet-name>Connector</servlet-name>  
  123.  
  124. <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>  
  125.  
  126. </servlet-mapping>  
  127.  
  128. <servlet-mapping>  
  129.  
  130. <servlet-name>SimpleUploader</servlet-name>  
  131.  
  132. <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>  
  133.  
  134. </servlet-mapping> 

新建一个提交页 test.jsp 文件和一个接收页 test1.jsp 文件

 

test.jsp 代码如下:

 

  
  
  
  
  1. <%@ taglib uri="/WEB-INF/FCKeditor.tld " prefix="fck"%>  
  2. <%@ page contentType="text/html;charset=UTF-8" language="java"%>  
  3. <html>  
  4. <head>  
  5. <title>Test</title>  
  6. </head>  
  7.  
  8. <body>  
  9. <FORM action="test1.jsp">  
  10. <fck:editor id="testfck" basePath="/FCKeditor/" height="400" width="800" 
  11. skinPath="/FCKeditor/editor/skins/default/" toolbarSet="Default" 
  12. imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" 
  13. linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" 
  14. flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" 
  15. imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image" 
  16. linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File" 
  17. flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">  
  18. </fck:editor>  
  19. <input type="submit" value="提交">  
  20. </FORM>  
  21. </body>  
  22. </html> 

test1.jsp

  
  
  
  
  1. <%@ page contentType="text/html;charset=UTF-8" language="java"%>  
  2. <html>  
  3. <head>  
  4. <title>TEST</title>  
  5. </head>  
  6.  
  7. <body>  
  8. <%=request.getParameter("testfck")%>  
  9. </body>  
  10. </html> 

在 WebRoot 目录下新建 UserFiles 文件夹,在此文件夹下新建 Image 和 Flash 两个文件夹
这样就可以了,现在测试 .
 

你可能感兴趣的:(开发,下载地址,在线编辑器)