| 目錄 8. 配置CKFinder 10. 更安全的使用CKFinder |
1. 下載CKEditor相關的安裝文件
- CKEditor: 在 http://ckeditor.com/download 頁面左側，可以下載到各種版本的CKEditor，包括完整版full、標准版standard、基礎版basic等。在頁面右側上方，還有可定制的下載，可以選擇Toolbar類型、插件、語言等。這里我們選擇4.1版本的Full版本，下載后得到CKEditor_4.1_full.zip 。
- CKEditor for java: 在http://ckeditor.com/download 頁面右側下部，可以下載到用於服務器端的工具，記得選擇for java版本。這里選擇3.6.4版本。但是下載下來卻是 ckeditor-java-core-3.5.3.jar。不知道為什么。
- CKFinder: 在 http://cksource.com/ckfinder/trial 頁面，可以下載到各種版本的CKFinder。仍然選擇java版。這里我們下載的是2.3.1版本，下載后得到CKFinder_java_2.3.1.zip。
2. 安裝CKEditor和CKFinder
- 解壓CKEditor_4.1_full.zip，把解壓得到的目錄 ckeditor 完全復制到網站根目錄下，也就是和WEB-INF同級。可以給這個目錄加上版本號，即ckeditor4.1。
- 把 ckeditor4.1/samples 完全刪掉，把 ckeditor4.1/lang 里面除了en.js和zh-cn.js之外的文件刪掉，把 ckeditor4.1 下的README.md, CHANGES.md刪掉。
- 把 ckeditor-java-core-3.5.3.jar 放到yourapp/WEB-INF/lib下
- 解壓CKFinder_java_2.3.1.zip，得到ckfinder目錄。將 ckfinder/CKFinderJava/ckfinder 目錄完全復制到網站根目錄下，也就是和WEB-INF同級。可以給這個目錄加上版本號，即ckfinder2.3.1。
- 把 ckfinder2.3.1/_samples完全刪掉，把 ckfinder2.3.1/lang 下除了en.js和zh-cn.js之外的文件刪掉，把 ckfinder2.3.1 下的changelog.txt，install.txt，license.txt，translations.txt刪掉。
- 把 ckfinder/CKFinderJava/WEB-INF/lib 下所有的jar包復制到yourapp/WEB-INF/lib下。
- 把 ckfinder/CKFinderJava/WEB-INF/config.xml復制到yourapp/WEB-INF下，並改名為ckfinder.xml。
3. 在網頁里使用CKEditor
Step1：找到需要放置CKEditor編輯器的頁面，引入CKEditor的js文件（${contextPath}是JSTL寫法，請改成你自己的路徑寫法，絕對路徑或者相對路徑）
<script type="text/javascript" src="${contextPath}/ckeditor4.1/ckeditor.js"></script>
Step2：在需要提交的form里，寫一個<textarea>
<form id="detailForm" method="post"> <textarea id="content" name="content"></textarea> <input type="button" value="保存" id="save" onclick="save()" /> </form>
Step3：創建CKEditor實例
<script type="text/javascript"> var editor = null; window.onload = function(){ editor = CKEDITOR.replace('content'); //參數‘content’是textarea元素的name屬性值，而非id屬性值 } </script>
注意上面代碼中editor=CKEDITOR.repalce()必須寫在window.onload事件里，或者寫在textarea元素后面，以免出現content不存在的錯誤。上述代碼並不是創建CKEditor實例的唯一方法，大家可以自行查閱資料。
Step4：在頁面js中為CKEditor編輯器設置/獲取值
editor.setData('這里是需要傳遞給CKEditor編輯器實例的值');
editor.getData();
注意，上面代碼中用到了一個變量editor，就是Step3中定義的那個editor。這也就是為什么Step3里面要單獨寫var editor = null這句代碼。當然，在<textarea></textarea>中直接設置值也可以，但是那只能在CKEDITOR.replace()之前起作用。
Step5：在后台java代碼中獲取CKEditor編輯器的值
<script type="text/javascript"> function save(){ editor.updateElement(); //非常重要的一句代碼 //前台驗證工作 //提交到后台 } </script>
因為CKEditor編輯器取代了原來我們寫的textarea元素，所以我們在編輯器里寫的內容，其實都不在textarea中，因此，為了能在后台通過textarea獲得值，必須用editor.updateElement()來更新textarea元素。這樣，在后台java代碼中就可以用request.getParameter('content');或者其他代碼得到編輯器的內容了，否則得到的很可能不是編輯器里的內容。
4. CKEditor的三種配置方式
方式一：修改ckeditor4.1/config.js文件
CKEDITOR.editorConfig = function( config ) { config.language = 'zh-cn'; config.uiColor = '#AADC6E'; };
方式二：復制ckeditor4.1/config.js，仍然放在ckeditor4.1目錄下，但是改名為myconfig.js，並在這個文件中修改配置。但是要在創建編輯器實例時指明配置文件路徑：
<script type="text/javascript">
var editor = null;
window.onload = function() {
editor = CKEDITOR.replace( 'content', {
customConfig:'${contextPath}/ckeditor4.1/myconfig.js'
});
};
</script>
方式三：在創建編輯器實例時指定配置
<script type="text/javascript">
var editor = null;
window.onload = function() {
editor = CKEDITOR.replace( 'content',
uiColor: '#9AB8F3',
language:'zh-cn'
});
};
</script>
使用第二種或者第三種方式的好處就在於，當你更新CKEditor版本時，不至於因為直接復制了新的config.js而覆蓋掉個性配置。
5. CKEditor的一些配置選項
完整的CKEditor的配置選項在 這里。下面是一些常用的配置。
- language，defaultLanguage，contentLanguage, uiColor
- autoGrow_maxHeight, autoGrow_minHeight, resize_maxHeight, resize_minHeight, resize_maxWidth, resize_minWidth
- toolbarCanCollapse, toolbarGroups
- forcePasteAsPlainText, pasteFromWordKeepsStructure, pasteFromWordRemoveFontStyles, pasteFromWordRemoveStyles
- font_names, fontSize_sizes
6. 關於CKEditor編輯器里面回車的問題
在CKEditor編輯器里面敲回車，默認是加一個<p></p>元素，而且在<p>之前和</p>之后會加換行。這就造成一個問題，保存的數據最后可能會出現“\t\n”。當我們使用editor.setData(......)時，實際上變成了
editor.setData(......
);
因為數據本身帶有一個\t\n，使得js代碼換行了，從而頁面出錯。可能還有其他方法解決這個問題，但是我采用的是禁止在回車變<p></p>時在后面添加換行。其方法是：
<script type="text/javascript">
var editor = null;
window.onload = function() {
editor = CKEDITOR.replace( 'content', {
customConfig:'${contextPath}/ckeditor4.1/myconfig.js',
on: {
instanceReady: function( ev ) {
this.dataProcessor.writer.setRules( 'p', {
indent: false,
breakBeforeOpen: false, //<p>之前不加換行
breakAfterOpen: false, //<p>之后不加換行
breakBeforeClose: false, //</p>之前不加換行
breakAfterClose: false //</p>之后不加換行7
});
}
}
});
};
</script>
關於這部分內容，更多內容參看 http://docs.ckeditor.com/#!/guide/dev_output_format
7. 將CKFinder整合進CKEditor
沒有CKFinder，CKEditor作為一個編輯器，也是可以正常使用的，但是無法在編輯器里瀏覽服務器上的用戶上傳文件。所以要整合CKFinder。
Step1：在頁面中引入CKFinder的js文件
<script type="text/javascript" src="${contextPath}/ckfinder2.3.1/ckfinder.js"></script>
Step2：創建CKFinder實例
<script type="text/javascript">
var editor = null;
window.onload = function() {
editor = CKEDITOR.replace( 'content', {
customConfig:'${contextPath}/ckeditor4.1/jwc_config.js'
});
CKFinder.setupCKEditor( editor, '${contextPath}/ckfinder2.3.1/' );
};
</script>
上面標紅的代碼，第一個參數是CKEditor實例，第二個參數是ckfinder的目錄(最好寫絕對路徑)，注意最后要帶斜杠'/'。
Step3：在CKEditor里配置通過哪個頁面或者程序來瀏覽和上傳文件
找到你的項目里配置CKEditor的位置(參看本文CKEditor的三種配置方式部分)，配置以下內容：
CKEDITOR.editorConfig = function( config ) {
//其他一些配置 filebrowserBrowseUrl = '/ckfinder2.3.1/ckfinder.html'; filebrowserImageBrowseUrl = '/ckfinder2.3.1/ckfinder.html?type=Images'; filebrowserFlashBrowseUrl = '/ckfinder2.3.1/ckfinder.html?type=Flash'; filebrowserUploadUrl = '/ckfinder2.3.1/core/connector/java/connector.java?command=QuickUpload&type=Files'; filebrowserImageUploadUrl = '/ckfinder2.3.1/core/connector/java/connector.java?command=QuickUpload&type=Images'; filebrowserFlashUploadUrl = '/ckfinder2.3.1/core/connector/java/connector.java?command=QuickUpload&type=Flash'; };
上面的六行代碼，指定了通過ckfinder2.3.1/ckfinder.html來瀏覽圖片或者其他文件，通過/ckfinder2.3.1/core/connector/java/connector.java來上傳文件。
8. 配置CKFinder
找到yourapp/WEB-INF/ckfinder.xml，編輯其中的內容。下面簡要介紹一下每一項的含義，其他未介紹的內容請參照ckfinder.xml本身的注釋以及 這里。
- enabled：true表示開啟ckfinder功能。默認是false。
- baseDir：上傳文件存放的路徑，這里必須寫從物理地址的全路徑，比如C:\myapp\uploadfiles\。不能寫相對路徑，而且最后一定要加斜杠“/”。這一項可以不配置，留空的話，系統會自動根據baseURL去找到baseDir。但是建議還是配置上比較好。
- baseURL：上傳文件存放的URL，這里可以寫一個相對路徑或者一個完整的URL，比如"http://www.example.com/uploadfiles/" 或者 "/uploadfiles/"。注意，一定要在最后加一個斜杠“/”。更多解釋參看這里。
- types：指定上傳文件的類型。它的子元素是<type name=""></type>，其中的name要和上面CKEditor里配置的路徑的type一致。比如上面配置了filebrowserImageBrowseUrl = 'ckfinder2.3.1/ckfinder.html?type=Images'，那么就要配一個<type name="Images"></type>。在<type></type>元素里，可以配置該類型文件存放的子目錄(放在baseDir下)、子URL、文件最大字節數、允許上傳的文件擴展名、禁止上傳的文件擴展名。
- disallowUnsafeCharacters：設置為false。如果設置為true，在創建文件夾或者上傳文件時，名字里不能包含不安全的字符。這只在IIS里生效。
- checkDoubleExtension：檢查多級擴展名，或許你禁止用戶上傳php文件，允許用戶上傳rar文件。如果此項設置為false，文件foo.php.rar就會上傳到服務器，這不安全。因此此項設置為true。
- secureImageUploads：設置此項為true，可以檢查文件到底是不是圖片，很有可能有人把一個可執行文件加了后綴變成了.jpg，但實際上它不是一個圖片文件。
9. 在項目里配置CKFinder的servlet
找到yourapp/WEB-INF/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.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> /ckfinder2.3.1/core/connector/java/connector.java </url-pattern> </servlet-mapping>
上面配置里第一個init-param是指定CKFinder的配置文件位置。也就是上面第8部分提到的那個配置文件。
10. 更安全地使用CKFinder
目前來說，CKFinder能夠正常地使用了。但是，即便沒有你的項目的管理權限，在瀏覽器中輸入yoursite/ckfinder2.3.1/ckfinder.html，也一樣能看到你的服務器上存放的那些文件，他們甚至可以上傳和刪除文件。有兩個地方可以加強CKFinder的安全性。
在yourapp/WEB-INF/ckfinder.xml里配置訪問權限
<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar> <accessControls> <accessControl> <role>admin</role> <resourceType>*</resourceType> <folder>/</folder> <folderView>true</folderView> <folderCreate>true</folderCreate> <folderRename>true</folderRename> <folderDelete>false</folderDelete> <fileView>true</fileView> <fileUpload>true</fileUpload> <fileRename>true</fileRename> <fileDelete>false</fileDelete> </accessControl> </accessControls>
然后在java代碼中合適的位置，比如login()方法里，添加以下代碼
request.getSession().setAttribute("CKFinder_UserRole", "admin");
系統會在訪問yoursite/ckfinder2.3.1/ckfinder.html時（包括點擊下圖的“瀏覽服務器”按鈕），檢查CKFinder_UserRole的值是什么，它具有的權限是什么。如果一個人沒有登錄系統，而是直接訪問yoursite/ckfinder2.3.1/ckfinder.html，那么系統就會檢查到CKFinder_UserRole是null，他就看不到服務器上的文件。
自寫代碼檢查用戶是否有權限使用CKFinder
在yourapp/WEB-INF/web.xml里，修改關於ckfinder的配置，增加一段代碼：
<servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class> <init-param> <param-name>configuration</param-name> <param-value>mypackage.CKFinderConfiguration</param-value> </init-param> <init-param> <param-name>XMLConfig</param-name> <param-value>/WEB-INF/ckfinder.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> /ckfinder2.3.1/core/connector/java/connector.java </url-pattern> </servlet-mapping>
在包路徑mypackage下創建一個類CKFinderConfiguration(包路徑和類名按照自己的項目代碼組織情況來取名)，代碼如下：
import com.ckfinder.connector.configuration.Configuration;
public class CKFinderConfiguration extends Configuration { public CKFinderConfiguration(ServletConfig servletConfig) { super(servletConfig); } @Override protected Configuration createConfigurationInstance() { return new CKFinderConfiguration(this.servletConf); } @Override public boolean checkAuthentication(final HttpServletRequest request){ String userid = request.getSession().getAttribute("userid"); boolean logined = !userid.equals(""); return logined; } }
關鍵在於checkAuthentication()方法。可以在checkAuthentication()方法里編寫關於用戶認證的一些判斷，比如用戶是否登錄系統，用戶是否有權限管理上傳文件。如果符合條件，就返回ture，否則返回false。
兩種方法都可以讓ckfinder更安全，當然同時使用會更好。但是注意兩者區別，后者只能在比較粗的粒度進行控制。