[align=left][/align] 今天对FCKeditor好好的研究了一下！之前没有用过，遇到了一定的麻烦，现在拿出来和大家分享，希望对你也会有所帮助!
FCKeditor是个国外的多语言编辑器，你可以对其配置文件进行简单修改使之支持目前常用Web开发语言的应用，下面我就讲讲FCKeditor2.6.6版本的具体配置过程，有不足和出错的地方，欢迎指正，具体的FCK还请到官网去下载，我也是下载过来的。
1.把FCKeditor真个文件夹考入WebRoot下:
打开fckconfig.js找到FCKConfig.AutoDetectLanguage = true ;此句作用为自动检测语言，默认为true，即表示编辑器会根据系统语言自动检测加载相应的语言，我们将其改为false，不让其检测，然后 将FCKConfig.DefaultLanguage = 'en';改为简体中文"zh-cn"。
2.配置字体，因为此编辑器为外国人编写，所以默认不提供中文字体，我们为其加入，找到FCKConfig.FontNames（第142行）加入“宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;”其他字体可根据自己需要自行加入。
3.当然我们也可以自行定义配置文件，就不需要大幅改动fckconfig.js,我们在
在FCKeditor文件夹中建立myconfig.js文件，内容自定义：
// 1. 自定义 ToolbarSet
FCKConfig.ToolbarSets["simple"] = [
['Bold','Italic','Underline'],
['Link','Unlink'],
['Image','Smiley','SpecialChar'],
['FontName'],
['FontSize'],
['TextColor','BGColor'],
] ;
FCKConfig.ToolbarSets["bbs"] = [
['NewPage','RemoveFormat'],
['Bold','Italic','Underline'],
['Subscript','Superscript'],
['JustifyLeft','JustifyCenter','JustifyRight'],
['Link','Unlink'],
['Image','Smiley','SpecialChar'],
['Table'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['FontName'],
['FontSize'],
['TextColor','BGColor'],
['FitWindow']
] ;
FCKConfig.ToolbarSets["admin"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
// 是否开启简单功能与高级功能显示
if(typeof(FCKConfig.EnableAdvanceTable) == "undefined"){ // 在页面中调用fckeditor时指定的 EnableAdvanceTable 的值会先被调用。
FCKConfig.EnableAdvanceTable = false; // 默认为true
}
FCKConfig.AdvanceTableNum = 0;
FCKConfig.AdvanceTable = [1,3,7,8,9,12];
// 2. 添加中文字体
FCKConfig.FontNames ='宋体;黑体;幼圆;楷体_GB2312;仿宋_GB2312;Arial;Times New Roman;Verdana' ;
FCKConfig.FontSizes ='9/最小;12/较小;16/中等;20/较大;24/最大';
// 3. 修改 "回车" 和 "shift + 回车" 的样式
FCKConfig.EnterMode = 'br' ; // p | div | br
FCKConfig.ShiftEnterMode = 'p' ; // p | div | br
// 4. 更换表情图片
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/wangwang/' ; // 表情图片所在的文件夹
// 列出表情图片的文件名
FCKConfig.SmileyImages = ['0.gif','1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif','31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 668 ;
FCKConfig.SmileyWindowHeight = 480 ;
// 5. 设置允许上传的图片类型的扩展名列表
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|png|dmp)$" ; // empty for all
// 其它需要修改的配置 ...
FCKConfig.LinkDlgHideTarget = true; // false ;
FCKConfig.LinkDlgHideAdvanced = true; // false ;
FCKConfig.ImageDlgHideLink = true; // false ;
FCKConfig.ImageDlgHideAdvanced = true; // false
FCKConfig.AutoDetectPasteFromWord = false;
FCKConfig.LinkUpload = false;
4.将fckconfig.js中的改为FCKConfig.CustomConfigurationsPath = FCKConfig.EditorPath + "myconfig.js" ;这样就能引用我们自定义的配置文件了。
5.新建一个fckeditor.properties在项目的classpath下，配置为：
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
6.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>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
7.目前发现ie9下对fckeditor不兼容：
原因, IE9 开始不支持 JS 的这个写法了 var $=document.getElementById;
修改方法:见 fckeditor/editor/js/fckeditorcode_ie.js 的这个方法:FCKTools.RegisterDollarFunction
修改为:
FCKTools.RegisterDollarFunction=function(A){A.$=function(v){return A.document.getElementById(v);}};
8.jsp引用：
<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
<textarea id="_editor_textarea" style="width:90%;height:50px;" rows="3" cols="6" name="content"></textarea>
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'content' ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.Height = 400 ;
oFCKeditor.Width = 810 ;
oFCKeditor.ToolbarSet = "bbs";
oFCKeditor.ReplaceTextarea();
</script>
9.上传文件路径问题：
FCK默认文件上传路径为WebRoot下的userfiles文件夹下
那么我们自行定义路径的改造如下：
重写ConnectorServlet文件，我的重写如下：
package com.lenovo.platform.util;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.fckeditor.connector.Messages;
import net.fckeditor.handlers.CommandHandler;
import net.fckeditor.handlers.ConnectorHandler;
import net.fckeditor.handlers.ExtensionsHandler;
import net.fckeditor.handlers.RequestCycleHandler;
import net.fckeditor.handlers.ResourceTypeHandler;
import net.fckeditor.response.UploadResponse;
import net.fckeditor.response.XmlResponse;
import net.fckeditor.tool.Utils;
import net.fckeditor.tool.UtilsFile;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FilenameUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.lenovo.platform.util.file.SystemConfigure;
import com.lenovo.platform.util.utils.TimeUtil;
public class ConnectorServlet extends HttpServlet {
private static final long serialVersionUID = -5742008970929377161L;
private static final Logger logger = LoggerFactory.getLogger(ConnectorServlet.class);
/**
* Initialize the servlet: <code>mkdir</code> <DefaultUserFilesPath>
*/
public void init() throws ServletException, IllegalArgumentException {
String realDefaultUserFilesPath= SystemConfigure.getValue("hb.FCKImagePath");
File defaultUserFilesDir = new File(realDefaultUserFilesPath);
UtilsFile.checkDirAndCreate(defaultUserFilesDir);
logger.info("ConnectorServlet successfully initialized!");
}
/**
* Manage the <code>GET</code> requests (<code>GetFolders</code>,
* <code>GetFoldersAndFiles</code>, <code>CreateFolder</code>).<br/>
*
* The servlet accepts commands sent in the following format:<br/>
* <code>connector?Command=<CommandName>&Type=<ResourceType>&CurrentFolder=<FolderPath></code>
*
* It executes the commands and then returns the result to the client in XML
* format.
*
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
logger.debug("Entering ConnectorServlet#doGet");
response.setCharacterEncoding("UTF-8");
response.setContentType("application/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
String commandStr = request.getParameter("Command");
String typeStr = request.getParameter("Type");
String currentFolderStr = request.getParameter("CurrentFolder");
logger.debug("Parameter Command: {}", commandStr);
logger.debug("Parameter Type: {}", typeStr);
logger.debug("Parameter CurrentFolder: {}", currentFolderStr);
XmlResponse xr;
if (!RequestCycleHandler.isEnabledForFileBrowsing(request))
xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.NOT_AUTHORIZED_FOR_BROWSING);
else if (!CommandHandler.isValidForGet(commandStr))
xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_COMMAND);
else if (typeStr != null && !ResourceTypeHandler.isValid(typeStr))
xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_TYPE);
else if (!UtilsFile.isValidPath(currentFolderStr))
xr = new XmlResponse(XmlResponse.EN_ERROR, Messages.INVALID_CURRENT_FOLDER);
else {
CommandHandler command = CommandHandler.getCommand(commandStr);
ResourceTypeHandler resourceType = ResourceTypeHandler.getDefaultResourceType(typeStr);
String typePath = UtilsFile.constructServerSidePath(request, resourceType);
String typeDirPath = getServletContext().getRealPath(typePath);
File typeDir = new File(typeDirPath);
UtilsFile.checkDirAndCreate(typeDir);
File currentDir = new File(typeDir, currentFolderStr);
if (!currentDir.exists())
xr = new XmlResponse(XmlResponse.EN_INVALID_FOLDER_NAME);
else {
xr = new XmlResponse(command, resourceType, currentFolderStr, MyUtilsResponse
.constructResponseUrl(request, resourceType, currentFolderStr, true,
ConnectorHandler.isFullUrl()));
if (command.equals(CommandHandler.GET_FOLDERS))
xr.setFolders(currentDir);
else if (command.equals(CommandHandler.GET_FOLDERS_AND_FILES))
xr.setFoldersAndFiles(currentDir);
else if (command.equals(CommandHandler.CREATE_FOLDER)) {
String newFolderStr = UtilsFile.sanitizeFolderName(request
.getParameter("NewFolderName"));
logger.debug("Parameter NewFolderName: {}", newFolderStr);
File newFolder = new File(currentDir, newFolderStr);
int errorNumber = XmlResponse.EN_UKNOWN;
if (newFolder.exists())
errorNumber = XmlResponse.EN_ALREADY_EXISTS;
else {
try {
errorNumber = (newFolder.mkdir()) ? XmlResponse.EN_OK
: XmlResponse.EN_INVALID_FOLDER_NAME;
} catch (SecurityException e) {
errorNumber = XmlResponse.EN_SECURITY_ERROR;
}
}
xr.setError(errorNumber);
}
}
}
out.print(xr);
out.flush();
out.close();
logger.debug("Exiting ConnectorServlet#doGet");
}
/**
* Manage the <code>POST</code> requests (<code>FileUpload</code>).
*
* The servlet accepts commands sent in the following format:
* <code>connector?Command=<FileUpload>&Type=<ResourceType>&CurrentFolder=<FolderPath></code>
* with the file in the <code>POST</code> body.
* <br>
* It stores an uploaded file (renames a file if another exists with the
* same name) and then returns the JavaScript callback.
*/
@SuppressWarnings("unchecked")
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
logger.debug("Entering Connector#doPost");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
String commandStr = request.getParameter("Command");
String typeStr = request.getParameter("Type");
String currentFolderStr = request.getParameter("CurrentFolder");
String time="";
logger.debug("Parameter Command: {}", commandStr);
logger.debug("Parameter Type: {}", typeStr);
logger.debug("Parameter CurrentFolder: {}", currentFolderStr);
UploadResponse ur;
// if this is a QuickUpload request, 'commandStr' and 'currentFolderStr'
// are empty
if (Utils.isEmpty(commandStr) && Utils.isEmpty(currentFolderStr)) {
commandStr = "QuickUpload";
currentFolderStr = "/";
}
if (!RequestCycleHandler.isEnabledForFileUpload(request))
ur = new UploadResponse(UploadResponse.SC_SECURITY_ERROR, null, null,
Messages.NOT_AUTHORIZED_FOR_UPLOAD);
else if (!CommandHandler.isValidForPost(commandStr))
ur = new UploadResponse(UploadResponse.SC_ERROR, null, null, Messages.INVALID_COMMAND);
else if (typeStr != null && !ResourceTypeHandler.isValid(typeStr))
ur = new UploadResponse(UploadResponse.SC_ERROR, null, null, Messages.INVALID_TYPE);
else if (!UtilsFile.isValidPath(currentFolderStr))
ur = UploadResponse.UR_INVALID_CURRENT_FOLDER;
else {
ResourceTypeHandler resourceType = ResourceTypeHandler.getDefaultResourceType(typeStr);
String typeDirPath = SystemConfigure.getValue("hb.FCKImagePath");
typeDirPath=typeDirPath.replace('\\','/');
try {
time=TimeUtil.changeDate2StringYMD(new Date());
typeDirPath += "/" +time;
} catch (Exception e1) {
e1.printStackTrace();
}
File typeDir = new File(typeDirPath);
UtilsFile.checkDirAndCreate(typeDir);
File currentDir = new File(typeDir, currentFolderStr);
if (!currentDir.exists())
ur = UploadResponse.UR_INVALID_CURRENT_FOLDER;
else {
String newFilename = null;
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
try {
List<FileItem> items = upload.parseRequest(request);
// We upload only one file at the same time
FileItem uplFile = items.get(0);
String rawName = UtilsFile.sanitizeFileName(uplFile.getName());
String filename = FilenameUtils.getName(rawName);
String baseName = FilenameUtils.removeExtension(filename);
String extension = FilenameUtils.getExtension(filename);
if (!ExtensionsHandler.isAllowed(resourceType, extension))
ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
else {
// if(ifChinese(filename)){
filename = UUID.randomUUID().toString() +"."+ extension;
// }
// currentDir = TimeUtil.changeDate2StringYMD(new Date());
// construct an unique file name
File pathToSave = new File(currentDir, filename);
int counter = 1;
while (pathToSave.exists()) {
newFilename = baseName.concat("(").concat(String.valueOf(counter))
.concat(")").concat(".").concat(extension);
pathToSave = new File(currentDir, newFilename);
counter++;
}
if (Utils.isEmpty(newFilename))
ur = new UploadResponse(UploadResponse.SC_OK, MyUtilsResponse
.constructResponseUrl(request, resourceType, currentFolderStr,
true, ConnectorHandler.isFullUrl()).concat(filename));
else
ur = new UploadResponse(UploadResponse.SC_RENAMED,
MyUtilsResponse.constructResponseUrl(request, resourceType,
currentFolderStr, true, ConnectorHandler.isFullUrl())
.concat(newFilename), newFilename);
// secure image check
if (resourceType.equals(ResourceTypeHandler.IMAGE)
&& ConnectorHandler.isSecureImageUploads()) {
if (UtilsFile.isImage(uplFile.getInputStream()))
uplFile.write(pathToSave);
else {
uplFile.delete();
ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
}
} else
uplFile.write(pathToSave);
}
//保存的目录到
//SyncSaveServlet.saveFCK(filename,time);
// FtpUtil.upload(typeDirPath, filename, GetProperties.getValue("ftp.file.fck")+time+"/");
} catch (Exception e) {
ur = new UploadResponse(UploadResponse.SC_SECURITY_ERROR);
}
}
}
try {
out.print(ur);
} catch (Exception e) {
e.printStackTrace();
}
out.flush();
out.close();
logger.debug("Exiting Connector#doPost");
}
private boolean ifChinese(String fileName){
for(int i=0;i <fileName.length();i++)
{ if(fileName.substring(i,i+1).matches("[\\u4e00-\\u9fa5]+")){
return true;
}
}
return false;
}
}
类中涉及到的一些文件：
MyUtilsResponse 类
package com.lenovo.platform.util;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import net.fckeditor.handlers.ResourceTypeHandler;
import net.fckeditor.tool.UtilsResponse;
import com.lenovo.platform.util.file.SystemConfigure;
import com.lenovo.platform.util.utils.TimeUtil;
public class MyUtilsResponse extends UtilsResponse {
public static String constructResponseUrl(HttpServletRequest request, ResourceTypeHandler resourceType, String urlPath,
boolean prependContextPath, boolean fullUrl) {
StringBuffer sb = new StringBuffer();
try {
sb.append(SystemConfigure.getValue("hb.FCK.info") + "/" + TimeUtil.changeDate2StringYMD(new Date()) + "/");
} catch (Exception e) {
e.printStackTrace();
}
return sb.toString();
}
}
SystemConfigure 类
package com.lenovo.platform.util.file;
import java.util.Locale;
import java.util.ResourceBundle;
/**
*
* 获取属性文件的属性值
*
* @author
*
*/
public class SystemConfigure {
protected static Locale locale = Locale.getDefault();
protected static ResourceBundle rb = ResourceBundle.getBundle("systemConfigure" , locale);
/**
* 获取属性文件的键值
*/
public static String getValue(String key)
{
return rb.getString(key).trim();
}
}
systemConfigure配置文件：
hb.FCKImagePath=E\:\\images\\fck\\
hb.FCK.info=/fck
FCKImagePath为文件时间存储路径
info为虚拟路径
这还需要在tomcat下指定虚拟路径：
<Context path="/fck" docBase="E:\images\fck" reloadable="false" debug="0" privileged="true"/>
那么相应的web.xml也许做小许改动：
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
com.lenovo.platform.util.ConnectorServlet
</servlet-class>
<load-on-startup>10</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
10.到此FCK所遇到的问题应该全部解决，剩下的就是自行应用了，
附件中为FCK的源包和所需要的jar包
fckeditor使用心得
猜你喜欢
转载自qa7412007.iteye.com/blog/1734635
今日推荐
周排行