FCKeditor使用方法技術詳解

Mindy_Lou發表於2016-10-09

1、概述

FCKeditor是目前最優秀的可見即可得網頁編輯器之一，它採用JavaScript編寫。具備功能強大、配置容易、跨瀏覽器、支援多種程式語言、開源等特點。它非常流行，網際網路上很容易找到相關技術檔案，國內許多WEB專案和大型網站均採用了FCKeditor（如百度，阿里巴巴）。本文將透過與PHP相結合，從基本安裝到高階的配置循序漸進介紹給廣大PHPer。

FCKeditor官方網站：http://www.fckeditor.net/

FCKeditor Wiki：http://wiki.fckeditor.net/

2、下載FCKeditor

登入FCKeditor官方站（http://www.fckeditor.net），點選網站右上角“Download”連結。

筆者編寫本文時，FCKeditor當前最新的穩定版本是2.6.6，因此我們下載此版本的zip壓縮格式檔案。

       FCKeditor 2.6.6版下載地址：

http://nchc.dl.sourceforge.net/project/fckeditor/FCKeditor/2.6.6/FCKeditor_2.6.6.zip

 

 

 

3、安裝FCKeditor

       解壓“FCKeditor_2.6.6.zip”檔案到您的網站目錄下，我們先假定您存放FCKeditor和呼叫指令碼存於同一個目錄下。fckeditor目錄包含FCKeditor2.4.3程式檔案。check.php用於處理表單資料。add_article.php和add_article_js.html分別是PHP呼叫FCKeditor和JavaScript呼叫FCKeditor例項指令碼檔案。

3.1、用PHP呼叫FCKeditor

       呼叫FCKeditor必須先載入FCKeditor類檔案。具體程式碼如下。

<?php

include("fckeditor/fckeditor.php") ; // 用於載入FCKeditor類檔案

?>

接下來，我們需要建立FCKeditor例項、指定FCKeditor存放路徑和建立（顯示）編輯器等。具體程式碼如下所示（程式碼一般放在表單內）。

<?php

$oFCKeditor = new FCKeditor('FCKeditor1') ;  // 建立FCKeditor例項

$oFCKeditor->BasePath = './fckeditor/';        // 設定FCKeditor目錄地址

$FCKeditor->Width='100%';                //設定顯示寬度

$FCKeditor->Height='300px';               //設定顯示高度的高度

$oFCKeditor->Create() ;                    // 建立編輯器

?>

下面是筆者建立好的例項程式碼，您可將程式碼儲存為add_article.php。

<?php

include("fckeditor/fckeditor.php") ; // 用於載入FCKeditor類檔案

?>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>用PHP呼叫FCKeditor</title>

</head>

<body>

<form action="check.php" method="post" name="exapmle">

<?php

$oFCKeditor = new FCKeditor('FCKeditor1') ;  // 建立FCKeditor例項，可建立多個例項

$oFCKeditor->BasePath = './fckeditor/';      // 設定FCKeditor目錄地址

$oFCKeditor->Create() ;                      // 建立編輯器

?>

<input name="ok" type="submit" value="提交" >

</form>

</body>

</html>

透過瀏覽裡開啟http://you-address/add_article.php 檢視FCKeditor安裝效果。如圖3所示。

 

圖3：FCKeditor安裝成功

 

注意：如果您想將FCKeditor建立為HTML結果程式碼，以便於在模板引擎裡面呼叫（如Smarty）可使用如下程式碼。

$output = $oFCKeditor->CreateHtml() ;

 

現在，您可透過POST方式獲得編輯器的變數值。本例將表單的action設定為check.php，您可在check.php裡使用程式碼

$fckeditorValue = $_POST['FCKeditor1'];

獲得編輯器的變數值了。

 

    FCKeditor安裝成功了。但是，我們還可以透過更多設定來使FCKeditor更加靈活人性化。具體方法文字後面介紹。

3.2、用JavaScript呼叫FCKeditor

       呼叫FCKeditor必須先載入FCKeditor類檔案，但與PHP呼叫方法不同，應用下面的程式碼。

<script type="text/javascript" src="./fckeditor/fckeditor.js"></script> <!--載入fckeditor類-->

載入FCKeditor類成功後，有三種方法建立（顯示）編輯器。

