jsp中配置 FCKeditor2.3（轉）

現在已經更新成CKeditor了不過這方面的教程不是很多，也沒啥時間去弄，是以找了以前的文章學習了一下，先記錄如下。

1.下載下傳

FCKeditor2.3 (FCKeditot for java) 包括了相應的jar檔案源碼以及editor及配置檔案

2.建立項目:

建立項目FCKeditor_Demo

3.将FCKeditor2.3解壓縮,将整個目錄editor複制到項目的Webroot下

将fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 檔案夾到項目中的 WebRoot 目錄

将"web\WEB-INF\lib 下的兩個 jar 檔案到項目的 WebRoot"WEB-INF"lib 目錄

将其中的 "src 下的 FCKeditor.tld 檔案到項目的 WebRoot"WEB-INF 目錄

4.項目的web.xml修改如下(可從web目錄WEB-INF中擷取web.xml)

<!-- FCKeditor配置 --> 
<display-name>FCKeditor</display-name> 
<servlet> 
<servlet-name>Connector</servlet-name> 
<servlet-class> 
com.fredck.FCKeditor.connector.ConnectorServlet 
</servlet-class> 
<init-param> 
<param-name>baseDir</param-name> 
<!-- 此為檔案浏覽路徑 --> 
<param-value>/UserFiles/</param-value> 
</init-param> 
<init-param> 
<param-name>debug</param-name> 
<param-value>true</param-value> 
</init-param> 
<load-on-startup>1</load-on-startup> 
</servlet> 
<servlet> 
<servlet-name>SimpleUploader</servlet-name> 
<servlet-class> 
com.fredck.FCKeditor.uploader.SimpleUploaderServlet 
</servlet-class> 
<init-param> 
<param-name>baseDir</param-name> 
<!-- 此為檔案上傳路徑，需要在WebRoot 目錄下建立 UserFiles 檔案夾 --> 
<!-- 根據檔案的類型還需要建立相關的檔案夾 Image、Flash --> 
<param-value>/UserFiles/</param-value> 
</init-param> 
<init-param> 
<param-name>debug</param-name> 
<param-value>true</param-value> 
</init-param> 
<init-param> 
<!-- 此參數為是否開啟上傳功能 --> 
<param-name>enabled</param-name> 
<param-value>true</param-value> 
</init-param> 
<init-param> 
<param-name>AllowedExtensionsFile</param-name> 
<param-value></param-value> 
</init-param> 
<init-param> 
<!-- 此參數為檔案過濾，以下的檔案類型都不可以上傳 --> 
<param-name>DeniedExtensionsFile</param-name> 
<param-value> 
php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi 
</param-value> 
</init-param> 
<init-param> 
<param-name>AllowedExtensionsImage</param-name> 
<param-value>jpg|gif|jpeg|png|bmp</param-value> 
</init-param> 
<init-param> 
<param-name>DeniedExtensionsImage</param-name> 
<param-value></param-value> 
</init-param> 
<init-param> 
<param-name>AllowedExtensionsFlash</param-name> 
<param-value>swf|fla</param-value> 
</init-param> 
<init-param> 
<param-name>DeniedExtensionsFlash</param-name> 
<param-value></param-value> 
</init-param> 
<load-on-startup>1</load-on-startup> 
</servlet> 
<servlet-mapping> 
<servlet-name>Connector</servlet-name> 
<url-pattern> 
/editor/filemanager/browser/default/connectors/jsp/connector 
</url-pattern> 
</servlet-mapping> 
<servlet-mapping> 
<servlet-name>SimpleUploader</servlet-name> 
<url-pattern> 
/editor/filemanager/upload/simpleuploader 
</url-pattern> 
</servlet-mapping> 
<!-- FCKeditor配置 -->

(可選)删除無用的檔案

删除無用檔案

删除/FCKeditor/目錄下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四個檔案以外的所有檔案

删除目錄/editor/_source,

删除/editor/filemanager/browser/default/connectors/下的所有檔案

删除/editor/filemanager/upload/下的所有檔案

删除/editor/lang/下的除了fcklanguagemanager.js, en.js, zh.js, zh-cn.js四個檔案的所有檔案

5.修改配置：

打開/fckconfig.js

