`
hibernater
  • 浏览: 136181 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

struts里整合FCKeditor,包括视频上传和中文乱码的解决!

阅读更多

转自:http://www.javathinker.org/bbs/topic.jsp?db=2&topic=5189


(1) 先到http://www.fckeditor.net/download 下载FCKeditor_2.6rc.zip和FCKeditor-2.3.zip。将FCKeditor_2.6rc.zip解压缩,打开解压后的文件夹,将其中的fckeditor改名为FCKeditor整体复制到项目的WebRoot目录下。
然后将FCKeditor-2.3.zip压缩包中\web\WEB-INF\lib\目录下的两个jar文件拷到项目的\WEB-INF\lib\目录下,\src\com文件夹整体复制到项目中的src下。

(2)合并web.xml,打开原项目的web.xml把压缩包中\web\WEB-INF\web.xml中的以下内容复制到其中。

<!-- FCKeditor servlet -->
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<!—此处默认为/UserFiles/,可以修改,前面不需要写”/项目名” -->
<param-value>/项目中用于存放上传文件的文件夹/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<param-value>/项目中用于存放上传文件的文件夹/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>enabled</param-name>
<!—此处默认为false,表示是否开启上传,需要修改 -->
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFile</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFile</param-name> <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsImage</param-name>
<param-value>jpg|gif|jpeg|png|bmp</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsImage</param-name>
<param-value></param-value>
</init-param>
<init-param>
<param-name>AllowedExtensionsFlash</param-name>
<param-value>swf|fla</param-value>
</init-param>
<init-param>
<param-name>DeniedExtensionsFlash</param-name>
<param-value></param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!--以下servlet-mapping 添加/FCKeditor与压缩包中整体复制到项目的文件夹路径相对应-->
<servlet-mapping>
<servlet-name>Connector</servlet-name> <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
<!-- FCKeditor servlet -->

(3)删除无用文件,删除目录/FCKeditor/下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml,四个文件以外的所有文件。
删除目录/editor/_source, 删除/editor/filemanager/browser/default/connectors/下的所有文件,删除 /editor/filemanager/upload/下的所有文件,删除/editor/lang/下的除了 en.js, zh.js, zh-cn.js三个文件的所有文件。

(4)修改FCKeditor/fckconfig.js中的配置:
所有js配置文件最好保存成UTF-8格式,源代码要读取其中数据,
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替换成以下内容:

FCKConfig.LinkBrowserURL=FCKConfig.BasePath+"filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

FCKConfig.ImageBrowserURL=FCKConfig.BasePath+"filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;

FCKConfig.FlashBrowserURL=FCKConfig.BasePath+"filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

FCKConfig.LinkUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=File' ;

FCKConfig.FlashUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=Flash' ;

FCKConfig.ImageUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=Image' ;

FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;
即在编辑器域内可以使用Tab键。

如果你的编辑器还用在网站前台的话,比如说用于留言本或是日记回复时,那就不得不考虑安全了,
在前台千万不要使用Default的toolbar,要么自定义一下功能,要么就用系统已经定义好的Basic,
也就是基本的toolbar,找到:
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']
] ;
这是改过的Basic,把图像功能去掉,把添加链接功能去掉,因为图像和链接和flash和图像按钮添加功能都能让前台
页直接访问和上传文件, fckeditor还支持编辑域内的鼠标右键功能。

FCKConfig.ContextMenu= ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField', /*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;

这也是改过的把鼠标右键的“链接、图像,FLASH,图像按钮”功能都去掉。

找到: FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
加上几种我们常用的字体
FCKConfig.FontNames
= '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

以下是该文件的具体属性列表:
FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
FCKConfig.EditorAreaStyles = '' ; // 编辑区的样式表风格
FCKConfig.ToolbarComboPreviewCSS =''; //工具栏预览CSS
FCKConfig.DocType = '' ;//文档类型
FCKConfig.BaseHref = ''; // 相对链接的基地址
FCKConfig.FullPage = false ; //是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
FCKConfig.StartupShowBlocks = false ;//决定是否启用"显示模块"
FCKConfig.Debug = false ;//是否开启调试功能
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; //皮肤路径
FCKConfig.PreloadImages=... //预装入的图片
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //插件路径
FCKConfig.AutoDetectLanguage = true ; //是否自动检测语言
FCKConfig.DefaultLanguage = 'zh-cn' ; //默认语言
FCKConfig.ContentLangDirection = 'ltr' ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到左
FCKConfig.ProcessHTMLEntities = true ; //处理HTML实体
FCKConfig.IncludeLatinEntities = true ; //包括拉丁文
FCKConfig.IncludeGreekEntities = true ;//包括希腊文
FCKConfig.ProcessNumericEntities = false ;//处理数字实体
FCKConfig.AdditionalNumericEntities = '' ; //附加的数字实体
FCKConfig.FillEmptyBlocks = true ; //是否填充空块
FCKConfig.FormatSource = true ; //在切换到代码视图时是否自动格式化代码
FCKConfig.FormatOutput = true ; //当输出内容时是否自动格式化代码
FCKConfig.FormatIndentator = ' ' ; //当在源码格式下缩进代码使用的字符
FCKConfig.StartupFocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上
FCKConfig.ForcePasteAsPlainText = false ; //是否强制粘贴为纯文件内容
FCKConfig.AutoDetectPasteFromWord = true ; //是否自动探测从word粘贴文件,仅支持IE
FCKConfig.ShowDropDialog = true ;//是否显示下拉菜单
FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符号转换为XML实体
FCKConfig.TabSpaces = 0 ;//按下Tab键时光标跳格数,默认值为零为不跳格
FCKConfig.ShowBorders = true ;//合并边框
FCKConfig.SourcePopup = false ;//弹出
FCKConfig.ToolbarStartExpanded = true ;//启动fckeditor工具栏默认是否展开
FCKConfig.ToolbarCanCollapse = true ;//是否允许折叠或展开工具栏
FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值
FCKConfig.FloatingPanelsZIndex = 10000 ;//浮动面板索引
FCKConfig.HtmlEncodeOutput = false ;//是否将HTML编码输出
FCKConfig.TemplateReplaceAll = true ;//是否替换所有模板
FCKConfig.ToolbarLocation = 'In' ;//工具栏位置,
FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
FCKConfig.BaseHref = ''; // 相对链接的基地址
FCKConfig.Debug = true/false; // 是否开启调试功能,当调用FCKDebug.Output()时,会在调试窗中输出内容
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤
FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言
FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言
FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向,ltr左,rtr右
FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能,可以将空的块级元素用空格来替代
FCKConfig.FormatSource = true/false; // 切换到代码视图时,是否自动格式化代码
FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码
FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符
FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B,I,U标记
FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器
FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本
FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体
FCKConfig.TabSpaces = 0/1; // TAB是否有效
FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数
FCKConfig.ShowBorders = true/false; // 是否合并边框
FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时,工具栏是否展开,点“展开工具栏”时才出现
FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏
FCKConfig.ToolbarSets = object ; // 编辑器的工具栏,可以自行定义,删减,可参考已存在工具栏
FCKConfig.EnterMode = 'p'; // 编辑器中直接回车,在代码中生成,可选为p | div | br
FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车,在代码中生成,可选为p | div | br
FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容
FCKConfig.FontColors = ""; // 文字颜色列表
FCKConfig.FontNames = ""; // 字体列表
FCKConfig.FontSizes = ""; // 字号列表
FCKConfig.FontFormats = ""; // 文字格式列表
FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置
FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器
FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路径
FCKConfig.SmileyImages = ''; // 表情文件名称列表,具体参考默认设置
FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数
FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度,此窗口会因为表情文件的改变而作调整
FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度,此窗口会因为表情文件的改变而作调整
FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容



上传设置
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php</pre></font><hr></blockquote>
//第一个是文件浏览器使用的语言,第二个快速上传使用的语言,改成你需要的,JSP项目这里就不要改了
FCKConfig.LinkUploadAllowedExtensions = "" ; // empty for all
FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"
//这是两个允许和拒绝上传的文件类型列表
FCKConfig.ImageBrowser = false ;//是否在插入图片功能里面启用服务器文件浏览功能
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;
//Type=Image 表示文件类型是image这会使文件浏览器定位到文件上传路径/image/文件夹下面
FCKConfig.FlashBrowser = false ;是否在插入flash功能中启用服务器文件浏览功能
FCKConfig.LinkUpload = false ;是否启用插入链接的快速上传功能
FCKConfig.ImageUpload = false ;是否启用图片快速上传功能
FCKConfig.FlashUpload = false ;是否启用flash上传功能

(5) 调用FCKeditor
用Javascript脚本语言调用必须引用脚本文件 <script type="text/javascript" src="${Env.WEB_BASE_PATH}/FCKeditor/fckeditor.js"></script>

然后找到要显示编辑器的标签处进行修改,比如原先的一个struts的文本域为
<html:textarea property="content"></html:textarea>
那么现在就要在它后面加上以下这段javascript脚本。
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content') ; //content与textarea的property属性对应
oFCKeditor.BasePath = "${Env.WEB_BASE_PATH}/FCKeditor/" ;
//写明FCKeditor文件夹在项目中的路径
oFCKeditor.Width=450
oFCKeditor.Height = 500;
oFCKeditor.ToolbarSet = "Default" ;//用默认工具栏
oFCKeditor.ReplaceTextarea();
</script>

上面两处都用到了${Env.WEB_BASE_PATH},这是项目中设置的全局常量,在项目开发过程中一般设置成“/项目名”,而挂到正式服务器上时一般设置为空(“”)。

(6)增加视频上传的功能及其工具栏按钮
媒体插件下载地址:
http://www.webmb.com.cn/upload/media_plugin_for_FCKeditor_23_build_1054.rar
安装步骤一:  将 madmedia整个文件夹 拷贝至 editor/plugins/下。
安装步骤二:
修改fckconfig.js,在文件末尾增加如下一行代码,FCKConfig.Plugins.Add( 'madmedia', 'en,zh-cn' ) ;
安装步骤三:修改fckconfig.js,找到toolbar按钮设置的部分,将媒体按钮加入toolbar,例如,
原来是,
FCKConfig.ToolbarSets["Default"] = [
['Image','Flash']
]

改为,
FCKConfig.ToolbarSets["Default"] = [
['Image','Flash','MadMedia']
]

FCKConfig.ContextMenu= ['Generic','Link','Anchor','Image','Flash','Select','Textarea','Checkbox','Radio','TextField',
'HiddenField','ImageButton','Button','BulletedList','NumberedList','Table','Form']

中也可加入
FCKConfig.ContextMenu= ['Generic','Link','Anchor','Image','Flash','MadMedia','Select','Textarea','Checkbox','Radio',
'TextField','HiddenField','ImageButton','Button','BulletedList','NumberedList','Table','Form']

安装步骤四:修改插件中的/FCKeditor/editor/plugins/madmedia/mdia.js文件,把其中所有的字符串”Flash”用”Link”替换。

安装步骤五:为了解决上传中文文件文件名变为乱码的问题需要修改FCKeditor的源代码,在源码的 com.fredck.FCKeditor.uploader.SimleUploaderServlet类文件中搜索语句DiskFileUpload upload = new DiskFileUpload();再其后添加一句upload.setHeaderEncoding("UTF-8");编辑完成后把整个源代码的 com包重新打成一个.jar包代替原来的.jar包。

 

分享到:
评论

相关推荐

    Struts2与FCKeditor的整合.doc

    Struts2 和 FCKeditor 的整合是Web开发中一个常见的需求,特别是在需要提供富文本编辑器功能时。FCKeditor是一款强大的开源JavaScript文本编辑器,而Struts2是一个流行的Java Web应用框架。本文将详细讲解如何将...

    struts2,fckeditor冲突解决

    总之,解决Struts2和FCKeditor的图片上传冲突,关键在于正确配置Struts2的Action、启用文件上传支持、处理文件保存逻辑,并提供合适的反馈给FCKeditor。同时,确保在整个过程中考虑到安全性,避免潜在的风险。

    struts和fckeditor整合完整版

    Struts和FCKeditor是两种在Web开发中广泛使用的开源工具。Struts是基于MVC(Model-View-Controller)架构的Java Web框架,而FCKeditor则是一个强大的富文本编辑器,允许用户在Web页面上进行类似Word的文本编辑。 ...

    struts2+fckeditor

    在尝试将FCKeditor与Struts2整合时,最常见的问题之一是图片上传失败。这个问题通常由以下几个原因造成: 1. **Action配置**:首先,确保你的Struts2 Action配置正确。Action应该接收FCKeditor发送的文件,并将其...

    FCKeditor编辑器 中文乱码问题 彻底解决方案(提供附件)

    解决FCKeditor的中文乱码问题,通常需要综合以上几个方面进行排查和调整。附件中提供的文件可能是针对特定情况的解决方案,可能包括修改FCKeditor的源码、配置文件或者提供了一种特定环境下的修复脚本。使用前,你...

    FCKeditor解决了中文乱码,上传等问题

    总之,FCKeditor是一款强大且易用的富文本编辑器,它的中文乱码解决方案和完善的文件上传功能,使得它成为处理中文内容的理想选择。无论是个人项目还是企业应用,FCKeditor都能够提供高效、稳定的内容编辑体验。...

    FCKeditor上传图片中文乱码解决

    原有的jar包不支持中文乱码问题,经过优化测试,成功解决上传图片中文乱码问题

    FCKeditor视频上传插件

    综上所述,FCKeditor视频上传插件是一个集成了多种技术的解决方案,涵盖了文件上传、服务器处理、视频转码和用户交互等多个方面。通过这个插件,开发者可以为网站的富文本编辑功能添加强大的视频支持,使用户能够更...

    FCKEditor for ASP有详细的教程和乱码解决方法

    在ASP环境下集成FCKEditor,首先需要下载FCKeditor的ASP版本,解压后的文件夹中包含了所有必要的文件和资源。这些文件包括JavaScript库、CSS样式表、图片以及语言文件等。在ASP页面中引入FCKEditor,通常需要在页面...

    Fckeditor完美结合Struts2 教程

    在本文中,我们将深入探讨如何将富文本编辑器Fckeditor完美地整合到Struts2框架中,以便在Struts2项目中充分利用Fckeditor的图片上传和其他功能。Fckeditor是一款强大的在线文本编辑器,它提供了丰富的文本格式化...

    Fckeditor以及js_validation解决中文乱码问题

    3. **上传文件处理**:在使用FCKEditor上传包含中文名称的文件时,若处理不当也会导致乱码。 #### 三、解决中文乱码问题的具体步骤 ##### 1. FCKEditor程序瘦身 - **保留必要文件**:仅保留必要的文件和目录,如`...

    struts2+FCKeditor

    在Struts2中配置FCKeditor,首先需要在项目的类路径下添加FCKeditor的库文件,包括JavaScript文件和相关的CSS样式表。这些文件通常可以从FCKeditor的官方网站下载得到,包含fckeditor.js、fckconfig.js等核心文件。 ...

    fckeditor(java版-解决中文附件名称乱码问题)

    通过以上知识点的深入理解和应用,可以有效地解决“fckeditor(java版-解决中文附件名称乱码问题)”这个问题,确保用户能够正常上传并保存带有中文名称的附件,从而提高产品在中文环境下的可用性和用户体验。

    struts2+FCKeditor-2.3

    Struts2+FCKeditor-2.3 是一个集成解决方案,旨在为Java开发人员提供一个强大的文本编辑器,以便在Web应用程序中实现富文本输入。FCKeditor是一款开源的JavaScript组件,它允许用户在Web页面中编辑HTML内容,类似于...

    fckeditor2.6.4+fckeditor-java-2.4.1配置及中文乱码解决

    包括fckeditor2.6.4+fckeditor-java-2.4.1配置所需资源包及fckeditor-java-2.4.1源码和配置说明文档。 配置中解决了中文乱码,并为上传文件自动创建日期文件夹。

    兼容struts2的FCKEditor(插件).rar

    5. **文件上传**:FCKEditor支持文件上传功能,这需要在Struts2中配置文件上传拦截器,设置允许的最大文件大小和类型。同时,需要提供一个Action来接收并保存上传的文件。 6. **安全考虑**:整合过程中需要注意XSS...

    fckeditor2.3 中文乱码问题解决

    将此jar包直接放在 lib 下,一切就都ok了

    FCKeditor添加FLV视频和上传文件自动更名

    FCKeditor(jsp版本)目录文件,FCKeditor.jar包,增加FCKeditor添加FLV视频功能和FCKeditor上传文件自动更名功能 1.修正了上传中文文件乱码的问题,上传之后会重命名文件 2.修正了不能上传FLV视频的问题

Global site tag (gtag.js) - Google Analytics