FCKeditor配置與使用

時間 2019-12-10

原文原文鏈接

fckeditor - (1)資料介紹與安裝
fckeditor介紹

FCKeditor是一個專門使用在網頁上屬於開放源代碼的所見即所得文字編輯器。

1.fckeditor官網：http://www.fckeditor.net/

2.fckeditor下載：http://www.fckeditor.net/download
  FCKeditor_2.6.3（客戶端javascript主程序）http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.6.3.zip
  FCKeditor.Java（支持j2ee web平臺服務器端程序）
  fckeditor-java-2.4-bin.zip(執行文件)
  http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-2.4-bin.zip
  fckeditor-java-2.4-src.zip（源文件）
  http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-2.4-src.zip
  fckeditor-java-demo-2.4.war（樣例）
  http://nchc.dl.sourceforge.net/sourceforge/fckeditor/fckeditor-java-demo-2.4.war

3.fckeditor樣例 http://www.fckeditor.net/demo/
  demo1:默認fckeditor
  demo2:多語言
  demo3:自定義工具集
  demo4:更換皮膚

4.fckeditor文檔 http://docs.fckeditor.net/
  開發者手冊:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide
  使用者手冊:http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide

安裝
參考文檔：http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Installation

試驗環境:
MyEclipse6.0+Tomcat5.0+Mysql5.0

步驟:

1.在MyEclipse中新建一個web工程TestFckeditor
2.把FCKeditor_2.6.3解壓後的生成的文件夾fckeditor拷貝到WebRoot下
3.檢測安裝是否成功訪問http://127.0.0.1:8888/TestFckeditor/fckeditor/_samples/default.html javascript

fckeditor - (2)集成php

集成javascript步驟

  參考文檔：http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/JavaScript


  1.將JavaScript集成模塊腳本放入<head>標籤中

   Html代碼
   <script type="text/javascript" src="fckeditor/fckeditor.js"></script>

   <script type="text/javascript" src="fckeditor/fckeditor.js"></script>

  2.建立fckeditor
   方法一：（內聯）
    在<body>標籤適當位置放入以下代碼（一般放在標籤中）

    Html代碼
    <script>
    var oFCKeditor = new FCKeditor('FCKeditor1');
    oFCKeditor.BasePath = "fckeditor/";
    oFCKeditor.Create();
    </script>


   方法二：（替代<textarea>）
    在<head>標籤中添加onload方法

    Html代碼
    <script>
    window.onload = function()
    {
    var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
    oFCKeditor.BasePath = "fckeditor/" ;
    oFCKeditor.ReplaceTextarea() ;
    }
    </script>

    在<body>標籤中添加如下代碼

    Html代碼
    <textarea id="MyTextarea" name="MyTextarea">
    This is <b>the</b> initial value.
    </textarea>

   方法三：（動態生成）

    在<head>標籤中定義 createFckeditor()方法

    Html代碼
    <script>
    function createFckeditor()
    {
    var div = document.getElementById("myFCKeditorDiv");
    var fck = new FCKeditor("myFCKeditor");
    fck.BasePath = "fckeditor/" ;
    div.innerHTML = fck.CreateHtml();
    }
    </script>


    在中div中動態顯示fckeditor

    Html代碼
    <a href="javascript:void(0);" onclick="createFckeditor();"> 動態建立fckeditor </a>
    <div id="myFCKeditorDiv"> </div>

fckeditor對象屬性

  屬性名  描述           默認值
  Width   寬度            100%
  Height   高度            200
  Value   編輯器初始化內容         空字符串
  ToolbarSet 工具條集合的名稱(Default，Basic，或自定義) Default
  BathPath 編輯器的基路徑,BasePath要正確設置，以「/」結尾 /fckeditor

  例如：

  Js代碼
  var oFCKeditor = new FCKeditor( 'MyFckeditor' ) ;
  oFCKeditor.BasePath = "fckeditor/" ;
  oFCKeditor.Width="80%";
  oFCKeditor.Height="200";
  oFCKeditor.Value="ok";
  oFCKeditor.ToolbarSet="Basic";
css

