FCKeditor使用
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 href="http://www.fckeditor.net/">FCKeditor<\/a>.<\/p>' ;
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 href="http://www.fckeditor.net/">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 ,内容如下，对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内容如下：
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
这样，就可以进行文件的上传
文件上传可能出现的问题：中文文件名乱码
解决方案：
找到ConnectorServlet类，关联源码：
找到如下所示代码，增加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