以FCKeditor_2.6.3为例:
FCKeditor的主页:
FCKeditor.zip
客户端:
FCKeditor_2.6.3.zip
需要服务器端支持:文件上传
FCKeditor.Java:
fckeditor-java-2.4-bin.zip
源码:
fckeditor-java-2.4-src.zip
演示工厂:
fckeditor-java-demo-2.4.war
使用时直接放到(正在运行的)Tomacat的webapps目录下即可。
访问:http://localhost:8080/fckeditor-java-2.4/
demo:
E:/../FCKeditor_2.6.3\fckeditor\_samples\default.html
查看Demo源码时可以到:
工程里面的Jsp文件目录中查找相应的jsp文件。
首先,将FCKeditor_2.6.3解压后-->fckeditor-->拷到项目的web-Root目录下
-->安装fckeditor
调用方式:
1。通过Javascript调用
2. 在JSP中通过自定义标签调用
--->通过javascript调用:
demo:
E:/../FCKeditor_2.6.3\fckeditor\_samples\default.html
右键查看源文件;
使用步骤:
1.引入jar包:
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
2.
方法一:
创建并且输出 一个编辑器:
<script type="text/javascript" src="fckeditor/fckeditor.js">
var oFCKeditor = new FCKeditor(‘FCKeditor1‘);
oFCKeditor .BasePath ="/fckeditor/";
oFCKeditor.Create();
</script>
方法二:
用编辑器替换Textarea元素
<script type="text/javascript" src="fckeditor/fckeditor.js">
window.onload=function(){
var oFCKeditor = new FCKeditor(‘MyTextarea‘);
oFCKeditor .BasePath ="/fckeditor/";
oFCKeditor.ReplaceTextarea();
}
</script>
IN<BODY> add the below code to replace an existing TEXTAREA in the page;
<textarea id="MyTextarea" > This is <b>the</b> initial value.</textarea>
方法三:
暂时没写》
3.
实例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head >
<title >test1.html</title >
<meta http-equiv= "keywords" content="keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content="this is my page" >
<meta http-equiv= "content-type" content="text/html; charset=UTF-8" >
<!--<link rel=" stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="fckeditor/fckeditor.js" ></script>
</head >
<body >
<script type="text/javascript">
var oFckeditor = new FCKeditor(‘FCKeditor1‘ );
oFckeditor .BasePath= "/FCKEditTest/fckeditor/" ;
oFckeditor.Create ();
</script>
</body >
</html>
FCKEditTest是项目名称
实例2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head >
<title >test2.html</title >
<meta http-equiv= "keywords" content="keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content="this is my page" >
<meta http-equiv= "content-type" content="text/html; charset=UTF-8" >
<!--<link rel=" stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="fckeditor/fckeditor.js" ></script>
<script type="text/javascript">
window.onload =function(){
var oFCKeditor = new FCKeditor( ‘MyTextarea‘ );
oFCKeditor.BasePath ="fckeditor/";
oFCKeditor.ReplaceTextarea ();
}
</script>
</head >
<body >
<textarea rows="4" cols="60" name="MyTextarea" >this is value</ textarea>
</body >
</html>
4.总结:
1.BasePath要正确的设置
2.BasePath一定要以/结尾
】
--->在JSP中通过自定义标签调用
Congfiguration File 对所有的fckeditor有效
主jar包:
fackconfig.js 配置
一般我们使用额外的配置文件覆盖。
新建Myconfig.js配置文件
在fckconfig.js的
FCKEditTest:当前站点的位置
启用Myconfig.js配置文件
FCKConfig.CustomConfigurationsPath = ‘/FCKEditTest/MyConfig.js‘ ;
设置fckconfig.js中
FCKConfig .AutoDetectLanguage =true ;(会自动选用语言)
Myconfig.js中设置(会覆盖fckeditor.js中的该配置)
FCKConfig .AutoDetectLanguage =false ;
fckeditor 默认语言(英文)
FCKConfig.DefaultLanguage = ‘en‘ ;
fckeditor 默认语言(法文)
FCKConfig .DefaultLanguage =‘fr‘ ;
在页面的调用代码中对FCKeditor的实例进行配置
:仅仅在当前的实例中生效
<script type="text/javascript" >
var oFckeditor = new FCKeditor(‘FCKeditor1‘ );
oFckeditor .BasePath= "/FCKEditTest/fckeditor/" ;
oFckeditor.Config[ "CustomConfigurationsPath" ]="/FCKEditTest/MyConfig.js" ;
oFckeditor.Create ();
</script>
小结:
IE中Ctrl+F5 火狐中Shift+Ctrl+R
一般使用Fckeditor时需要修改一些配置:
1.自定义ToolbarSet(工具集),去掉一些功能
2.加上几种常用的字体(加上中文字体,宋体。)
3. 修改“回车”和“shift+回车”的换行行为
(默认回车隔行换,shift+回车才是换行)
4.修改编辑区的样式文件
5.更换表情图片
实例:
实现方法:
1.去掉一些功能:
config.js配置文件中默认有2中工具集:
FCKConfig.ToolbarSets[ "Default"] = [
[‘Source‘, ‘DocProps‘,‘-‘ ,‘Save‘, ‘NewPage‘,‘Preview‘ ,‘-‘, ‘Templates‘],
[‘Cut‘, ‘Copy‘,‘Paste‘ ,‘PasteText‘, ‘PasteWord‘,‘-‘ ,‘Print‘, ‘SpellCheck‘],
[‘Undo‘, ‘Redo‘,‘-‘ ,‘Find‘, ‘Replace‘,‘-‘ ,‘SelectAll‘, ‘RemoveFormat‘],
[‘Form‘, ‘Checkbox‘,‘Radio‘ ,‘TextField‘, ‘Textarea‘,‘Select‘ ,‘Button‘, ‘ImageButton‘,‘HiddenField‘ ],
‘/‘,
[‘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‘] // No comma for the last row.
] ;
FCKConfig.ToolbarSets[ "Basic"] = [
[‘Bold‘, ‘Italic‘,‘-‘ ,‘OrderedList‘, ‘UnorderedList‘,‘-‘ ,‘Link‘, ‘Unlink‘,‘-‘ ,‘About‘]
] ;
可参考文档区别各个功能:
添加字体:MyConfig.js
FCKConfig.FontNames = ‘宋体;楷体_GB2312;黑体;隶书;Times New Roman;Arial‘ ;
修改键位:
FCKConfig.EnterMode = ‘br‘ ; // p | div | br
FCKConfig .ShiftEnterMode = ‘p‘ ; // p | div | br
表情图片:
//表情图片所在路径是文件夹
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‘] ;
FCKConfig.SmileyColumns = 8 ;//每行显示的表情数目
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;
图片框设置:
fckeditor-》》editor-》》dialog-- 》 --》//dialog.SetAutoSize( true ) ; //显示表情图片根据图片的大小修改当前窗口的大小
显示滚动条:
fckeditor-》》editor-》》dialog-- 》 --》body overflow:auto;
/*
是否启用自己配置的MyConfig配置文件
*/
FCKConfig.CustomConfigurationsPath =FCKConfig. EditorPath + ‘MyConfig.js‘ ;
文件上传:
xml文件中配置:
<!-- ~~~~~~~~~~~~ FCKeditor 有关配置 ~~~~~~~~~~~~~~~~~~ -->
<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 >
<!-- ~~~~~~~~~~~~~~ FCKeditor 有关配置结束 ~~~~~~~~~~~~~~~~~ -->
项目文件src下创建
fckeditor.properties:
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
解决图片上传中文乱码问题:
1.post方式提交服务器,提交表单时按照页面编码对其内容进行编码
2.服务器端没有用正确的编码解码出错
分析:fckeditor--》editor--》filemanager--》browser--》default--》frmupload.html
查看该文件的:判断是否是
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
引用中文名的图片不能正常显示问题:
1. 配置解码方式: 修改URIEncoding
可以对Tomacat服务器中的server.xml的
<Connector port ="8080" protcol="HTTP/1.1"
connectionTimeout="2000"
redirectPort="8443"
URIEncoding="UTF-8"
/>
但是不推荐你使用,因为使用这种方式可能会导致网页中文参数解析问题。
2.避免出现引用中文名字图片的情况
修改上传文件的ConnectorServlet.java
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" );
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 = null;
if ("File" .equals(typeStr)) {
// 文件所存放的路径为 ${application.path}/WEB-INF/userfiles/
typeDirPath = getServletContext().getRealPath("WEB-INF/userfiles/" );
}
else {
String typePath = UtilsFile.constructServerSidePath(request, resourceType);
typeDirPath = getServletContext().getRealPath(typePath);
}
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 (uplFile.getSize() > 1024 * 1024 * 3) {
// 传递一个自定义的错误码
ur = new UploadResponse(204);
}
// 如果不存在以上情况, 则 保存文件
else {
// construct an unique file name
// 使用 UUID 做为文件名, 并放到按照日期生成的文件夹中
filename = UUID.randomUUID().toString() + "." + extension;
filename = makeFileName(currentDir .getPath(), filename);
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 , UtilsResponse
. constructResponseUrl(request, resourceType, currentFolderStr,
true, ConnectorHandler.isFullUrl()).concat(filename));
else
ur = new UploadResponse(UploadResponse.SC_RENAMED ,
UtilsResponse. 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);
}
} catch (Exception e) {
ur = new UploadResponse(UploadResponse.SC_SECURITY_ERROR );
}
}
}
out.print(ur);
out.flush();
out.close();
logger.debug("Exiting Connector#doPost");
}
public static String makeFileName(String basePath, String filename) {
String subPath = sdf.format(new Date());
File dir = new File(basePath + "/" + subPath);
// 如果目录不存在, 就递归的创建, 已存在则不会重新创建
if (!dir.exists()) {
if (!dir.mkdirs()) {
throw new IllegalStateException("创建目录失败:" + dir.getPath());
}
}
String uuid = UUID.randomUUID().toString();
String extension = FilenameUtils.getExtension(filename);
return subPath + "/" + uuid + "." + extension;
}
配置允许上传的文件类型:
Connector 连接器的配置:
方式1:
配置允许上传的文件扩展名的列表
方式2:
配置禁止上传的文件扩展名的列表
默认使用第一种:
提供了4中文件类型所以有:
默认的配置文件在,fckeditor-java-core-2.4.jar 核心包中:
net.fckeditor.handlers (handlers操作者)-->default.properties 配置文件
通过在我们自己的fakeditor.properties中覆盖相应的属性:
修改允许上传文件的大小:
自定义错误:查看已经使用的错误ma:
fckeditor--> editor --> dialog --> fck_imgage --> fck_image.js
function OnUploadCompleted( errorNumber , fileUrl, fileName, customMsg )
{
// Remove animation
window.parent.Throbber .Hide () ;
GetE( ‘divUpload‘ ).style .display = ‘‘ ;
switch ( errorNumber )
{
case 0 : // No errors
alert ( ‘Your file has been successfully uploaded‘ ) ;
break ;
case 1 : // Custom error
alert ( customMsg ) ;
return ;
case 101 : // Custom warning
alert ( customMsg ) ;
break ;
case 201 :
alert ( ‘A file with the same name is already available. The uploaded file has been renamed to "‘ + fileName + ‘"‘ ) ;
break ;
case 202 :
alert ( ‘Invalid file type‘ ) ;
return ;
case 203 :
alert ( "Security error. You probably don‘t have enough permissions to upload. Please check your server." ) ;
return ;
case 204 ://自定义的错误回调
alert ( "文件大小超出上限." ) ;
return ;
case 500 :
alert ( ‘The connector is disabled‘ ) ;
break ;
default :
alert ( ‘Error on file upload. Error number: ‘ + errorNumber ) ;
return ;
}
sActualBrowser = ‘‘ ;
SetUrl( fileUrl ) ;
GetE(‘frmUpload‘ ).reset () ;
}
查找出已经使用的
ConnectorSeervlet.java 中配置
// 如果文件大小超出限制
else if (uplFile.getSize() > 1024 * 1024 * 3) {
// 传递一个自定义的错误码
ur = new UploadResponse(204);//引用自定义错误!
}