ckeditor3.5.3+ckfinder for java 2.1.1，嵌入文本编辑器，实现上传文件
来源：互联网 发布：大嘴巴网络超市 编辑：程序博客网 时间：2024/05/20 05:59
准备工作 先把这两个东西加入项目，导相应的包，注意的是ckfinder的文件是官网上下载的ckfinder_java_2.1.1.jar解压后ckfinder/ckfinder.war(解压)/ckfinder这个文件夹 而不是直接解压出来见到的那个，是war的那个，这点搞了我半天。导的jar包路径： ckfinder_java_2.1.1\ckfinder\WEB-INF\lib；C:\Users\Administrator\Desktop\ckfinder_java_2.1.1\ckeditor\WEB-INF\lib
下面是需要显示的jsp关键代码：
<script type="text/javascript" src="user/ckeditor/ckeditor.js" ></script> <script type="text/javascript" src="user/ckfinder/ckfinder.js" ></script>//上面的代码在head里 下面的在body <textarea cols="80" id="content" name="content" rows="20">这里是默认值</textarea> <script type="text/javascript"> var editor=CKEDITOR.replace("content"); CKFinder.SetupCKEditor(editor,'ckfinder/'); </script>
注意上面的细节，要不你的结局将和我一样 因为双引号和单引号搞一晚上，第一个 replace方法里的参数的textarea里的name属性，双引号而后面的SetCKEditor这方法是用来设置ckfinder这文件夹处理上传这功能的，一个字母都不能错哦。
ckeditor这文件夹下的config.js是用来配置这编辑器的，代码如下：
CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';config.language = 'zh-cn'; //设置中文语言 config.uiColor = '#AADC6E'; //编辑器颜色 config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';config.toolbar_Full = [[ 'Source', '-', 'Preview', '-', 'Templates' ],[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-','Print','SpellChecker', 'Scayt' ],[ 'Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll','RemoveFormat' ],[ 'Form', 'Checkbox', 'Radio', 'TextField','Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ],'/',[ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript','Superscript' ],[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent','Blockquote', 'CreateDiv' ],[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],[ 'Link', 'Unlink', 'Anchor' ],[ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley','SpecialChar', 'PageBreak' ], '/',[ 'Styles', 'Format', 'Font', 'FontSize' ],[ 'TextColor', 'BGColor' ],[ 'Maximize', 'ShowBlocks', '-', 'About' ] ];config.toolbar_Basic = [ [ 'Bold', 'Italic', '-', 'NumberedList','BulletedList', '-', 'Link', 'Unlink', '-', 'About' ] ];config.width = 700;config.height = 300;config.filebrowserBrowseUrl = 'user/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹config.filebrowserImageBrowseUrl = 'user/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹config.filebrowserFlashBrowseUrl = 'user/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹config.filebrowserUploadUrl = 'user/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)config.filebrowserImageUploadUrl = 'user/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)config.filebrowserFlashUploadUrl = 'user/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)};
这里大家需要注意的是路径问题，尤其是最后那些url，注意的是单引号后没有/，因为在项目里，已经自动的加上了/，我见网上很多代码都是带/，经我测试都是404，我这里是把ckeditor，ckfinder这两个文件夹放在user文件夹下面，如果你直接放根路径，去掉user/即可，注意不要以/开始。
下面是web.xml,配置，这里为了方便，我把代码全放上了，里面配了自定义的拦截器，这个最后再说。
<servlet><servlet-name>ConnectorServlet</servlet-name><servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class><init-param><param-name>XMLConfig</param-name><param-value>/WEB-INF/ckfinder-config.xml</param-value></init-param><init-param><param-name>debug</param-name><param-value>false</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>ConnectorServlet</servlet-name><url-pattern> /user/ckfinder/core/connector/java/connector.java </url-pattern></servlet-mapping><filter><filter-name>struts2</filter-name><!--<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>--><filter-class>com.free.filter.FCKFilter</filter-class></filter><filter> <filter-name>FileUploadFilter</filter-name> <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class> <init-param> <param-name >sessionCookieName</param-name> <param-value >JSESSIONID</param-value > </init-param > <init-param > <param-name >sessionParameterName</param-name> <param-value >jsessionid</param-value> </init-param > </filter><filter-mapping><filter-name>struts2</filter-name><url-pattern>/*</url-pattern></filter-mapping><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener>FCKFilter这类是自定义的拦截器，上面的配置中还写明了从/WEB-INFO/ckfinder-config.xml中加载配置，这个名字可以随意起，只要系统能找到就行。ckfinder-config.xml：<config><enabled>true</enabled><baseDir></baseDir><baseURL>MyBlog/userfiles</baseURL><licenseKey></licenseKey><licenseName></licenseName><imgWidth>1600</imgWidth><imgHeight>1200</imgHeight><imgQuality>80</imgQuality><uriEncoding>UTF-8</uriEncoding><forceASCII>false</forceASCII><userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar><checkDoubleExtension>true</checkDoubleExtension><checkSizeAfterScaling>true</checkSizeAfterScaling><secureImageUploads>true</secureImageUploads><htmlExtensions>html,htm,xml,js</htmlExtensions><hideFolders><folder>.svn</folder><folder>CVS</folder></hideFolders><hideFiles><file>.*</file></hideFiles><defaultResourceTypes></defaultResourceTypes><types><type name="Files"><url>%BASE_URL%files/</url><directory>%BASE_DIR%files</directory><maxSize>10m</maxSize><allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip</allowedExtensions><deniedExtensions></deniedExtensions></type><type name="Images"><url>%BASE_URL%images/</url><directory>%BASE_DIR%images</directory><maxSize>2m</maxSize><allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions><deniedExtensions></deniedExtensions></type><type name="Flash"><url>%BASE_URL%flash/</url><directory>%BASE_DIR%flash</directory><maxSize>20m</maxSize><allowedExtensions>swf,flv</allowedExtensions><deniedExtensions></deniedExtensions></type></types><accessControls><accessControl><role>*</role><resourceType>*</resourceType><folder>/</folder><folderView>true</folderView><folderCreate>true</folderCreate><folderRename>false</folderRename><folderDelete>false</folderDelete><fileView>true</fileView><fileUpload>true</fileUpload><fileRename>false</fileRename><fileDelete>false</fileDelete></accessControl></accessControls><thumbs><enabled>true</enabled><url>%BASE_URL%_thumbs/</url><directory>%BASE_DIR%_thumbs</directory><directAccess>false</directAccess><maxHeight>100</maxHeight><maxWidth>100</maxWidth><quality>80</quality></thumbs><plugins><plugin><name>imageresize</name><class>com.ckfinder.connector.plugins.ImageResize</class><params><param name="smallThumb" value="90x90"></param><param name="mediumThumb" value="120x120"></param><param name="largeThumb" value="180x180"></param></params></plugin><plugin><name>fileeditor</name><class>com.ckfinder.connector.plugins.FileEditor</class><params></params></plugin></plugins><basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl></config>
这里最重要的一个参数就是baseURL,我设置的路径是‘/MyBlog/userfiles/’，这里需要注意的是必须加上完整项目名，不加项目名则无法预览，这也是我在这篇博文发表后第二天修改的原因，昨晚发表时没注意这问题，以为能上传服务器就ok了，当选择图片后则回到预览的画面，出现红色的叉号，总之，只要是ckeditor跟ckfinder无法上传的问题，基本上都是路径配置问题，好好看看路径，一般都能解决另外上那自定义的拦截器，继承struts2默认的拦截器，这样就在上面的web.xml中用这拦截器拦截请求，好处就是按照自己的需求拦截public class FCKFilter extends StrutsPrepareAndExecuteFilter {public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest) req;String URI = request.getRequestURI();String[] uriArray = URI.split("/ckfinder/core/connector/java/*/");int arrayLen = uriArray.length;if (arrayLen >= 2) {chain.doFilter(req, res);} else {super.doFilter(req, res, chain);}}}CKEditor是使用servlet来实现的,它也是通过拦截URL的机制进行工作的,而strutes2的拦截器咱一般配置<filter-name>struts2</filter-name><url-pattern>/*</url-pattern> struts2会拦截所有以"/"开头的URL.所以ckeditor的编辑器就被strut2拦截了这也是今天晚上困扰我的问题，一直点浏览服务器，虽然出现files，images，falsh这几个文件夹，但是点上传后出现红色的叹号，后来突然醒悟，原来是struts2拦截了！！所以重写拦截器的目的也就是不让struts2拦截ckfinder的servlet，所以要分割url字符串，假如是ckeditor，那么split（/ckfinder/..）后就能至少分2段，这样就直接转发，不拦截。ckfinder这插件是用来处理ckeditor上传下载的功能的图片暂时上不来 不知道为什么一直显示图片不正常
- ckeditor3.5.3+ckfinder for java 2.1.1，嵌入文本编辑器，实现上传文件
- 富文本编辑器，CKEditor与 CKFinder 整合并实现文件上传功能
- CKEditor 整合CKFinder实现文件上传及富文本操作
- CKEditor,CKFinder实现文件上传
- CKEditor3.0在asp.net环境下上传文件的配置，集成CKFinder
- CKEditor+CKFinder for java (上传文件、上传视频、添加行距编辑等等)
- CKEditor+CKFinder+JSP实现在线编辑器上传文件（包括图片、flash）
- Java版CKFinder上传文件重命名
- ckeditor 与 ckfinder基于Struts2 集成实现在线编辑以及文件上传(JAVA版)
- 1、使用富文本编辑器实现文件的上传和下载
- CkEditor文本编辑器配合ckfinder上传功能在.net中的使用步骤
- CKEditor与CKFinder整合并实现文件上传功能
- 使用CKeditor+CKfinder 实现文件上传，步骤！（一）
- CKEditor与CKFinder整合并实现文件上传功能
- java实现文本编辑器
- ckfinder上传文件时出错
- struts2中富文本编辑器使用ckeditor和ckfinder,实现富文本编辑
- CKEditor整合CKFinder.doc的使用 实现富文本编辑器的整合使用
- Linux下GeekOS开发流程及错误解决
- Android小经验---调试访问本地Apache方法
- 一种自动的将自定义类序列化为JSON的方法
- Linux修改时区和时间
- poj 2976 Dropping tests（01分数规划+二分）
- ckeditor3.5.3+ckfinder for java 2.1.1，嵌入文本编辑器，实现上传文件
- Android_framework层Service解析
- Lock和读写锁ReadWriteLock和缓存实例
- m个人的成绩放在score数组中，利用fun函数返回低于平均分得人数，降低于平均分得人成绩放在below中
- 网站发布的文章内容才是我们网站的核心
- 删除字符串中指定的字符形成字符串
- Linux的时间与时区
- 黑马程序员-常用SQL语句总结
- Android 2.3.3 SDK 源代码关联Eclipse
