FCKEditor的使用01
2014-11-13 16:01
176 查看
1.首先登录官网下载文件包 如：FCKeditor_2.6.4.1.zip
2.解压后生成一个目录fckeditor将该目录拷贝到工程的根目录下
3.在页面中引用工具包，这里使用使用Javascript引用，还可以使用FCK的标签引用
4.定义一个文本编译域，并在窗体加载时加载事件：
1.修改工具条的内容
在引用文件里有一个fckconfig.js文件，打开后找到
FCKConfig.ToolbarSets["Default"]的配置，引用默认使用的是Default
一共63个属性，分别对在页面中看到的功能，自己定制想要的功能即可。
2.修改增加可应用的字体
同样在fckconfig.js文件中找到
FCKConfig.FontNames属性，然后进行增加如：
就增加了宋体和楷体两种样式
3.修改回车样式
同样在fckconfig.js文件中找到
定义了回车和SHIFT+回车的样式，默认是P，后面列出了可以使用的值，改为BR即可
4.增加表情图片
同样在fckconfig.js文件中找到
以上属性意思分别为，图片地址，图片，每行显示几个表情，表情窗口的宽度，高度
只要将图片复制到指定的文件内，然后在FCKConfig.SmileyImages内注册一下即可
注意：当我们添加的图片太多时，显示将出现不尽人意的地方，以下为如何显示滚动条
打开表情窗口看窗口属性可以得知，该窗口实际上是一个页面，该页面在
Fckeditor/ editor/ dialog/ fck_smiley.html ，找到文件做如下修改：
（1）在该页面加载时调用了一个函数
注释掉第二句内容
（2）在页面中有该属性
Overflow的意思可以参考CSS手册，默认是不显示滚动条，可选值还有 auto 需要时显示；scroll 总是显示，设置为 auto 即可
5.去除浏览器服务器按钮功能
我们在点击图片时可以看到有一个浏览服务器的功能，我们现在要将其去除，同样在该页面看属性，找到对应的文件，这个窗口对应的文件为：
fckeditor/editor/dialog/fck_image.html
在页面里找到对应按钮，注释即可!另外，该窗口的预览中带有大量问题，如果想去除或更改以同样方式找到对应的页面，修改或删除即可，注意是在文本框内右键看属性
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为：
找到该源文件，附加上源码，源码可以从官方同一个位置下载，我们找不到关于文件上传有关的代码，那么我们使用 Ctrl 进入下一个流程类，我这里进入了 同包下的Dispatcher这是一个普通类，知道Post方法，可以看到上传的流程。流程中好几个变量都是引用的上传文件名，其实我们要修改的是 最初文件名 sanitizedFileName：我们使用UUID唯一标识来做：
我们不能修改源代码，其实我们可以这样做，建立一个和Dispatcher同名的包和类，然后将代码全部复制到该文件，删除Jar中的Dispatcher.class
修改sanitizedFileName为唯一标识：
注意加上文件的后缀名，不然保存失败！
这样就避免了中文乱码和文件同名覆盖的问题！
2.控制上传类型
这个功能是通过修改配置文件类型来实现的，详细参考可以看文档
核心包中也有相应配置,在package net.fckeditor.handlers 包中有一个配置文件
Default. Properties配置的前四项就是配置文件，图片，Flash，媒体的格式的配置，我们将其拷贝到我们的配置文件fckeditor.properties中，然后进行相应修改，这样服务器端的控制已经达到，还要修改客户端的配置文件，同样是在fckconfig.js 中，找到
修改FCKConfig.ImageUploadAllowedExtensions属性，注意增加或修改，格式是以竖线分割的，修改发布后就会在服务器端和客户端产生类型控制！
对于Flash和媒体的配置都是一样的！
3.控制上传文件大小（目前不同版本实现可能不同，但机制是一样的）
和上传增加自动标识列一样，同样是在增加UUID的Post方法中进行判断文件大小，FCK并没有提供这种机制
在上传的对象中有判断文件大小的方法
以上如果文件大于10K的话就不能通过，关于返回的对象，其实是供客户端调用的。
对于这个对象可以参考其他判断中返回的对象例如：
在上传一开始就有如下判断：
就是如果条件不符合，则有一个UploadResponse对象被返回，到这个类的各个方法中看看，进入UploadResponse类可以看到他定义了许多供返回的常量
通过他的一个方法可以看出，创建一个LocalizedMessages对象，然后返回一个带有标识的UploadResponse对象。所以在文件太大不符合要求时可以这样返回
这个204是自己定义的，但是不要和FCK定义的重复，即不要和UploadResponse类中定义的常量重复。
返回204 标识后客户端会接受，接收错误码的页面是 fck_image.html ，具体处理错误码的地方是该页面引入的一个JS文件，在fck_image.js中控制的找到function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )
方法，可以看到，这里接受的错误码！在这里增加自己的错误码，并给予提示。同时可以在这里修改文件错误时各种情况的提示信息
增加
，这样就完成了，上传图片时不能大于10K的功能！注意的是，所有上传类型都不能大于10K，这样设置的话
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
在页面里找到对应按钮，注释即可!另外，该窗口的预览中带有大量问题，如果想去除或更改以同样方式找到对应的页面，修改或删除即可，注意是在文本框内右键看属性
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和媒体的配置都是一样的！
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在ASP.NET下的使用
- Firebird使用01
- 在Ruby on Rails中使用FCKeditor
- FCKeditor2.2无法使用上传功能的解决！
- FCKeditor 2.0 的设置.修改.使用
- FCKeditor 2.1.1使用部署技巧
- FCKeditor 2.0 的设置.修改.使用(转来的！)
- FCKeditor编辑器使用
- [导入]WYSIWYG Web Editor: FCKeditor 2.2 的设置.修改.使用 和 FreeTextBox的简介
- [分享]FCKEDITOR范例及中文使用说明
- FCKeditor 2.0 的设置.修改.使用
- FCKeditor的使用
- FCKEditor在DNN中的心得使用（更新于2006-10-10）
- 在线编辑器fckeditor的使用和配置
- 在JSP中使用FCKeditor编辑器
- FCKEditor的初步使用!
- FCKeditor 2.0 的设置.修改.使用
- 在ASP.Net中使用FCKeditor
- FCKeditor使用初步
- FCKeditor 2.0 的设置.修改.使用