一：內嵌方法（推薦）

在您想要顯示FCKeditor的地方建立如下程式碼（通常在表單裡）：

<script type="text/javascript">

  var oFCKeditor = new FCKeditor('FCKeditor1');

  oFCKeditor.BasePath = "./fckeditor /";

  oFCKeditor.Create();

</script>

下面是筆者建立好的例項程式碼，您可將程式碼儲存為add_article_js.html。

<html>

<head>

<script type="text/javascript" src="./fckeditor/fckeditor.js"></script> <!--載入fckeditor類-->

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>用JavaScript呼叫FCKeditor</title>

</head>

<body>

<form action="check.php" method="post" name="example">

<script type="text/javascript">

  var oFCKeditor = new FCKeditor('FCKeditor1');

  oFCKeditor.BasePath = "./fckeditor/";

  oFCKeditor.Create();

</script>

<input name="ok" type="submit" value="提交" >

</form>

</body>

</html>

透過瀏覽裡開啟http://you-address/add_article_js.html 檢視FCKeditor安裝效果。效果和圖3完全一樣。

       同樣，如果您可以使用和前面一樣的方法取得編輯器的POST變數值。

$fckeditorValue = $_POST['FCKeditor1'];

二：文字區域（TEXTAREA）方法

同內嵌方法一樣，也必須先載入fckeditor類。但建立（顯示）編輯器同內嵌方法不同，我們需要為window.onload定義一個函式。這樣，函式便可以在頁面載入時執行了。函式的定義程式碼如下所示。

<script type="text/javascript">

   window.onload = function()

   {

      var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;

      oFCKeditor.BasePath = "./FCKeditor/" ;

      oFCKeditor.ReplaceTextarea() ;

}

</script>

接著，您就可以在頁面中（通常在表單裡）定義id為MyTextarea的文字區域（TEXTAREA）。程式碼如下所示：

<textarea id ="MyTextarea" name="MyTextarea" ></textarea>

下面是筆者建立好的例項程式碼，顯示效果當然也是一樣的。筆者這裡就不哆嗦了。

<html>

<head>

<script type="text/javascript" src="./fckeditor/fckeditor.js"></script> <!--載入fckeditor類-->

<script type="text/javascript">

      window.onload = function()

      {

        var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;

        oFCKeditor.BasePath = "./fckeditor/" ;

        oFCKeditor.ReplaceTextarea() ;

      }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>用JavaScript呼叫FCKeditor</title>

</head>

<body>

<form action="check.php" method="post" name="example">

<textarea id ="MyTextarea" name="MyTextarea" ></textarea>

<input name="ok" type="submit" value="提交">

</form>

</body>

</html>

三：適合於Ajax的呼叫方法

同理，您同樣需要載入類檔案。然後使用下面的程式碼對div元素建立（顯示）編輯器。

var div = document.getElementById("myFCKeditor"); //使用getElementById方法取得myFCKeditor ID元素

var fck = new FCKeditor("myFCKeditor"); //建立fckeditor例項

div.innerHTML = fck.CreateHtml();//使用innerHTML方法，在myFCKeditor div元素裡建立編輯器

 

    和使用PHP呼叫fckeditor例項一樣，用javascript方法呼叫fckeditor例項也可以設定編輯器寬度和高度等。
oFCKeditor.Height = 400 ;    // 400 畫素
oFCKeditor.Height = "250" ;  // 250 畫素
oFCKeditor.Width  = "100%" ; // 百分比

4、FCKeditor常用設定

FCKeditor已經安裝成功了，也可以使用了。但是我們可以透過一些簡單的設定使FCKeditor更加符合您的專案需求。

設定工具欄很簡單，只需開啟fckeditor目錄下面的fckconfig.js檔案，按CTRL+F搜尋FCKConfig.ToolbarSets["Default"]程式碼，找到如下程式碼。

       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'],

       '/',

       ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

       ['OrderedList','UnorderedList','-','Outdent','Indent'],

       ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

       ['Link','Unlink','Anchor'],

       ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

       '/',

       ['Style','FontFormat','FontName','FontSize'],

       ['TextColor','BGColor'],

       ['FitWindow','-','About']

]