fckeditor構造器

  Js代碼
  var fckeditor=function(instanceName,width,height,toolbarSet,value) ;

  instanceName:編輯器輸出的textarea元素的name屬性或id屬性的值，必須指定其餘參數會賦給同名屬性

  例如:

  Js代碼
  var oFCKeditor = new FCKeditor( 'MyFckeditor' ,'80%','300','Basic','ok') ;


集成java步驟

  1.載入jar包

   將 fckeditor-java-demo-2.4.war放入運行中的tomcat安裝目錄下的webapps文件夾中讓其解壓，從解壓後的 fckeditor-java-demo-2.4\WEB-INF\lib下拷貝全部的jar文件，加入web工程的classpath中（能夠拷貝到 WebRoot\WEB-INF\lib文件夾下）

   jar文件包括：
    fckeditor-java-core-2.4.jar
    commons-fileupload-1.2.1.jar
    commons-io-1.3.2.jar
    slf4j-api-1.5.2.jar
    slf4j-simple-1.5.2.jar

  2.在jsp頁面中加入tablib指令和fck標籤
   參看fckeditor-java-core-2.4.jar/META-INF/FCKeditor.tld

    Xml代碼
    <short-name>FCK</short-name>
    <uri>http://java.fckeditor.net</uri>

   在jsp頁面中加入tablib指令

    Html代碼
    <%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>

   在<body>中加入自定義標籤

    Html代碼
    <FCK:editor instanceName="fck1" basePath="/fckeditor" value=" "></FCK:editor>

   注意：basePath以"/"開頭表明工程的根路徑而非web服務器的根路徑，必定要指定value屬性，並且值不能爲空字符串"",不然會拋NullPointException。html

fckeditor - (3)配置
參看文檔：http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_File

自定義配置方法

  1.直接修改主配置文件fckconfig.js

   fck主配置文件：fckeditor/fckconfig.js

  2.定義單獨的配置文件（只須要寫須要修改的配置項）

   2.1.建立myfckconfig.js配置自定義屬性

    將myfckconfig.js放入fckeditor/editor文件夾下，

     Java代碼
     //系統是否自動檢測並運用適當的語言界面
     FCKConfig.AutoDetectLanguage = false ;
     //手動設置默認的語言：法語
     FCKConfig.DefaultLanguage = "fr" ;

   2.2載入自定義配置文件
    方法一：全局載入(對工程中全部fckeditor有效)
     在fckconfig.js找到

      Js代碼
      FCKConfig.CustomConfigurationsPath = '' ;

     輸入myfckconfig.js位置，FCKConfig.BasePath值fckeditor/editor文件夾

      Js代碼
      FCKConfig.CustomConfigurationsPath = FCKConfig.BasePath+'myfckconfig.js ' ;


    方法二：局部載入（只對當前網頁有效）

     Js代碼
     var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
     oFCKeditor.Config["CustomConfigurationsPath"] = "myconfig.js" ;
     oFCKeditor.Create() ;



  3.在頁面的調用代碼中對FCKeditor的實例進行配置

   Js代碼
   var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
   oFCKeditor.Config["AutoDetectLanguage"] = "fasle" ;
   oFCKeditor.Create() ;

配置加載順序

  1.加載主配置文件fckconfig.js

  2.加載自定義的配置文件（若是有），覆蓋相同的配置項

  3.使用對實例的配置覆蓋相同的配置項（只對當前實例有效）

