FCKEditor的使用

文档：
http://www.fckeditor.net/

http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide

http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide

1.Download FCKeditor_2.6.3b.zip, copy FCKeditor directory to webapp/.
Delete some unused file:
(1)all folders whose name start with "_" under FCKeditor directory and its child directory.
(2)all files under FCKeditor directory except fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml.
(3)some files under editor/skins,editor/lang etc if you will not use them.

2.Download FCKeditor-2.3.zip,This is the JSP Integration Pack for using FCKeditor inside a java server page without the complexity of using a Java scriptlets or the javascript api.

3.Copy these two servlet,servlet-mapping from FCKeditor-2.3/web/WEB-INF/web.xml to web.xml in your project,
and do some change.
change servlet-mapping from
<servlet-mapping> 
<servlet-name>Connector</servlet-name> 
<url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern> 
  </servlet-mapping> 
  <servlet-mapping> 
<servlet-name>SimpleUploader</servlet-name> 
<url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern> 
</servlet-mapping>
to
<servlet-mapping> 
<servlet-name>Connector</servlet-name> 
<url-pattern>/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern> 
  </servlet-mapping> 
  <servlet-mapping> 
<servlet-name>SimpleUploader</servlet-name> 
<url-pattern>/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern> 
  </servlet-mapping>

4.Copy all libs under FCKeditor-2.3/web/WEB-INF/lib to /WEB-INF/lib of your project.

5.Copy xalan.jar to project if you want to browse and upload image etc.

6. Add a jsp.
<%
//It is mandatory. or
String content = (String)request.getAttribute("content");
if (content != null) {
//content = content.replaceAll("\r\n", "");
content = content.replaceAll("\r", "");
content = content.replaceAll("\n", "");
content = content.replaceAll("\"", "'");
} else {
content = "";
}
%>
<script type="text/javascript">

//传入参数为表单元素（由FCKeditor生成的input或textarea）的name
var oFCKeditor = new FCKeditor('content');

//指定FCKeditor根路径，也就是fckeditor.js所在的路径
oFCKeditor.BasePath='<session:constant name="ContextPath"/>/fckeditor/';

//The path of EditorAreaCSS should be passed from the server side.
  oFCKeditor.Config['EditorAreaCSS'] = '<session:constant name="ContextPath"/>/css/test.css';
 
oFCKeditor.Height='100%';
oFCKeditor.ToolbarSet='Default';
oFCKeditor.Value="<%=content%>";//默认值
oFCKeditor.Create();
</script>


7. fckconfig.js
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/jsp/connector';
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector';
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector';
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File';
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image';
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash';

8. Add a watermark picture in the edit textare.
body
{
   background-image: url(your image path);
   background-repeat: no-repeat;
}