在預設情況下，FCKeditor會呼叫上面定義的所有工具欄按鈕。大家可以根據自己的需求進行設定。表1對上面的配置選項功能說明進行彙總。

程式碼名稱

功能

程式碼名稱

功能

Source

原始碼

DocProps

頁面屬性

-

｜分隔符

Save

儲存

NewPage

新建

Preview

預覽

Templates

模板

Cut

剪下

Copy

複製

Paste

貼上

PasteText

貼上為無格式文字

PasteWord

從MS Word貼上

Print

列印

SpellCheck

拼寫檢查

Undo

撤消

Redo

重做

Find

查詢

Replace

替換

SelectAll

全選

RemoveFormat

清除格式

Form

表單

Checkbox

核取方塊

Radio

單選框

TextField

單行文字

Textarea

多行文字

Select

列表選單

Button

按鈕

ImageButton

影像域

HiddenField

隱藏域

Bold

加粗

Italic

傾斜

Underline

下劃線

StrikeThrough

刪除線

Subscript

下標

Superscript

上標

OrderedList

插入／刪除編號列表

UnorderedList

插入／刪除專案列表

Outdent

減少縮排

Indent

增加縮排

JustifyLeft

左對齊

JustifyCenter

居中對齊

JustifyRight

右對齊

JustifyFull

兩端對齊

Link

插入／編輯連結

Unlink

取消連結

Anchor

插入／編輯錨點連結

Image

插入編輯影像

Flash

插入／編輯Flash

Table

插入／編輯表格

Rule

插入水平線

Smiley

插入表情

SpecialChar

插入特殊符號

PageBreak

插入分頁

Style

樣式

FontFormat

格式

FontName

字型

FontSize

大小

TextColor

文字顏色

BGColor

背景顏色

FitWindow

全屏編輯

About

關於Fuckeditor

 

 

表1：工具欄配置選項功能進行彙總

 

你也可以建立一個非預設的工具欄按鈕設定，您可以從FCKConfig.ToolbarSets["Default"]當中的程式碼重新複製一份，然後將Default改成您想要的名字。

 

注意：fckconfig.js配置選項採用JavaScript語法，如果您不懂JavaScript的話，請在配置之前進行備份。

 

筆者這裡配置了一個適合於大部份網站使用的工欄目按鈕（取消了一些不常用的工具欄按鈕，並重新佈局）。

FCKConfig.ToolbarSets["MyDesign"] = [

       ['Cut','Copy','Paste','PasteText','PasteWord','-','Undo','Redo','-','Find','Replace','-','RemoveFormat'],

       ['Link','Unlink','-','Image','Flash','Table'],

       ['FitWindow','-','Source'],

       '/',

       ['FontFormat','FontSize'],

       ['Bold','Italic','Underline'],

       ['OrderedList','UnorderedList','-','Outdent','Indent'],

       ['JustifyLeft','JustifyCenter','JustifyRight'],

       ['TextColor']

] ;

要想使用自定義的工具欄按鈕，必須在建立FCKeditor例項後設定使用的工具欄選項。

$oFCKeditor->ToolbarSet = ' MyDesign ' ;    //PHP

oFCKeditor.ToolbarSet = "MyDesign";       //JavaScript

 

接下來，我們對常用的一些設定選項功能進行總結，讀者可參考fckeditor目錄下fckconfig.js檔案進行閱讀。見表2

 

FCKConfig.AutoDetectLanguage

自動語言檢查

FCKConfig.DefaultLanguage       

預設語言設計，建議改成zh-cn

FCKConfig.ContextMenu

右鍵選單內容

FCKConfig.ToolbarStartExpanded

當頁面載入的時候，工具欄預設情況下是否展開

FCKConfig.FontColors

文字顏色列表

FCKConfig.FontNames 

字型列表，可加入國內常用的字型，如宋體、揩體、黑體等

FCKConfig.FontSizes

字號列表

FCKConfig.FontFormats

文字格式列表

FCKConfig.StylesXmlPath

指定風格XML檔案路徑

FCKConfig.TemplatesXmlPath

指定模板XML檔案路徑

FCKConfig.BodyId

設定編輯器的id

FCKConfig.BodyClass

設定編輯器的class

FCKConfig.DefaultLinkTarget

設定連結預設情況下的target屬性