修改 FCKConfig.DefaultLanguage = 'zh-cn' ;

把FCKConfig.LinkBrowserURL等的值替換成以下内容：

FCKConfig.LinkBrowserURL

= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

FCKConfig.ImageBrowserURL

= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;

FCKConfig.FlashBrowserURL

= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;

FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;

FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;

6.其它

fckconfig.js總配置檔案，可用記錄本打開，修改後将檔案存為utf-8 編碼格式。找到：

FCKConfig.TabSpaces = 0 ; 改為FCKConfig.TabSpaces = 1 ; 即在編輯器域内可以使用Tab鍵。

如果你的編輯器還用在網站前台的話，比如說用于留言本或是日記回複時，那就不得不考慮安全了，

在前台千萬不要使用Default的toolbar，要麼自定義一下功能，要麼就用系統已經定義好的Basic，

也就是基本的toolbar，找到：

FCKConfig.ToolbarSets["Basic"] = [

['Bold','Italic','-','OrderedList','UnorderedList','-','Unlink','-','Style','FontSize','TextColor','BGColor','-',

'Smiley','SpecialChar','Replace','Preview'] ] ;

這是改過的Basic，把圖像功能去掉，把添加連結功能去掉，因為圖像和連結和flash和圖像按鈕添加功能都能讓前台

頁直接通路和上傳檔案， fckeditor還支援編輯域内的滑鼠右鍵功能。

