準備工作 先把這兩個東西加入項目,導相應的包,注意的是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攔截了!!
圖片暫時上不來 不知道爲什麼一直顯示圖片不正常