FCKeditor - Fckeditor使用说明含文件上传功能

本文详细介绍FCKeditor富文本编辑器的集成步骤与配置方法,包括下载安装、导入资源文件、自定义工具栏及文件上传配置等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大家知道FCKeditor是一款强大的富文本框控件,可能很多人还不知道如何把她加入到项目中,或者知道但是已经忘记了,没关系,我们在这学习学习,复习复习。

[color=red][b]1、下载fckeditor[/b][/color]
地址:http://ckeditor.com/

[color=red][b]2、导入jar包和文件[/b][/color]
fckeditor-java-core-2.6.jar
imageinfo-1.9.jar
fckeditor下的js、html等文件,可以删除所有以"_"开头的文件夹

[color=red][b]3、导入标签和使用标签[/b][/color]

<%@ taglib uri="http://java.fckeditor.net" prefix="fck" %>
<fck:editor instanceName="movInfo.info"></fck:editor>
<fck:editor inputName="movInfo.info" instanceName="movInfomation" toolbarSet="Basic"></fck:editor>


[color=red][b]4、自定义工具栏[/b][/color]
配置fckconfig.js

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']
] ;

[color=red]说明:[/color]

instanceName 就是相当去控件的name
toolbarSet 就是设置你需要使用的功能样式,在上面定义的,当然你也可以自己增加新的
<fck:editor instanceName="movInfo.info" toolbarSet="Basic"></fck:editor>


[color=red][b]5、配置文件上传(与Struts2共存)[/b][/color]
由于大部分情况下我们在配置Struts2的过滤器的时候都是用*,所以这边我要绕过她,在这里写一个过滤器先。

package com.main.movie.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;

public class FckUploadFilter implements Filter {
private String DispatcherUrl;
public void destroy() {

}

public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest httprequest = (HttpServletRequest) request;
//其实就是根据传的参数来判断在做什么
if (httprequest.getParameter("Type") != null && httprequest.getParameter("Type").equals("Image")) {
//跳转到fck用的页面,不执行后面的过滤器
httprequest.getRequestDispatcher(DispatcherUrl).forward(request, response);
} else {
//否则才继续执行过滤器,所以在配置web.xml的时候要把该过滤器放在struts2的前面
chain.doFilter(request, response);
}
}

public void init(FilterConfig filterConfig) throws ServletException {
DispatcherUrl = filterConfig.getInitParameter("DispatcherUrl");
}

}

配置struts.xml,加入下面的代码片段

<constant name="struts.multipart.saveDir" value="/tmp"></constant>


[color=red][b]6、配置web.xml[/b][/color]
[color=red][b]注意FCK的过滤器一定要配置在Struts2过滤器的前面[/b][/color]

<!-- FckUploadFilter -->
<filter>
<filter-name>FckUploadFilter</filter-name>
<filter-class>com.main.movie.filter.FckUploadFilter</filter-class>
<init-param>
<param-name>DispatcherUrl</param-name>
<param-value>/fckeditor/editor/filemanager/connectors/</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>FckUploadFilter</filter-name>
<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</filter-mapping>

<!-- Fckeditor -->
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>
</servlet-mapping>


[color=red][b]7、配置fckeditor.properties(就创建这个文件然后把下面的代码复制进去就行了)[/b][/color]

# default allowed extensions settings
connector.resourceType.file.extensions.allowed = 7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip
connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png
connector.resourceType.flash.extensions.allowed = swf|fla
connector.resourceType.media.extensions.allowed = aiff|asf|avi|bmp|fla|flv|gif|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|png|qt|ram|rm|rmi|rmvb|swf|tif|tiff|wav|wma|wmv

# default resource type paths
connector.resourceType.file.path = /file
connector.resourceType.image.path = /image
connector.resourceType.flash.path = /flash
connector.resourceType.media.path = /media

