1 下載FCKeditor_2.6.4.1,fckeditor-java,fckeditor-java-demo-2.4.2.war;
2 在html文件中使用fckeditor
解壓FCKeditor_2.6.4.1，把FCKeditor_2.6.4.1中的fckeditor文件夾復制到webroot目錄下，刪除出錯文件（fck_docprops.html文檔類文件）。
新建文件如下test1.html
<html>
<head>
<title>test1.html</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
<form action="index.jsp" method="post">
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'content' ) ;
oFCKeditor.BasePath = "/fck_test/fckeditor/" ;<!-- fck_test為項目名稱 -->
oFCKeditor.Width = 1000 ;
oFCKeditor.Height = 300 ;
oFCKeditor.ToolbarSet ="Basic" ;
oFCKeditor.Value = '<p>This is some <strong>sample text<\/strong>. You are using <a ;
oFCKeditor.Create() ;
</script>
<input type="submit" value="Submit" />
</form>
</body>
</html>
<html>
<head>
<title>test2.html</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath = "/fck_test/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<form action="" method="post"
target="_blank">
<div>
<textarea name="FCKeditor1" rows="10" cols="80"
style="width: 100%; height: 200px"><p>This is some <strong>sample text</strong>. You are using <a >FCKeditor</a>.</p></textarea>
</div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
3 在jsp中使用fckeditor
解壓fckeditor-java-demo-2.4.2.war，找到5個jar包，導入工程。
新建文件如下：test1.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.fckeditor.net" prefix ="FCK" %>
<html>
<head>
</head>
<body>
<form action="index.jsp" method="post">
<form action="index.jsp" method="post">
<FCK:editor instanceName="myEditor" basePath="/fckeditor" value="dfadsfds"></FCK:editor>
<input type="submit" value="Submit" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
System.out.println(request.getParameter("myEditor"));
%>
${param.myEditor}
</body>
</html>
fckeditor對象的屬性：
Width ,Height,Value,ToolbarSet="Default/Basic", BasePath;
fckeditor配置文件
在配置文件中修改如下一項：(fckconfig.js)
FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath+'fck_config.js' ;
新建配置文件fck_config.js ,內(nèi)容如下，對fckeditor進行自定義：
FCKConfig.AutoDetectLanguage = false ; <!—自動檢測語言 -->
FCKConfig.ToolbarSets["my"] = [
['Source','DocProps'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About']
] ; <!—配置工具條 -->
FCKConfig.FontNames = '宋體;楷體_GB2312;黑體;隸書;Times New Roman;Arial' ; <!—配置字體 -->
FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br <!—配置換行格式 -->
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif','100_3650.JPG'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 210 ; <!—配置css以及表情圖片及顯示方式 -->
文件上傳：
在web.xml文件中加入：
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<!-- Do not wrap this line otherwise Glassfish will fail to load this file -->
<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>
在src下新建文件fckeditor.properties內(nèi)容如下：
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
這樣，就可以進行文件的上傳
文件上傳可能出現(xiàn)的問題：中文文件名亂碼
解決方案：
找到ConnectorServlet類，關聯(lián)源碼：
找到如下所示代碼，增加upload.setHeaderEncoding("utf-8");
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("utf-8");//增加編碼格式
try {
List<FileItem> items = upload.parseRequest(request);
把ConnectorServlet作為自己的類使用，在web.xml中修改配置如下；
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
com.ConnectorServlet //修改成自己的類
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
這樣就解決了文件中文名的亂碼問題
修改文件上傳的類型：
服務器端： 在fckeditor.properties中加入
connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png|abc
客戶端：fck_config.js加入
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png|bmp|abc)$" ; // empty for all