基本使用
1.首先登录官网下载文件包 如:FCKeditor_2.6.4.1.zip
2.解压后生成一个目录fckeditor将该目录拷贝到工程的根目录下
3.在页面中引用工具包,这里使用使用Javascript引用,还可以使用FCK的标签引用
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
4.定义一个文本编译域,并在窗体加载时加载事件:
<script type="text/javascript">
window.onload=function(){
var oFCKeditor = new FCKeditor( 'myData' ) ;
//编译器基本路径
oFCKeditor.BasePath = "/fckeditor/fckeditor/";
//高度
oFCKeditor.Width=600;
//宽度
oFCKeditor.Height=400;
//初始化内容
oFCKeditor.value="WRITE YOU MESSAGE HERE!";
oFCKeditor.ReplaceTextarea() ;
}
</script>
<textarea rows="10" cols="20" name="myData" id="myData">
</textarea>
一些高级配置内容
1.修改工具条的内容
在引用文件里有一个fckconfig.js文件,打开后找到
FCKConfig.ToolbarSets["Default"]的配置,引用默认使用的是Default
一共63个属性,分别对在页面中看到的功能,自己定制想要的功能即可。
2.修改增加可应用的字体
同样在fckconfig.js文件中找到
FCKConfig.FontNames属性,然后进行增加如:
FCKConfig.FontNames = '宋体;楷体;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
就增加了宋体和楷体两种样式
3.修改回车样式
同样在fckconfig.js文件中找到
FCKConfig.EnterMode = 'p' ; // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br
定义了回车和SHIFT+回车的样式,默认是P,后面列出了可以使用的值,改为BR即可
4.增加表情图片
同样在fckconfig.js文件中找到
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['paisini.JPG','regular_smile.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 210 ;
以上属性意思分别为,图片地址,图片,每行显示几个表情,表情窗口的宽度,高度
只要将图片复制到指定的文件内,然后在FCKConfig.SmileyImages内注册一下即可
注意:当我们添加的图片太多时,显示将出现不尽人意的地方,以下为如何显示滚动条
打开表情窗口看窗口属性可以得知,该窗口实际上是一个页面,该页面在
Fckeditor/ editor/ dialog/ fck_smiley.html ,找到文件做如下修改:
(1)在该页面加载时调用了一个函数
window.onload = function ()
{
// First of all, translate the dialog box texts
oEditor.FCKLanguageManager.TranslatePage(document) ;
//dialog.SetAutoSize( true ) ;
}
注释掉第二句内容
(2)在页面中有该属性
<body style="overflow: hidden">
Overflow的意思可以参考CSS手册,默认是不显示滚动条,可选值还有 auto 需要时显示;scroll 总是显示,设置为 auto 即可
5.去除浏览器服务器按钮功能
我们在点击图片时可以看到有一个浏览服务器的功能,我们现在要将其去除,同样在该页面看属性,找到对应的文件,这个窗口对应的文件为:
fckeditor/editor/dialog/fck_image.html
在页面里找到对应按钮,注释即可!另外,该窗口的预览中带有大量问题,如果想去除或更改以同样方式找到对应的页面,修改或删除即可,注意是在文本框内右键看属性
3.控制上传文件大小(目前不同版本实现可能不同,但机制是一样的)
和上传增加自动标识列一样,同样是在增加UUID的Post方法中进行判断文件大小,FCK并没有提供这种机制
在上传的对象中有判断文件大小的方法
//控制上传文件大小
if(uplFile.getSize() > 10 * 1024){
LocalizedMessages lm = LocalizedMessages.getInstance(ThreadLocalData
.getRequest());
return new UploadResponse(204, null, null, lm
.getInvalidCurrentFolderSpecified());
}
以上如果文件大于10K的话就不能通过,关于返回的对象,其实是供客户端调用的。
对于这个对象可以参考其他判断中返回的对象例如:
在上传一开始就有如下判断:
if (!RequestCycleHandler.isEnabledForFileUpload(request))
uploadResponse = UploadResponse.getFileUploadDisabledError();
// check parameters
else if (!Command.isValidForPost(context.getCommandStr()))
uploadResponse = UploadResponse.getInvalidCommandError();
else if (!ResourceType.isValidType(context.getTypeStr()))
uploadResponse = UploadResponse.getInvalidResourceTypeError();
else if (!UtilsFile.isValidPath(context.getCurrentFolderStr()))
uploadResponse = UploadResponse.getInvalidCurrentFolderError();
else {
就是如果条件不符合,则有一个UploadResponse对象被返回,到这个类的各个方法中看看,进入UploadResponse类可以看到他定义了许多供返回的常量
/** Creates a <code>INVALID RESOURCE TYPE</code> error. */
public static UploadResponse getInvalidResourceTypeError() {
LocalizedMessages lm = LocalizedMessages.getInstance(ThreadLocalData
.getRequest());
return new UploadResponse(EN_CUSTOM_ERROR, null, null, lm
.getInvalidResouceTypeSpecified());
}
通过他的一个方法可以看出,创建一个LocalizedMessages对象,然后返回一个带有标识的UploadResponse对象。所以在文件太大不符合要求时可以这样返回
LocalizedMessages lm = LocalizedMessages.getInstance(ThreadLocalData
.getRequest());
return new UploadResponse(204, null, null, lm
.getInvalidCurrentFolderSpecified());
这个204是自己定义的,但是不要和FCK定义的重复,即不要和UploadResponse类中定义的常量重复。
返回204 标识后客户端会接受,接收错误码的页面是 fck_image.html ,具体处理错误码的地方是该页面引入的一个JS文件,在fck_image.js中控制的找到function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )
方法,可以看到,这里接受的错误码!在这里增加自己的错误码,并给予提示。同时可以在这里修改文件错误时各种情况的提示信息
增加
case 204:
alert( "文件大小超出限制" ) ;
return ;
,这样就完成了,上传图片时不能大于10K的功能!注意的是,所有上传类型都不能大于10K,这样设置的话!
FCKEditor深度涉险
1.允许上传
(1) 下载官方的Java包,内含有四个JAR,其实需要的是五个,所以下载WAR包,解压,拷贝示例工程内的Jar包!
(2) 解压fckeditor-java-2.5-bin.zip,目录内有一个site是使用文档,打开文档找到Connector Servlet
(3)按照说明先走两步第一:配置Servlet,将提供的内容拷贝到Web.xml中即可!第二:在Src下配置一个Connector Servlet属性文件,文件内容直接拷贝!而后我们还要建立上传的文件夹,默认为:/fckeditor/userfiles/image/ ,建立此目录
到此,图片上传功能完成!
关于中文乱码问题,最好的解决方法是不是用中文,在存储图片时修改源代码,将文件名称进行修改,我们找到FCK的Servlet,不同版本的Servlet也不同。
本人使用fckeditor-java-2.5-bin.zip,Web中对应的Servlet为:
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
找到该源文件,附加上源码,源码可以从官方同一个位置下载,我们找不到关于文件上传有关的代码,那么我们使用 Ctrl 进入下一个流程类,我这里进入了 同包下的Dispatcher这是一个普通类,知道Post方法,可以看到上传的流程。流程中好几个变量都是引用的上传文件名,其实我们要修改的是 最初文件名 sanitizedFileName:我们使用UUID唯一标识来做:
我们不能修改源代码,其实我们可以这样做,建立一个和Dispatcher同名的包和类,然后将代码全部复制到该文件,删除Jar中的Dispatcher.class
修改sanitizedFileName为唯一标识:
//将文件重命名
sanitizedFileName = UUID.randomUUID().toString() +
sanitizedFileName.substring(sanitizedFileName.lastIndexOf("."));
注意加上文件的后缀名,不然保存失败!
这样就避免了中文乱码和文件同名覆盖的问题!
2.控制上传类型
这个功能是通过修改配置文件类型来实现的,详细参考可以看文档
核心包中也有相应配置,在package net.fckeditor.handlers 包中有一个配置文件
Default. Properties配置的前四项就是配置文件,图片,Flash,媒体的格式的配置,我们将其拷贝到我们的配置文件fckeditor.properties中,然后进行相应修改,这样服务器端的控制已经达到,还要修改客户端的配置文件,同样是在fckconfig.js 中,找到
FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif)$" ; // empty for all
FCKConfig.ImageUploadDeniedExtensions = "" ;
修改FCKConfig.ImageUploadAllowedExtensions属性,注意增加或修改,格式是以竖线分割的,修改发布后就会在服务器端和客户端产生类型控制!
对于Flash和媒体的配置都是一样的!
分享到:
相关推荐
FCKeditor是一款强大的开源文本编辑器,主要用于网页内容的创建和编辑。它的名称来源于"Freeware Complete Kit for Web Editors"的首字母缩写,旨在提供一个功能丰富的HTML编辑器,让非技术人员也能轻松编辑网页内容...
兼容目前的浏览器 里面包含FCKeditor编辑器和控件 一、集成方法 FCKeditor应用在ASP.NET上,需要两组文件,一组是FCKeditor本身,另一个是用于ASP.NET的FCKeditor控件(分为1.1和2.0两个版本,这里使用2.0版本)。 ...
在IT行业中,富文本编辑器(FCKeditor)是一款广泛使用的在线文本编辑工具,它允许用户在网页上创建、编辑和格式化文本,类似于桌面版的Microsoft Word。FCKeditor以其丰富的功能和易于集成的特点,深受开发者喜爱。...
**FCKeditor 2.6.6:一个经典且易集成的在线文本编辑器** FCKeditor是一款在Web开发中广泛使用的开源富文本编辑器,它允许用户在浏览器环境中进行类似Word的文本编辑操作。标题提到的是FCKeditor的2.6.6版本,这是...
Fckeditor是一款基于Web的富文本编辑器,它允许用户在网页上进行文本编辑,提供类似于Microsoft Word的功能。这款编辑器支持多种操作系统和浏览器,并且具备高度的可定制性,是开发人员集成到网站中用于创建、编辑...
**FCKeditor 2.6.8:一个强大的在线文本编辑器** FCKeditor是一款开源的、基于Web的富文本编辑器,它允许用户在网页上进行类似Word的文本编辑操作,支持创建和编辑含有图文混合的内容。这个版本是2.6.8,是一个稳定...
2.解压缩到你的站点根文件夹中名为FCKEDITOR的文件夹中(名称必须为FCKEDITOR,因为配置文件中已经使用此名称来标示出FCKEDITOR的位置) 3.现在,编辑器就可以使用了,如果想要查看演示,可以按下面方法访问: ...
FCKeditor是一款知名的开源富文本编辑器,它允许用户在网页上进行富文本内容的创建和编辑。在Java环境中使用FCKeditor时,通常需要一些特定的库文件,即jar包,以及可能的源代码来支持其功能。下面将详细阐述...
**FCKeditor:一款强大的网页文本编辑器** FCKeditor是一款经典的开源JavaScript富文本编辑器,主要用于网页内容的创建和编辑。它以其跨浏览器兼容性、丰富的功能集和易用性而闻名,允许用户在网页上实现类似Word的...
FCKeditor.Net_2.6.3 是一个强大的开源文本编辑器,专为.NET平台设计。这个全中文版本是针对原版FCKeditor进行了深度定制,将所有英文界面和提示翻译成了中文,使得国内用户在使用过程中能更加方便地理解和操作。 ...
将Fckeditor 里的保留文件拷贝到网站根目录文件夹里,即/ictech/下 /fcktemplates.xml /fckstyles.xml /fckeditor_php5.php /fckeditor_php4.php /fckeditor.php /fckeditor.js /fckconfig.js /editor/ fckeditor....
**FCKEditor**是一款历史悠久且功能强大的开源网页编辑器,它允许用户在网页上实现类似Word的文本编辑体验。FCKeditor的出现极大地提升了网站内容创作的便捷性,尤其适用于那些需要用户输入丰富格式文本的在线平台,...
**FCKeditor与fckeditor.properties详解** 在JSP(JavaServer Pages)开发环境中,富文本编辑器FCKeditor是一款广泛使用的开源工具,它允许开发者在网页上创建具有类似Word功能的文本编辑区域,用户可以方便地进行...
**FCKEditor与Java Web整合详解** FCKEditor是一款开源的富文本编辑器,它为用户提供了一种在Web页面上创建、编辑复杂HTML内容的便捷方式。FCKeditor以其直观的用户界面和丰富的功能,被广泛应用于各种Java Web应用...
**FCKeditor插件远程保存图片详解** FCKeditor是一款非常流行的开源富文本编辑器,广泛应用于网站内容管理系统(CMS)和其他需要用户编辑HTML内容的场景。它提供了丰富的功能,如文本格式化、图片上传、链接创建等...
这个是一个我修改过的fckeditor for jsp 的jar包的源代码,是fckeditor-2.3的,我修改了ConnectorServlet.java和SimpleUploaderServlet.java两个文件 我在这两个文件中都是加了一个静态变量encoding,private static...
这个压缩包“FCKeditor开发jar包及fckeditor文件夹”包含的是FCKeditor的开发相关资源,主要分为两部分:jar包和fckeditor文件夹。 1. **FCKeditor jar包**: 这个jar包通常包含了FCKeditor的Java版本,是将...