主配置文件（fckconfig.js部分屬性中文註釋）

  Js代碼
  FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱
  FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath 'css/fck_editorarea.css'; // 編輯區的樣式表文件
  FCKConfig.EditorAreaStyles = '' ; // 編輯區的樣式表風格
  FCKConfig.ToolbarComboPreviewCSS =''; //工具欄預覽CSS
  FCKConfig.DocType = '' ;//文檔類型
  FCKConfig.BaseHref = ''; // 相對連接的基地址
  FCKConfig.FullPage = false ; //是否容許編輯整個HTML文件,仍是僅容許編輯BODY間的內容
  FCKConfig.StartupShowBlocks = false ;//決定是否啓用"顯示模塊"
  FCKConfig.Debug = false ;//是否開啓調試功能
  FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath 'skins/default/' ; //皮膚路徑
  FCKConfig.PreloadImages=... //預裝入的圖片
  FCKConfig.PluginsPath = FCKConfig.BasePath 'plugins/' ; //插件路徑
  FCKConfig.AutoDetectLanguage = true ; //是否自動檢測語言
  FCKConfig.DefaultLanguage   = 'zh-cn' ; //默認語言
  FCKConfig.ContentLangDirection = 'ltr' ; //默認的文字方向,可選"ltr/rtl",即從左到右或從右到左
  FCKConfig.ProcessHTMLEntities = true ; //處理HTML實體
  FCKConfig.IncludeLatinEntities = true ; //包括拉丁文
  FCKConfig.IncludeGreekEntities = true ;//包括希臘文
  FCKConfig.ProcessNumericEntities = false ;//處理數字實體
  FCKConfig.AdditionalNumericEntities = '' ;   //附加的數字實體
  FCKConfig.FillEmptyBlocks = true ; //是否填充空塊
  FCKConfig.FormatSource   = true ; //在切換到代碼視圖時是否自動格式化代碼
  FCKConfig.FormatOutput   = true ; //當輸出內容時是否自動格式化代碼
  FCKConfig.FormatIndentator = '    ' ; //當在源碼格式下縮進代碼使用的字符
  FCKConfig.StartupFocus = false ; //開啓時焦點是否到編輯器,即打開頁面時光標是否停留在fckeditor上
  FCKConfig.ForcePasteAsPlainText = false ; //是否強制粘貼爲純文件內容
  FCKConfig.AutoDetectPasteFromWord = true ; //是否自動探測從word粘貼文件,僅支持IE
  FCKConfig.ShowDropDialog = true ;//是否顯示下拉菜單
  FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符號轉換爲XML實體
  FCKConfig.TabSpaces   = 0 ;//按下Tab鍵時光標跳格數,默認值爲零爲不跳格
  FCKConfig.ShowBorders = true ;//合併邊框
  FCKConfig.SourcePopup = false ;//彈出
  FCKConfig.ToolbarStartExpanded = true ;//啓動fckeditor工具欄默認是否展開
  FCKConfig.ToolbarCanCollapse = true ;//是否容許摺疊或展開工具欄
  FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值
  FCKConfig.FloatingPanelsZIndex = 10000 ;//浮動面板索引
  FCKConfig.HtmlEncodeOutput = false ;//是否將HTML編碼輸出
  FCKConfig.TemplateReplaceAll = true ;//是否替換全部模板
  FCKConfig.ToolbarLocation = 'In' ;//工具欄位置,
  FCKConfig.ToolbarSets = object ; // 編輯器的工具欄，能夠自行定義，刪減，可參考已存在工具欄
  FCKConfig.EnterMode = 'p'; // 編輯器中直接回車，在代碼中生成，可選爲p | div | br
  FCKConfig.ShiftEnterMode = 'br'; // 編輯器中Shift 回車，在代碼中生成，可選爲p | div | br
  FCKConfig.ContextMenu = 字符串數組; // 右鍵菜單的內容
  FCKConfig.FontColors = ""; // 文字顏色列表
  FCKConfig.FontNames = ""; // 字體列表
  FCKConfig.FontSizes = ""; // 字號列表
  FCKConfig.FontFormats = ""; // 文字格式列表
  FCKConfig.StylesXmlPath = ""; // CSS樣式列表的XML文件的位置
  FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
  FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼寫檢查器
  FCKConfig.IeSpellDownloadUrl = ""; // 下載拼寫檢查器的網址
  FCKConfig.FullPage = true/false; // 是否容許編輯整個HTML文件，仍是僅容許編輯BODY間的內容
  var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
  var _QuickUploadLanguage = 'php' ;// asp | aspx | cfm | lasso | php[/code]    //第一個是文件瀏覽器使用的語言，第二個快速上傳使用的語言，改爲你須要的
  FCKConfig.LinkUploadAllowedExtensions = "" ; // empty for all
  FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"    //這是兩個容許和拒絕上傳的文件類型列表
  FCKConfig.ImageBrowser = false ;//是否在插入圖片功能裏面啓用服務器文件瀏覽功能
  FCKConfigFCKConfig.ImageBrowserURL = FCKConfig.BasePath 'filemanager/browser/default/browser.html?Type=ImageConnector=connectors/' _FileBrowserLanguage '/connector.' _FileBrowserExtension ;
  //Type=Image   表示文件類型是image這會使文件瀏覽器定位到文件上傳路徑/image/文件夾下面
  FCKConfig.FlashBrowser = false ;//是否在插入flash功能中啓用服務器文件瀏覽功能
  FCKConfig.LinkUpload = false ;//是否啓用插入連接的快速上傳功能
  FCKConfig.ImageUpload = false ;//是否啓用圖片快速上傳功能
  FCKConfig.FlashUpload = false ;//是否啓用flash上傳功能
  FCKConfigFCKConfig.SmileyPath = FCKConfig.BasePath 'images/smiley/msn/'; // 表情文件存放路徑
  FCKConfig.SmileyImages = ''; // 表情文件名稱列表，具體參考默認設置
  FCKConfig.SmileyColumns = 8; // 表情窗口顯示錶情列數
  FCKConfig.SmileyWindowWidth = 320; // 表情窗口顯示寬度，此窗口會由於表情文件的改變而做調整
  FCKConfig.SmileyWindowHeight = 240; // 表情窗口顯示高度，此窗口會由於表情文件的改變而做調整