FCKConfig.BaseHref

相對連結的基地址

FCKConfig.SkinPath

設定預設皮膚路徑

FCKConfig.SmileyPath

表情檔案路徑，您可以設定此項更改表情

FCKConfig.SmileyImage

表情檔案

FCKConfig.SmileyColumns

將表情分成幾列顯示

FCKConfig.SmileyWindowWidth

顯示錶情視窗的寬度，單位畫素

FCKConfig.SmileyWindowHeight

顯示錶情視窗的高度，單位畫素

表2：常用設定選項功能彙總

 

表2是筆者認為最重要的幾個常選項，如果讀者還需要更多選項的詳細資訊，可訪問http://warran.blueidea.com/archives/2006/3467.shtml網址獲得。

5、配置上傳\檔案瀏覽功能

5.1、配置上傳 \瀏覽功能

要使您的FCKeditor2.6.6 能夠使用上傳功能，您必須進行以下配製。
 
注意：FCKeditor2.6.6 不支援虛擬目錄，您的路徑設定都是針對網站根目錄的絕對路徑而言的。這點對於釋出到遠端網站目錄的開發者極為不便，後面我們會對此進行討論。
 
一、開啟fckeditor\editor\filemanager\connectors\php\config.php，找到程式碼$Config['Enabled']，將值設定為true。
 
二、接下來幾行，設定$Config['UserFilesPath']，設定上傳路徑。
 
三、開啟fckeditor\fckconfig.js檔案，找到程式碼_FileBrowserLanguage，將值設定為php。接下來一行，把_QuickUploadLanguage值也設定為php。
 

5.2 、關於上傳\檔案瀏覽安全性問題

為瞭解決FCKeditor不支援虛擬目錄問題，和FCKeditor檔案上傳的安全性考良。我們有必要在這裡單論對此進行討論。

     開啟fckeditor\editor\filemanager\upload\php\config.php，找到$Config['UserFilesPath']程式碼，在此行程式碼之前定義變數$root_path = $_SERVER['PHP_SELF'];
     重新設定$Config['UserFilesPath']變數的值，示例如下。
$Config['UserFilesPath'] = $root_path . '您想上傳的目錄名/' ;
     
     開啟fckeditor\editor\filemanager\browser\default\connectors\php\config.php，找到程式碼$Config['UserFilesPath'],在此行程式碼之前定義變數$root_path = $_SERVER['PHP_SELF'];
     重新設定$Config['UserFilesPath']變數的值，示例如下。
$Config['UserFilesPath'] = $root_path . '您想瀏覽的目錄名/'
     至此，您的FCKeditor已解決不支援虛擬目錄問題。接下來，我們介紹一種技巧配置只允許管理員才可以使用FCKeditor上傳問題。
     解決方法其實很簡單，假如網站採用$_SESSION['admin_id']驗證管理員的登入id，您只需將相關的指令碼檔案引入即可。然後使用下面的程式碼配置檔案上傳\瀏覽開關。
$Config['Enabled'] = isset($_SESSION['admin_id']);
 
 

5.3 、上傳檔案自動生成隨機檔名

Fckeditor預設使用上傳的檔名作為放在伺服器上的檔名，但很多時候我們需要它自動生成隨機檔案。下面介紹實現方法

開啟fckeditor\editor\filemanager\connectors\php\Io.php，這個檔案裡有一個函式名叫

function SanitizeFileName( $sNewFileName ),這個函式原來的功能是清理掉檔名的非法字元，以阻止一些可能發生的問題。現在我們可以註釋掉原來的程式碼，再加上我們返回生成隨機檔名的程式碼。程式碼如下：

// Do a cleanup of the file name to avoid possible problems

function SanitizeFileName( $sNewFileName )

{

//     global $Config ;

//

//     $sNewFileName = stripslashes( $sNewFileName ) ;

//

//     // Replace dots in the name with underscores (only one dot can be there... security issue).

//     if ( $Config['ForceSingleExtension'] )

//            $sNewFileName = preg_replace( '/\\.(?![^.]*$)/', '_', $sNewFileName ) ;

//

//     // Remove \ / | : ? * " < >

//     $sNewFileName = preg_replace( '/\\\\|\\/|\\||\\:|\\?|\\*|"|<|>|[[:cntrl:]]/', '_', $sNewFileName ) ;

//        print_r($sNewFileName);

//        return $sNewFileName;

 

        $ext = substr($sNewFileName,strripos($sNewFileName,'.')+1);

        $filename = rand_string();

 

       return  $filename.'.'.$ext;

 

}

