准备工作 先把这两个东西加入项目,导相应的包,注意的是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上传下载的功能的图片暂时上不来 不知道为什么一直显示图片不正常