1. 程式人生 > >fckeditor2.6使用心得以及相關異常

fckeditor2.6使用心得以及相關異常

本文的內容大綱是: 
1. 在web中配置應用Fck; 
2. 用Fck自帶Api做非空驗證; 
3. 修改檔案上傳的儲存路徑; 
4. 對檔案上傳做大小控制; 

一. 配置和應用
去官網上下載fckeditor-java-demo-2.6.rar,裡面有我們需要的所有js和用於檔案上傳的java包。 
(1)新建一工程,在webroot下建一資料夾起名為js,把fckeditor-java-demo-2.6.rar解壓,把得到的fckeditor資料夾給扔到這個資料夾下面,並且可以把其中所有以“_”開頭的資料夾給刪掉。 
(2)把需要的第三方包從fckeditor-java-demo中複製到新建的工程中,這裡要注意的是若工程是以前遺留下來的,那麼有的包可能會有重複,記得留下最新版本的包,否則有可能在使用時會出現異常,比如我之前有遇到過,工程裡有commons-fileupload-1.1.jar和commons-io-1.2.jar都比fckeditor下使用的包要舊,於是在瀏覽檔案伺服器時就報了java.lang.NoSuchFieldError: DIRECTORY的錯誤,只要刪掉舊包就可以了。 