經常使用自定義配置樣例

  修改語言

   Js代碼
   FCKConfig.AutoDetectLanguage = false ;
   FCKConfig.DefaultLanguage = 'zh-cn' ;



  添加中文字體

   Js代碼
   FCKConfig.FontNames = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;




  更換換行模式

   Js代碼
   FCKConfig.EnterMode = 'br' ;       // p | div | br
   FCKConfig.ShiftEnterMode = 'p' ; // p | div | br



  自定義表情

   Js代碼
   FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/ftl/' ;
   FCKConfig.SmileyImages =['01.gif','02.gif','03.gif','04.gif','05.gif','06.gif','07.gif','08.gif','09.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif','21.gif'] ;
   FCKConfig.SmileyColumns = 8 ;
   FCKConfig.SmileyWindowWidth = 480 ;
   FCKConfig.SmileyWindowHeight = 180 ;

   若是表情圖片太多，能夠設置滾動條

       1.在fckeditor/editor/dialog/fck_smiley.html 中找到

     Js代碼
     window.onload = function ()
     {
     oEditor.FCKLanguageManager.TranslatePage(document) ;
     dialog.SetAutoSize( true ) ;
     }

     將dialog.SetAutoSize( true ) 改成dialog.SetAutoSize( false)

       2.再找到

     Html代碼
     <body style="overflow: hidden">
     <body>

     將 hidden改成auto




   更換皮膚

    Js代碼
    FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;

     fckeditor默認提供三種皮膚，若是想獲得更多皮膚請訪問:
     http://sourceforge.net/tracker/?atid=740153&group_id=75348&func=browse





  自定義工具集

   fckeditor提供兩種工具集Default/Basic,也能夠本身定義

   Js代碼
   FCKConfig.ToolbarSets["MYTOOLBAR"] = [
       ['Source','-','FitWindow','-','Preview'],
       ['Undo','Redo'],
       ['Link','Unlink','Anchor'],
       ['Image','Flash','Table','Rule','Smiley','SpecialChar'],
       ['JustifyLeft','JustifyCenter','JustifyRight'],
       ['About'],
       '/',
       ['Bold','Italic','Underline'],
       ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
       ['FontName','FontSize'],
       ['TextColor','BGColor']
   ] ;


  在頁面調用,要顯示設置FCKeditor對象的ToolbarSet屬性

  Java代碼
   var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
   oFCKeditor.BasePath = "fckeditor/" ;
   oFCKeditor.Config["CustomConfigurationsPath"] ='myfckconfig.js ' ;
   oFCKeditor.ToolbarSet="MYTOOLBAR";
   oFCKeditor.Create(); java

fckeditor - (4)文件上傳
fckeditor默認不支持文件上傳，須要下載web服務器端程序（fckeditor.java），並進行配置