6、FCKeditor Api

最詳細的FCKeditor Api檔案默過於官方wiki提供的檔案了。

FCKeditor Api官方檔案地址：http://wiki.fckeditor.net/Developer's_Guide/Javascript_API

下面提供國內某網友的翻譯檔案，轉載地址：http://blog.imwebs.com/article.asp?id=322

 

FCK 編輯器載入後，將會註冊一個全域性的 FCKeditorAPI 物件。


FCKeditorAPI 物件在頁面載入期間是無效的，直到頁面載入完成。如果需要互動式地知道 FCK 編輯器已經載入完成，可使用"FCKeditor_OnComplete"函式。
<script type="text/javascript">
function FCKeditor_OnComplete(editorInstance) {
  FCKeditorAPI.GetInstance('FCKeditor1').Commands.GetCommand('FitWindow').Execute();
}
</script>

在當前頁獲得 FCK 編輯器例項：
var Editor = FCKeditorAPI.GetInstance('InstanceName');

從 FCK 編輯器的彈出視窗中獲得 FCK 編輯器例項：
var Editor = window.parent.InnerDialogLoaded().FCK;

從框架頁面的子框架中獲得其它子框架的 FCK 編輯器例項：
var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

從頁面彈出視窗中獲得父視窗的 FCK 編輯器例項： 
var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

獲得 FCK 編輯器的內容：
oEditor.GetXHTML(formatted); // formatted 為：true|false，表示是否按HTML格式取出
也可用： 
oEditor.GetXHTML();

設定 FCK 編輯器的內容：
oEditor.SetHTML("content", false); // 第二個引數為：true|false，是否以所見即所得方式設定其內容。此方法常用於"設定初始值"或"表單重置"哦作。

插入內容到 FCK 編輯器：
oEditor.InsertHtml("html"); // "html"為HTML文字

檢查 FCK 編輯器內容是否發生變化：
oEditor.IsDirty();

在 FCK 編輯器之外呼叫 FCK 編輯器工具條命令：
命令列表如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
使用方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
oEditor.Commands.GetCommand('FitWindow').Execute();
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

7、精簡FCKeditor檔案空間大小

正因為這個編輯器是支援多語言的，所以首先我們針對使用對其做相應的冗餘檔案刪除。

1、臨時檔案及資料夾刪除：從根目錄下開始刪除一切以“_”開頭的檔案及資料夾，因為他們為臨時檔案和資料夾。刪除這類臨時檔案及資料夾之後，我們還要刪除一些根目錄下的多餘檔案，根目錄下我們只保留fckconfig.js（配置檔案）、fckeditor.js（js方式呼叫檔案）、fckeditor.php（php方式呼叫檔案，新版本透過該檔案統一呼叫php4或者php5的呼叫檔案，fckeditor_php4.php/fckeditor_php5.php你可以根據自己伺服器使用的情況刪減，建議都保留）、fckeditor_php4.php（php4的呼叫檔案）、fckeditor_php5.php（php5的呼叫檔案）、fckstyles.xml（樣式）、fcktemplates.xml（模板）檔案和editor資料夾。 

2、editor\lang目錄：存放的是多語言配置檔案，因為我們只可能用到en和zh-cn（簡體中文）所以，根據我的選擇，我刪掉其他的語言配置檔案。 

3、editor\skins介面目錄：預設帶有三個介面（default：預設介面，載入速度相對較快；office2003：相對pp的介面，不過速度確實要慢些；silver：銀白色介面，載入速度也相對較快），可以自行決定是否刪除其中一兩個。 

4、editor\filemanager\browser\default\connectors目錄：存放編輯器所支援的Web動態語言，我們以php為例所以保留php目錄，test.html檔案可以幫助你檢視某語言下的上傳設定等（具體上傳設定我將在後面的配置作較為詳細講解），可以自行決定是否刪除。 

5、editor\filemanager\upload目錄：同理。 

相關文章