|
最近在做一個(gè)新聞發(fā)布平臺(tái)，放棄了很早的FCKEditor，使用CKEditor和CKFinder，盡管免費(fèi)的CKFinder是Demo版本，但是功能完整，而且用戶都是比較集中精神發(fā)新聞的人，不會(huì)在意這個(gè)。按照官網(wǎng)的document一步一步配置，雖然并不難，但是有些東西特別分散，還是全英文的，所以我就整理了一下安裝過程和配置，以及需要注意的一些問題。希望對(duì)大家有所幫助。
1. 下載CKEditor相關(guān)的安裝文件
2. 安裝CKEditor和CKFinder
3. 在網(wǎng)頁里使用CKEditorStep1：找到需要放置CKEditor編輯器的頁面，引入CKEditor的js文件（${contextPath}是JSTL寫法，請(qǐng)改成你自己的路徑寫法，絕對(duì)路徑或者相對(duì)路徑） <script type="text/javascript" src="${contextPath}/ckeditor4.1/ckeditor.js"></script> Step2：在需要提交的form里，寫一個(gè)<textarea> <form id="detailForm" method="post"> <textarea id="content" name="content"></textarea> <input type="button" value="保存" id="save" onclick="save()" /> </form> Step3：創(chuàng)建CKEditor實(shí)例 <script type="text/javascript"> var editor = null; window.onload = function(){ editor = CKEDITOR.replace('content'); //參數(shù)‘content’是textarea元素的name屬性值，而非id屬性值 } </script> 注意上面代碼中editor=CKEDITOR.repalce()必須寫在window.onload事件里，或者寫在textarea元素后面，以免出現(xiàn)content不存在的錯(cuò)誤。上述代碼并不是創(chuàng)建CKEditor實(shí)例的唯一方法，大家可以自行查閱資料。 Step4：在頁面js中為CKEditor編輯器設(shè)置/獲取值 editor.setData('這里是需要傳遞給CKEditor編輯器實(shí)例的值');
editor.getData();
注意，上面代碼中用到了一個(gè)變量editor，就是Step3中定義的那個(gè)editor。這也就是為什么Step3里面要單獨(dú)寫var editor = null這句代碼。當(dāng)然，在<textarea></textarea>中直接設(shè)置值也可以，但是那只能在CKEDITOR.replace()之前起作用。 Step5：在后臺(tái)java代碼中獲取CKEditor編輯器的值  <script type="text/javascript"> function save(){ editor.updateElement(); //非常重要的一句代碼 //前臺(tái)驗(yàn)證工作 //提交到后臺(tái) } </script> 因?yàn)镃KEditor編輯器取代了原來我們寫的textarea元素，所以我們?cè)诰庉嬈骼飳懙膬?nèi)容，其實(shí)都不在textarea中，因此，為了能在后臺(tái)通過textarea獲得值，必須用editor.updateElement()來更新textarea元素。這樣，在后臺(tái)java代碼中就可以用request.getParameter('content');或者其他代碼得到編輯器的內(nèi)容了，否則得到的很可能不是編輯器里的內(nèi)容。 4. CKEditor的三種配置方式方式一：修改ckeditor4.1/config.js文件 CKEDITOR.editorConfig = function( config ) { config.language = 'zh-cn'; config.uiColor = '#AADC6E'; }; 方式二：復(fù)制ckeditor4.1/config.js，仍然放在ckeditor4.1目錄下，但是改名為myconfig.js，并在這個(gè)文件中修改配置。但是要在創(chuàng)建編輯器實(shí)例時(shí)指明配置文件路徑： <script type="text/javascript">
var editor = null;
window.onload = function() {
editor = CKEDITOR.replace( 'content', {
customConfig:'${contextPath}/ckeditor4.1/myconfig.js'
});
};
方式三：在創(chuàng)建編輯器實(shí)例時(shí)指定配置 <script type="text/javascript">
var editor = null;
window.onload = function() {
editor = CKEDITOR.replace( 'content',
uiColor: '#9AB8F3',
language:'zh-cn'
});
};
</script>
使用第二種或者第三種方式的好處就在于，當(dāng)你更新CKEditor版本時(shí)，不至于因?yàn)橹苯訌?fù)制了新的config.js而覆蓋掉個(gè)性配置。 5. CKEditor的一些配置選項(xiàng)完整的CKEditor的配置選項(xiàng)在 這里。下面是一些常用的配置。
6. 關(guān)于CKEditor編輯器里面回車的問題在CKEditor編輯器里面敲回車，默認(rèn)是加一個(gè)<p></p>元素，而且在<p>之前和</p>之后會(huì)加換行。這就造成一個(gè)問題，保存的數(shù)據(jù)最后可能會(huì)出現(xiàn)“\t\n”。當(dāng)我們使用editor.setData(......)時(shí)，實(shí)際上變成了 editor.setData(......
);
因?yàn)閿?shù)據(jù)本身帶有一個(gè)\t\n，使得js代碼換行了，從而頁面出錯(cuò)。可能還有其他方法解決這個(gè)問題，但是我采用的是禁止在回車變<p></p>時(shí)在后面添加換行。其方法是： <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>
關(guān)于這部分內(nèi)容，更多內(nèi)容參看 http://docs./#!/guide/dev_output_format 7. 將CKFinder整合進(jìn)CKEditor沒有CKFinder，CKEditor作為一個(gè)編輯器，也是可以正常使用的，但是無法在編輯器里瀏覽服務(wù)器上的用戶上傳文件。所以要整合CKFinder。 Step1：在頁面中引入CKFinder的js文件 <script type="text/javascript" src="${contextPath}/ckfinder2.3.1/ckfinder.js"></script> Step2：創(chuàng)建CKFinder實(shí)例 <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>
 上面標(biāo)紅的代碼，第一個(gè)參數(shù)是CKEditor實(shí)例，第二個(gè)參數(shù)是ckfinder的目錄(最好寫絕對(duì)路徑)，注意最后要帶斜杠'/'。 Step3：在CKEditor里配置通過哪個(gè)頁面或者程序來瀏覽和上傳文件 找到你的項(xiàng)目里配置CKEditor的位置(參看本文CKEditor的三種配置方式部分)，配置以下內(nèi)容： CKEDITOR.editorConfig = function( config ) { 上面的六行代碼，指定了通過ckfinder2.3.1/ckfinder.html來瀏覽圖片或者其他文件，通過/ckfinder2.3.1/core/connector/java/connector.java來上傳文件。 8. 配置CKFinder找到y(tǒng)ourapp/WEB-INF/ckfinder.xml，編輯其中的內(nèi)容。下面簡(jiǎn)要介紹一下每一項(xiàng)的含義，其他未介紹的內(nèi)容請(qǐng)參照ckfinder.xml本身的注釋以及 這里。
9. 在項(xiàng)目里配置CKFinder的servlet找到y(tǒng)ourapp/WEB-INF/web.xml，添加以下內(nèi)容： <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> 上面配置里第一個(gè)init-param是指定CKFinder的配置文件位置。也就是上面第8部分提到的那個(gè)配置文件。 10. 更安全地使用CKFinder目前來說，CKFinder能夠正常地使用了。但是，即便沒有你的項(xiàng)目的管理權(quán)限，在瀏覽器中輸入yoursite/ckfinder2.3.1/ckfinder.html，也一樣能看到你的服務(wù)器上存放的那些文件，他們甚至可以上傳和刪除文件。有兩個(gè)地方可以加強(qiáng)CKFinder的安全性。 在yourapp/WEB-INF/ckfinder.xml里配置訪問權(quán)限<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");
系統(tǒng)會(huì)在訪問yoursite/ckfinder2.3.1/ckfinder.html時(shí)（包括點(diǎn)擊下圖的“瀏覽服務(wù)器”按鈕），檢查CKFinder_UserRole的值是什么，它具有的權(quán)限是什么。如果一個(gè)人沒有登錄系統(tǒng)，而是直接訪問yoursite/ckfinder2.3.1/ckfinder.html，那么系統(tǒng)就會(huì)檢查到CKFinder_UserRole是null，他就看不到服務(wù)器上的文件。
自寫代碼檢查用戶是否有權(quán)限使用CKFinder在yourapp/WEB-INF/web.xml里，修改關(guān)于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下創(chuàng)建一個(gè)類CKFinderConfiguration(包路徑和類名按照自己的項(xiàng)目代碼組織情況來取名)，代碼如下： import com.ckfinder.connector.configuration.Configuration; 關(guān)鍵在于checkAuthentication()方法?？梢栽赾heckAuthentication()方法里編寫關(guān)于用戶認(rèn)證的一些判斷，比如用戶是否登錄系統(tǒng)，用戶是否有權(quán)限管理上傳文件。如果符合條件，就返回ture，否則返回false。 兩種方法都可以讓ckfinder更安全，當(dāng)然同時(shí)使用會(huì)更好。但是注意兩者區(qū)別，后者只能在比較粗的粒度進(jìn)行控制。 |
|
|
