fckeditor使用心得

阅读更多

[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配置：
 
      Connector 
         
          net.fckeditor.connector.ConnectorServlet 
       
      1 
     

     
      Connector 
       
        /fckeditor/editor/filemanager/connectors/* 
       
     

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引用：






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: mkdir
*/
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 GET requests (GetFolders,
* GetFoldersAndFiles, CreateFolder).

*
* The servlet accepts commands sent in the following format:

* connector?Command=&Type=&CurrentFolder=
*
* 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 POST requests (FileUpload).

*
* The servlet accepts commands sent in the following format:

* connector?Command=&Type=&CurrentFolder=
* with the file in the POST body.

*

* 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 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   {   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下指定虚拟路径：


那么相应的web.xml也许做小许改动：
 
Connector 
 
com.lenovo.platform.util.ConnectorServlet
 
10 
 

 
Connector 
 
/fckeditor/editor/filemanager/connectors/* 
 



10.到此FCK所遇到的问题应该全部解决，剩下的就是自行应用了，
附件中为FCK的源包和所需要的jar包

• FCKeditor_2.6.6.zip (1.5 MB)
• 下载次数: 33

• 所需jar包.rar (1.9 MB)
• 下载次数: 35