1.在web.xml中加入ConnectorServlet的配置信息

  Xml代碼
   <servlet>
     <servlet-name>Connector</servlet-name>
     <servlet-class>
      net.fckeditor.connector.ConnectorServlet
     </servlet-class>
     <load-on-startup>1</load-on-startup>
   </servlet>

   <servlet-mapping>
     <servlet-name>Connector</servlet-name>
     <url-pattern>
      /fckeditor/editor/filemanager/connectors/*
     </url-pattern>
   </servlet-mapping>

2.在classpath路徑上建立fckeditor.properties(在src文件夾下建立)

  Java代碼
   connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

亂碼問題

  因爲fckeditor未考慮中文亂碼問題，因此須要對ConnectorServlet作修改

  解決fckeditor建立文件夾中文亂碼問題

   在ConnectorServlet的doGet方法中找到String newFolderStr = UtilsFile.sanitizeFolderName(newFolderName);這行代碼，在其上添加以下2行代碼。

   Java代碼
    //NewFolderName爲新建立的文件夾名稱，先用iso-8859-1編碼將字符串還原成字節數組，在用utf-8從新編碼
    String newFolderName = request.getParameter("NewFolderName");
    newFolderName = new String(newFolderName.getBytes("iso-8859-1"), "utf-8");

    String newFolderStr = UtilsFile.sanitizeFolderName(newFolderName);

  解決上傳文件名爲中文文件時出現亂碼
   fckeditor 在java平臺採用的是commons-upload組件進行文件上傳，只要修改ServletFileUpload的headerEncoding屬性爲utf-8就能解決上傳文件名是中文時所出現的亂碼問題。在ConnectorServlet的doPost方法中找到 ServletFileUpload upload = new ServletFileUpload(factory);在其後加入下面代碼web

   Java代碼
    FileItemFactory factory = new DiskFileItemFactory();
    ServletFileUpload upload = new ServletFileUpload(factory);

    //解決上傳文件名爲中文名時出現亂碼
    upload.setHeaderEncoding("utf-8");

中文圖片不能引用
  修改server.xml 端口爲8080的Connector，添加屬性URIEncoding="UTF-8"

  Xml代碼
   <Connector port="8080" maxHttpHeaderSize="8192"
                 maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
                 enableLookups="false" redirectPort="8443" acceptCount="100"
                 connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="UTF-8" />

解決上傳文件名重名問題

  上傳文件名用uuid隨機生成的32位字符串代替，防止文件名重複

  Java代碼
   String filename = FilenameUtils.getName(rawName);
   String baseName = FilenameUtils.removeExtension(filename);
   String extension = FilenameUtils.getExtension(filename);

    //上傳文件名用uuid隨機生成的32位字符串代替，防止文件名重複
   filename=UUID.randomUUID().toString().replace("-", "")+"."+extension;

控制容許上傳文件的文件類型
  fckeditor把上傳的文件分爲四種：file，Image，Flash，Media
  fckeditor會對上傳文件的類型進行兩次驗證（前臺javascript驗證和後臺java驗證）因此須要對myconfig.js和fckeditor.propertise進行配置
  例如：限制上傳圖片格式爲gif和png
  在myconfig.js增長下面配置（可參看fckconfig.js的具體配置選項）

  Js代碼
   FCKConfig.ImageUploadAllowedExtensions = ".(gif|png)$" ;


在fckeditor.propertise進行配置（可參看）

  Java代碼
   connector.resourceType.image.extensions.allowed=gif|png



控制容許上傳文件的文件大小

  1. 在服務端的servlet中，在保存文件以前先判斷一下文件大小，若是超出限制，就傳遞一個自定義的錯誤碼，而且再也不保存文件,在 ConnectorServlet的doPost方法中找到if (!ExtensionsHandler.isAllowed(resourceType, extension))
  在後面添加else if語句塊

   Java代碼
    //若是文件的擴展名不容許上傳
    if (!ExtensionsHandler.isAllowed(resourceType, extension))
        ur = new UploadResponse(UploadResponse.SC_INVALID_EXTENSION);
    //若是文件大小超出限制10k
    else if(uplFile.getSize()>10*1024){
    //傳遞一個自定義的錯誤碼
        ur = new UploadResponse(204);
    }
    //若是不存在以上錯誤，則保存文件
    else {
        ...

    }

  2.修改對應的頁面中的回調函數，增長對這個自定義的錯誤碼的處理
  找到fckeditor/editor/filemanager/browser/default/frmupload.html和fckeditor /editor/dialog/fck_image/fck_image.js中的OnUploadCompleted方法，
  在switch 語句塊中添加以下代碼

   Js代碼
    case 204 :
       alert( '文件太大' ) ;
       break ; sql