(3)在web.xml中,加入如下配置 
Xml程式碼  收藏程式碼
  1. <servlet>  
  2.     <servlet-name>ConnectorServlet</servlet-name>  
  3.     <servlet-class>  
  4.         net.fckeditor.connector.ConnectorServlet  
  5.     </servlet-class>  
  6.     <load-on-startup>1</load-on-startup>  
  7. </servlet>  
  8. <servlet-mapping
    >  
  9.     <servlet-name>ConnectorServlet</servlet-name>  
  10.     <url-pattern>/js/fckeditor/editor/filemanager/connectors/*</url-pattern>  
  11. </servlet-mapping>  

這裡要注意的是url-pattern引數,由於我們是把fckeditor放在了js資料夾下,所以在這個引數中就要加上/js。 
(4)在src下新建一個fckeditor.properties檔案,檔案中的做如下配置 
Java程式碼  收藏程式碼
  1. connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction   

這個檔案用可以覆蓋fck中的一些預設配置,稍後我們還會講到其他的配置,這裡我們先看connector.userActionImpl,它有三個值: 
UserActionImpl已過期,一般不用; 
EnabledUserAction允許檔案上傳瀏覽操作; 
DisabledUserAction不允許檔案上傳瀏覽操作; 
它們都繼承於一個UserAction介面,並且實現也非常簡單,都只有一行程式碼,返回true或false。 

(5)在頁面中我們使用fck標籤來顯示fckeditor編輯器 
Java程式碼  收藏程式碼
  1. <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>  
  2. <FCK:editor instanceName="EditorDefault" inputName="content" basePath="/js/fckeditor" />    

FCK標籤有幾個引數,這裡說明下: 
height,width代表高和寬; 
value可以賦初始值; 
basePath是fckeditor的相對路徑,若是直接放在webroot下可以不用填; 
toolbarSet編輯器使用的工具集名稱,可以可以去fckconfig.js檔案定義一個新的FCKConfig.ToolbarSets,然後在頁面中使用; 
inputName是服務端取值時使用的引數名; 
instanceName代表編輯器的唯一名稱(相當於ID); 

二. Fck自帶API
fck還有些有用的api,比如要在提交表單的時候驗證內容非空,用一般的document.getElementById("").value==null來判斷是不行的,應該用 
Javascript程式碼  收藏程式碼
  1. var content = FCKeditorAPI.GetInstance("EditorDefault");  
  2. if(content.GetXHTML() == ''){  
  3.     alert("廣告內容不能為空!");  
  4.     content.Focus();  
  5.     return false;  
  6. }  

EditorDefault是剛才Fck標籤裡的instanceName引數的值,還要注意Focus()函式也是fck自帶的函式,一般的focus()不能用在這裡。 

三. 檔案上傳儲存路徑修改
按以上配置就可以把fck很好的給跑起來了,包括圖片Flash檔案的上傳瀏覽等操作。上傳的檔案將預設的保持在工程fckeditor資料夾的userfiles子資料夾下,有的人可能不喜歡這個路徑,甚至不喜歡把上傳檔案的目錄放在工程下,那我們就可以使用絕對路徑,也很簡單,按如下配置: 
(1)在fckeditor.properties檔案中,新增 
Java程式碼  收藏程式碼
  1. connector.userFilesAbsolutePath = E:/image  
  2. connector.userFilesPath = http://localhost:8080/image  
  3. connector.userPathBuilderImpl = net.fckeditor.requestcycle.impl.ServerRootPathBuilder  
  4. connector.impl = net.fckeditor.connector.impl.LocalConnector  

第一個引數很好理解,是儲存上傳檔案的絕對路徑,第二個引數是在web上使用檔案時的虛擬目錄。後兩個引數是指定介面的實現類。以上的兩個實現類將會直接讀取屬性檔案中的值後返回,若是不配置這兩個屬性的話,預設的實現類會把以上兩個路徑當做相對路徑來使用,在返回之前會加上上下文路徑。 
(2)配置tomcat,修改server.xml,新增一個虛擬目錄 
Xml程式碼  收藏程式碼
  1. <Context path="/image" docBase="E:\image" reloadable="true" debug="0"/>  

這個context應該包在host標籤之中。 

OK,很簡單的兩個步驟,現在上傳檔案則儲存在你所需要的位置了。之前被網上誤導了,為了實現使用絕對路徑居然還去改原始碼,後來在改的過程中發現fck已經都為你想到了,真的很人性化。 

四. 檔案上傳大小控制
最後我們在做檔案上傳的時候都需要限制檔案大小,這個就需要改下原始碼了。下載fckeditor-java-2.6-src.zip,解壓,但是我們只需要動幾個檔案,步驟如下: 
(1)在fckeditor.properties檔案中,新增兩個屬性值,用來設定上傳的圖片或Flash所允許的最大值,單位是位元。 
Java程式碼  收藏程式碼
  1. image.allowedMaxSize = 307200  
  2. flash.allowedMaxSize = 3072000  

(2)修改net.fckeditor.handlers.PropertiesLoader,這個類用於從屬性檔案中讀取指定的屬性值,我們新增兩個方法,用於從屬性檔案中讀取我們剛設定的那兩個值: 
Java程式碼  收藏程式碼
  1. public static int getImageAllowedImageSize(){  
  2.     int allowedMaxSize = 0;  
  3.     String tempStr = properties.getProperty("image.allowedMaxSize");  
  4.     if(tempStr != null){  
  5.         try {  
  6.             allowedMaxSize = Integer.parseInt(tempStr);  
  7.         } catch (NumberFormatException e) {  
  8.             logger.error("從配置檔案讀取的允許圖片上傳的最大值從字串型轉化為數值型出錯!", e);  
  9.         }  
  10.     }  
  11.     return allowedMaxSize;  
  12. }  
  13. public static int getFlashAllowedImageSize(){  
  14.     int allowedMaxSize = 0;  
  15.     String tempStr = properties.getProperty("flash.allowedMaxSize");  
  16.     if(tempStr != null){  
  17.         try{  
  18.             allowedMaxSize = Integer.parseInt(tempStr);  
  19.         } catch (NumberFormatException e) {  
  20.             logger.error("從配置檔案讀取的允許Flash上傳的最大值從字串型轉化為數值型出錯!", e);  
  21.         }  
  22.     }  
  23.     return allowedMaxSize;  
  24. }  

(3)修改net.fckeditor.handlers.ResourceType,這個類用於定義上傳檔案的種類,我們新增一個私有變數,表示允許上傳的最大值,再新增一個構造方法,在這個構造方法中初始圖片型別和Flash型別的上傳大小,所以圖片和Flash型別的靜態變數將呼叫這個初始化方法。 
Java程式碼  收藏程式碼
  1. //控制上傳大小(單位b)  
  2. private int allowedMaxSize = 0;  
  3.     /** Resource type <code>Flash</code> */  
  4.     public static final ResourceType FLASH = new ResourceType("Flash",  
  5.             PropertiesLoader.getFlashResourceTypePath(), Utils  
  6.                     .getSet(PropertiesLoader  
  7.                             .getFlashResourceTypeAllowedExtensions()), Utils  
  8.                     .getSet(PropertiesLoader  
  9.                             .getFlashResourceTypeDeniedExtensions()),  
  10.                     PropertiesLoader.getFlashAllowedImageSize());  
  11.     /** Resource type <code>Image</code> */  
  12.     public static final ResourceType IMAGE = new ResourceType("Image",  
  13.             PropertiesLoader.getImageResourceTypePath(), Utils  
  14.                     .getSet(PropertiesLoader  
  15.                             .getImageResourceTypeAllowedExtensions()), Utils  
  16.                     .getSet(PropertiesLoader  
  17.                             .getImageResourceTypeDeniedExtensions()),  
  18.                     PropertiesLoader.getImageAllowedImageSize());  
  19. /** 
  20.      * This constructor has been made intentionally made private to provide 
  21.      * pre-defined types only. 
  22.      *  
  23.      * @param name 
  24.      *            the name of the new resource type 
  25.      * @param path 
  26.      *            the absolute path of the new resource type 
  27.      * @param allowedEextensions 
  28.      *            the allowed extensions set of the new resource type 
  29.      * @param deniedExtensions 
  30.      *            the denied extensions set of the new resource type 
  31.      * @param allowedMaxSize            
  32.      *            允許上傳的最大值 
  33.      * @throws IllegalArgumentException 
  34.      *             if both sets are empty 
  35.      * @throws IllegalArgumentException 
  36.      *             if both sets contain extensions 
  37.      */  
  38.     private ResourceType(final String name, final String path,  
  39.             final Set<String> allowedEextensions,  
  40.             final Set<String> deniedExtensions,  
  41.             int allowedMaxSize) {  
  42.         this(name, path, allowedEextensions, deniedExtensions);  
  43.         this.allowedMaxSize = allowedMaxSize;  
  44.     }  

