CKFounder配置，使用

最新推荐文章于 2024-09-26 17:08:53 发布

dianxiaonao6457

最新推荐文章于 2024-09-26 17:08:53 发布

阅读量100

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/ClodThunder/p/4230942.html

版权

以FCKeditor_2.6.3为例：

FCKeditor的主页：

http://www.fckeditor.net

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包：

方法一：

创建并且输出一个编辑器：

var oFCKeditor = new FCKeditor('FCKeditor1');

oFCKeditor .BasePath ="/fckeditor/";

oFCKeditor.Create();

</script>

方法二：

用编辑器替换Textarea元素

window.οnlοad=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>

方法三：

暂时没写》

实例：

<! 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" >

< 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" >

< 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文件中配置：

< 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 >

项目文件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);//引用自定义错误！

}

转载于:https://www.cnblogs.com/ClodThunder/p/4230942.html

dianxiaonao6457

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