FCKConfig.ContextMenu = ['Generic','Anchor','Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',

'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;

這也是改過的把滑鼠右鍵的“連結、圖像，FLASH，圖像按鈕”功能都去掉。

　　找到： FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

加上幾種我們常用的字型

FCKConfig.FontNames

= '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

7.<%--

三種方法調用FCKeditor

1.FCKeditor自定義标簽 (必須加頭檔案 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )

2.script腳本語言調用 (必須引用腳本檔案 <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script> )

3.FCKeditor API 調用 (必須加頭檔案 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )

--%>

//标簽調用方式

<%--

<FCK:editor id="content" basePath="/FCKeditor_Demo/"

width="700"

height="500"

skinPath="/FCKeditor_Demo/editor/skins/silver/"

toolbarSet = "Default"

input

</FCK:editor>

</form>

--%>

//JS調用方式

<textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea>

var oFCKeditor = new FCKeditor('content') ;

oFCKeditor.BasePath = "/FCKeditor_Demo/" ;

oFCKeditor.Height = 400;

oFCKeditor.ToolbarSet = "Default" ;

oFCKeditor.ReplaceTextarea();

</script>

</td></tr></table>

</form>

//FCKeditor API 調用

<%--

FCKeditor oFCKeditor ;

oFCKeditor = new FCKeditor( request, "content" ) ;

oFCKeditor.setBasePath( "/FCKeditor_Demo/" ) ;

oFCKeditor.setValue( "input" );

out.println( oFCKeditor.create() ) ;

<br>

</form>

--%>

隻測試并成功了script方法~

8.上傳檔案的時候是調用FCKeditor.jar中的Servlet 可以将src中的源碼拷貝到工程中，友善功能的修改

9.web.xml中

<init-param> 
<param-name>baseDir</param-name> 
<!-- 此為檔案浏覽路徑 --> 
<param-value>/UserFiles/</param-value> 
</init-param>

/UserFiles/為上傳檔案的路徑，需要在WebRoot下添加此目錄，并添加Image和Flash目錄分别存放圖檔和flash；不加的話可能會出現權限不夠的警告視窗

10.以下是轉載的一些備用資訊，此次配置中沒碰到問題，是以也沒細看~留着以防不時之需吧

配置選項: 

AutoDetectLanguage=true/false 自動檢測語言 
BaseHref="" 相對連結的基位址 
ContentLangDirection="ltr/rtl" 預設文字方向 
ContextMenu=字元串數組,右鍵菜單的内容 
CustomConfigurationsPath="" 自定義配置檔案路徑和名稱 
Debug=true/false 是否開啟調試功能,這樣,當調用FCKDebug.Output()時,會在調試窗中輸出内容 
DefaultLanguage="" 預設語言 
EditorAreaCss="" 編輯區的樣式表檔案 
EnableSourceXHTML=true/false 為TRUE時,當由可視化界面切換到代碼頁時,把HTML處理成XHTML 
EnableXHTML=true/false 是否允許使用XHTML取代HTML 
FillEmptyBlocks=true/false 使用這個功能,可以将空的塊級元素用空格來替代 
FontColors="" 設定顯示顔色拾取器時文字顔色清單 
FontFormats="" 設定顯示在文字格式清單中的命名 
FontNames="" 字型清單中的字型名 
FontSizes="" 字型大小中的字号清單 
ForcePasteAsPlainText=true/false 強制粘貼為純文字 
ForceSimpleAmpersand=true/false 是否不把&符号轉換為XML實體 
FormatIndentator="" 當在源碼格式下縮進代碼使用的字元 
FormatOutput=true/false 當輸出内容時是否自動格式化代碼 
FormatSource=true/false 在切換到代碼視圖時是否自動格式化代碼 
FullPage=true/false 是否允許編輯整個HTML檔案,還是僅允許編輯BODY間的内容 
GeckoUseSPAN=true/false 是否允許SPAN标記代替B,I,U标記 
IeSpellDownloadUrl=""下載下傳拼寫檢查器的網址 
ImageBrowser=true/false 是否允許浏覽伺服器功能 
ImageBrowserURL="" 浏覽伺服器時運作的URL 
ImageBrowserWindowHeight="" 圖像浏覽器視窗高度 
ImageBrowserWindowWidth="" 圖像浏覽器視窗寬度 
LinkBrowser=true/false 是否允許在插傳入連結接時浏覽伺服器 
LinkBrowserURL="" 插傳入連結接時浏覽伺服器的URL 
LinkBrowserWindowHeight=""連結目标浏覽器視窗高度 
LinkBrowserWindowWidth=""連結目标浏覽器視窗寬度 
Plugins=object 注冊插件 
PluginsPath="" 插件檔案夾 
ShowBorders=true/false 合并邊框 
SkinPath="" 皮膚檔案夾位置 
SmileyColumns=12 圖符窗列數 
SmileyImages=字元數組 圖符窗中圖檔檔案名數組 
SmileyPath="" 圖符檔案夾路徑 
SmileyWindowHeight 圖符視窗高度 
SmileyWindowWidth 圖符視窗寬度 
SpellChecker="ieSpell/Spellerpages" 設定拼寫檢查器 
StartupFocus=true/false 開啟時FOCUS到編輯器 
StylesXmlPath="" 設定定義CSS樣式清單的XML檔案的位置 
TabSpaces=4 TAB鍵産生的空格字元數 
ToolBarCanCollapse=true/false 是否允許展開/折疊工具欄 
ToolbarSets=object 允許使用TOOLBAR集合 
ToolbarStartExpanded=true/false 開啟是TOOLBAR是否展開 
UseBROnCarriageReturn=true/false 當回車時是産生BR标記還是P或者DIV标記 
解決上傳亂碼:在SimpleUploaderServlet.java和ConnectorServlet.java兩個檔案裡找到DiskFileUpload upload = new DiskFileUpload(); 
分别在其後加入 upload.setHeaderEncoding("utf-8");這樣解決了檔案上傳的中文亂碼問題.但是在控制台顯示的中文内容還是亂碼,但是沒關系,我們沒必要去看控制台下的中文 

500錯誤： 
          如果你上傳時，出現500的錯誤，試試加上serializer.jar、xalan.jar、commons-fileupload.jar三個包。 
二、根據自己的需求修改： 
       點選上傳圖檔，将圖檔資訊上傳到資料庫。 
      修改connector/ConnectorServlet.java dopost/doget方法。 
   我用的是post方式送出的： 

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 

        if (debug) System.out.println("--- BEGIN DOPOST ---"); 

        response.setContentType("text/html; charset=UTF-8"); 
        response.setHeader("Cache-Control","no-cache"); 
        PrintWriter out = response.getWriter(); 
        
        String commandStr=request.getParameter("Command"); 
        String typeStr=request.getParameter("Type"); 
        String currentFolderStr=request.getParameter("CurrentFolder"); 
        
        String currentPath=baseDir+typeStr+currentFolderStr; 
//        System.out.println(currentPath); 
        String currentDirPath=getServletContext().getRealPath(currentPath); 
        
        if (debug) System.out.println(currentDirPath); 
        
        String retVal="0"; 
        String newName=""; 
        
        if(!commandStr.equals("FileUpload")) 
            retVal="203"; 
        else { 
            DiskFileUpload upload = new DiskFileUpload(); 
            try { 
                List items = upload.parseRequest(request); 
                
                Map fields=new HashMap(); 
                
                Iterator iter = items.iterator(); 
                while (iter.hasNext()) { 
                    FileItem item = (FileItem) iter.next(); 
                    if (item.isFormField()) 
                        fields.put(item.getFieldName(),item.getString()); 
                    else 
                        fields.put(item.getFieldName(),item); 
                } 
                FileItem uplFile=(FileItem)fields.get("NewFile"); 
                String fileNameLong=uplFile.getName(); 
//                System.out.println(fileNameLong); 
                fileNameLong=fileNameLong.replace('\\','/'); 
                String[] pathParts=fileNameLong.split("/"); 
                String fileName=pathParts[pathParts.length-1]; 
//                System.out.println(fileName+"ccccccccccc"); 
                String nameWithoutExt=getNameWithoutExtension(fileName); 
                System.out.println(nameWithoutExt); 
                String ext=getExtension(fileName); 
                System.out.println(ext); 
//            上傳圖檔資訊，添加到資料庫中 開始 
                List <ImageMessage> imlist=new ArrayList<ImageMessage>(); 
                   ImageMessage img=new ImageMessage(); 
                   img.setImageName(fileName); 
                   img.setImagePaht(currentDirPath); 
                   imlist.add(img); 
                   LinkDatabase link=new LinkDatabase(); 
                   link.insertMessage(imlist); 
            //結束 
                File pathToSave=new File(currentDirPath,fileName); 
                int counter=1; 
                while(pathToSave.exists()){ 
                    newName=nameWithoutExt+"("+counter+")"+"."+ext; 
                    retVal="201"; 
                    pathToSave=new File(currentDirPath,newName); 
                    counter++; 
                    } 
                uplFile.write(pathToSave); 
            }catch (Exception ex) { 
                retVal="203"; 
            } 
            
        } 
        
        out.println("<script type=\"text/javascript\">"); 
        out.println("window.parent.frames['frmUpload'].OnUploadCompleted("+retVal+",'"+newName+"');"); 
        out.println("</script>"); 
        out.flush(); 
        out.close(); 
    
        if (debug) System.out.println("--- END DOPOST ---");    
        
    } 