(4)修改net.fckeditor.connector.Dispatcher,這個類用於處理相關的檔案操作,修改UploadResponse doPost(final HttpServletRequest request)方法,在上傳檔案之前做下大小判斷 
Java程式碼  收藏程式碼
  1. UploadResponse doPost(final HttpServletRequest request) {  
  2.     ...  
  3.     else if (type.equals(ResourceType.IMAGE)  
  4.             && PropertiesLoader.isSecureImageUploads()  
  5.             && !UtilsFile.isImage(uplFile.getInputStream())) {  
  6.         uploadResponse = UploadResponse.getInvalidFileTypeError();  
  7.     }   
  8.        //判斷檔案上傳大小是否合法,非法的話就返回一個自定義的表示檔案太大的狀態值  
  9.        else if (type.getAllowedMaxSize() > 0 && uplFile.getSize() > type.getAllowedMaxSize()) {  
  10.         uploadResponse = new UploadResponse(204);  
  11.     } else {  
  12.         String sanitizedFileName = UtilsFile  
  13.                 .sanitizeFileName(fileName);  
  14.         logger.debug("Parameter NewFile (sanitized): {}",  
  15.                 sanitizedFileName);  
  16.     ...       
  17. }  

(4)修改fckeditor\editor\dialog\fck_image\fck_image.js,在function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )方法下新增一個對我們剛定義的204狀態碼的處理: 
Javascript程式碼  收藏程式碼
  1. switch ( errorNumber )  
  2. {  
  3.     case 0 :    // No errors  
  4.         alert( 'Your file has been successfully uploaded' ) ;  
  5.         break ;  
  6.     case 1 :    // Custom error  
  7.         alert( customMsg ) ;  
  8.         return ;  
  9.     case 101 :  // Custom warning  
  10. 相關推薦

    fckeditor2.6使用心得以及相關異常

    本文的內容大綱是: 1. 在web中配置應用Fck; 2. 用Fck自帶Api做非空驗證; 3. 修改檔案上傳的儲存路徑; 4. 對檔案上傳做大小控制; 一. 配置和應用去官網上下載fckeditor-java-demo-2.6.rar,裡面有我們需要的所有js和用於檔案上

    Android實現錄屏MediaProjection以及相關異常解決

    專案需要實現一個手機的錄屏功能,於是從網上找了些相關資料和原始碼,發現跑不起來,於是開始dubug,發現坑還是很多的,這裡記錄一下實現過程和一些些遇到的異常以及一個我調整完可以跑的Demo。 首先在AndroidManifest中靜態配置許可權: <uses-permission an

    android studio 升級3.0後,遇到的相關異常(6-7個bug)描述和解決辦法!

    Error:java.util.concurrent.ExecutionException: java.util.concurrent.ExecutionException: com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs fo

    java線程總結--synchronized關鍵字,原理以及相關的鎖

    public 關鍵字 多線程 java 文章 在多線程編程中,synchronized關鍵字非常常見,當我們需要進行“同步”操作時,我們很多時候需要該該關鍵字對代碼塊或者方法進行鎖定。被synchronized鎖定的代碼塊,只能同時有一條線程訪問該代碼塊。上面是很多人的認識,當然也是我之前

    linux安裝以及相關配置

    鍵盤輸入 普通用戶 fedora pass 含義 dom driver 設定 介質 計算機操作系統簡介 操作系統是什麽 操作系統的內核是什麽 兩種操作系統用戶界面 安裝Linux操作系統的準備工作 LINUX發行版(CENTOS、RHEL、FEDORA、UBUNT

    列表以及相關操作、命令

    增加值 從右到左 上一個 end 位置 元素 排序 ascii碼 append #_author:"ljk"#date: 2017/5/26# a = ["L0","L1","L2","L3","L4","L5"]#中括號 表示列表#增刪改查#增,切片#想取 L1 L2#p

    android 開發概述以及相關背景知識

    -a head qlite 組件 子類 andro 代碼 開發者 字符 參考鏈接:http://www.runoob.com/android/android-architecture.html http://www.runoob.com/and

    (一)關於spring security的簡要介紹以及相關配置和jar包認識

    重要 force cnblogs control 自定義攔截器 compute 編寫 -- 靈活 Spring Security是一個能夠為基於Spring的企業應用系統提供聲明式的安全訪問控制解決方案的安全框架。它提供了一組可以在Spring

    ubuntu17安裝以及相關問題的解決

    服務 ini 密碼修改 ace ubunt ins open pre sta 1、ssh的安裝和配置 sudo apt-get update sudo apt-get install openssh-server 查看ssh服務是否啟動 打開"終端窗口",輸

    Scrum心得以及實踐

    個人 得到 距離 討論 代碼 理解 提升 組成 用戶體驗 一、學習scrum心得 作為一個並未有過太多項目經驗的準程序員,也是第一次接觸到Scrum敏捷軟件開發。以下是個人對其的看法:   第一反應便是以用戶的身份結合當下APP的頻繁更新,確實深受愛戴。這也是它存在的意義和

    快速冪以及相關內容

    應用 pan ring 整數 n) 數組 keyword define name 數論

    NSString應該用strong還是weak,SDWebIamge原理以及相關問題

    圖片文件 規則 tope url 時間 找到 count load pos 1.對於NSString來說,strong和weak的作用是一樣的,都是增加了字符串對象的引用計數,並不會產生新的對象。 2.對於NSMutableString來說,strong只是增加了對象的引

    CentOS 6.5 x64相關安全,優化配置

    deny login 最長 註銷時間 max efs system roo style 一、安全   1、修改密碼長度:     [root@CentOS64 ~]# vi /etc/login.defs       PASS_MAX_DAYS 99999 //用

    太陽能開發環境配置:VS2008以及相關插件安裝

    image set 註意 ssi 監控 安裝文件 http crack 序列號 太陽能開發環境配置(二) 主要包括以下內容 [x] 1. Visual Studio 2008 安裝 [x] 2. VS2008 SP1補丁安裝 [x] 3. National Instrum

    Yum安裝MySQL以及相關目錄路徑和修改目錄

    mysqld 修改 oot my.cnf code all 數據 喜歡 clas 有些時候,為了方便,有些同學喜歡通過yum的方式安裝MySQL,沒有設置統一的文件目錄以及軟件目錄,那麽就會為後續的維護工作帶來很大的麻煩! 下面就簡單介紹一下yum安裝MySQL的步驟以及這

    linux的sysctl命令以及相關應用

    sysctl linux內核參數 一,sysctl命令簡介 sysctl命令被用於在內核運行時動態地修改內核的運行參數,可用的內核參數在目錄/proc/sys中。它包含一些TCP/ip堆棧和虛擬內存系統的高級選項, 這可以讓有經驗的管理員提高引人註目的系統性能。用sysctl可以讀取設置超過五百個系統

    YOLO_v3代碼解析以及相關註意事項

    retina orm int sum using 很多 第一個 名稱 命令 [TOC] 1. 項目介紹 $~~~~~~~$本次YOLO_v3的項目來源於機器之心翻譯的項目---從零開始PyTorch項目:YOLO v3目標檢測實現以及從零開始 PyTorch 項目:YOLO

    #YOLO_v3代碼解析以及相關註意事項

    名稱 avi 更改 其中 ssa 進行 block ext www 1. 項目介紹 $~~~~~~~$本次YOLO_v3的項目來源於機器之心翻譯的項目---從零開始PyTorch項目:YOLO v3目標檢測實現以及從零開始 PyTorch 項目:YOLO v3 目標檢測實現

    微信小程序image組件開發程序以及相關圖片問題參考資料匯總

    get 圖片 使用 color image IT 開發 必備 更改 微信小程序image組件開發程序以及相關圖片問題參考資料匯總,希望對大家小程序開發能有一定的參考和借鑒價值。以下匯總主要涉及到微信小程序image組件有關資源路徑、縮放和剪裁模式等進行的探討,無論是對微信小

    promise 以及相關面試題

    blog vda 異步操作 quest function cti AS AR reject https://www.cnblogs.com/lvdabao/p/es6-promise-1.html#!comments 特別好 Question:有一個url數組var ur