# Due to security issues with Apache modules, it is recommended to leave this
# setting enabled.
connector.forceSingleExtension = true

# base URL path for the userfiles
connector.userFilesPath = /fckupload

# base system path on the backend for the userfiles
connector.userFilesAbsolutePath = /fckupload

# Instructs the Connector to check, if the uploaded image is really one
connector.secureImageUploads = true

# directory of the editor relative to the context root
fckeditor.basePath = /fckeditor

# default height of the editor
fckeditor.height = 200

# default toolbar set of the editor
fckeditor.toolbarSet = Default

# default width of the editor
fckeditor.width = 100%

# default implementations
connector.impl = net.fckeditor.connector.impl.ContextConnector
connector.userActionImpl = net.fckeditor.requestcycle.impl.EnabledUserAction
connector.userPathBuilderImpl = net.fckeditor.requestcycle.impl.ContextPathBuilder
localization.localeResolverImpl = net.fckeditor.localization.impl.AcceptLanguageHeaderResolver
最近做了一个文章管理的系统,用到在线编辑器,修改了一下现在能实现音频,视频,图片,附件,Flash等文件的上传。费了好大的功夫。。 FCKeditor应用在ASP.NET上,需要两组文件,一组是FCKeditor本身,另一个是用于ASP.NETFCKeditor控件(分为1.1和2.0两个版本,这里使用2.0版本)。 1.FCKeditor加入到项目中 解压FCKeditor编辑器,得到文件夹fckeditor,复制此文件夹到Web应用的项目下(也可以是子孙目录下)。 解压FCKeditor控件,在其子目录bin/Release/2.0下有一个程序集。在Web应用的项目中引用该程序集。 2. 在页面中使用FCKeditor 有两种方式。 (1)手工编码 在页面中加入ASP.NET指令: 然后在需要的地方加入FCKeditor控件: (2)集成到Visual Studio工具箱 打开一ASP.NET页面,展开Toolbox,打开右键菜单,选择“Choose Items ...”,在出现的“Choose Toolbox Items”会话框的“.NET Framework Components”选项卡中选择“Browse”,找到并选中FCKeditor程序集,打开后回到“Choose Toolbox Items”窗口,点击“OK”,完成控件导入。 这时,在Toolbox的General分类下出现了一个名为FCKeditor的控件,可以像使用Visual Studio内置控件一样使用它。 3. 配置FCKeditor编辑器路径 在页面中,使用的是FCKeditor控件,该控件需要知道FCKeditor编辑器文件组的路径。有两种配置方法。 (1)配置web.config 在appSettings配置节中加入 使用这种配置方法后,对于项目中任何一个页面中用到的FCKeditor控件,都不用再配置其BasePath属性。 (2)直接对用到的FCKeditor控件进行配置 在页面代码中设置FCKeditor的属性BasePath为FCKeditor编辑器文件组的路径,或者在Page_Init事件处理器中设置其BasePath的值。 4. 配置FCKeditor编辑器文件上传路径 在web.config的appSettings配置节中加入 或者 这样,就完成了FCKeditor向ASP.NET页面的集成工作。 二、配置FCKeditor 按照FCKeditor的默认配置,可以完成一些常用的HTML可视化编辑工作,但在实际应用中,还需要对其做进一步的配置。FCKeditor控件的可配置属性不多,且配置后只能作用于一个单一实例。实际上,需要对FCKeditor编辑器文件组中的通用配置文件/fckconfig.js和ASP.NET专用文件上传管理代码文件/editor/filemanager/connectors/aspx/config.ascx进行配置。 1. 配置控件语言 FCKeditor是自动探测浏览器所使用的语言编码的,其默认语言是英文。修改配置行"FCKConfig.DefaultLanguage = 'en';"为'zh-cn',采用中文为默认语言。 2. 配置控件应用技术 FCKeditor默认是用于php技术的。修改配置行"var _FileBrowserLanguage = 'php';"和"var _
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值