三、動态的修改工具欄 
     
       修改fckconfig.js檔案。 
   在添加下面代碼，把“Default”，改為自定義工具名稱。在jsp 頁面設定FCKeditor執行個體      oFCKeditor.setToolbarSet("自定義工具名稱"); 

     FCKConfig.ToolbarSets["Default"] = [ 
    ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'], 
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'], 
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], 
    ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'], 
       '/', 
    ['Style','FontFormat','FontName','FontSize'], 
    ['TextColor','BGColor'], 
    ['FitWindow','-','About'] 
] ;

附件中包括了完整的FCKeditor檔案以及配置好的工程源碼

PS:項目中用到了struts2，上傳時候同樣碰到了權限問題，原來是因為struts2的攔截器導緻，是以修改filter-mapping即可以：

<filter-mapping>   
        <filter-name>struts2</filter-name>   
        <url-pattern>*.action</url-pattern>   
    </filter-mapping>   
  
  
    <filter-mapping>   
        <filter-name>struts2</filter-name>   
        <url-pattern>*.jsp</url-pattern>   
    </filter-mapping>

jsp中配置 FCKeditor2.3（轉）

繼續閱讀

MySQL的4種隔離級别？出現問題

tab滑鼠經過菜單切換

XX系統實施過程問題總結

vue （vue2.0）使用總結(從大體結構總結)

無元件上傳圖檔到資料庫中，最完整解決方案

vue搭建過程及出現問題

【MySQL資料庫】資料庫索引事務1.索引2.事務

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

NOSQL安全攻擊

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

登入plsql 報錯 the account is locked --使用者被鎖

SequoiaDB巨杉資料庫C++驅動概述

layui多任務上傳添加進度條