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>

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

</head>

<body>

<?php

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

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

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

</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的地方建立如下程式碼（通常在表單裡）：

var oFCKeditor = new FCKeditor('FCKeditor1');

oFCKeditor.BasePath = "./fckeditor /";

oFCKeditor.Create();

</script>

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

<html>

<head>

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

</head>

<body>

var oFCKeditor = new FCKeditor('FCKeditor1');

oFCKeditor.BasePath = "./fckeditor/";

oFCKeditor.Create();

</script>

</form>

</body>

</html>

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

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

$fckeditorValue = $_POST['FCKeditor1'];

二：文字區域（TEXTAREA）方法

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

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>

window.onload = function()

{

var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;

oFCKeditor.BasePath = "./fckeditor/" ;

oFCKeditor.ReplaceTextarea() ;

}

</script>

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

</head>

<body>

</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目錄：同理。

學習：FCKeditor使用方法技術詳解
2011-06-09
FCKeditor使用方法(轉)
2017-11-26
JNI技術詳解
2017-11-09
Cube 技術解讀 | Cube 小程式技術詳解
2021-12-30
Cube 技術解讀 | Cube 卡片技術棧詳解
2021-11-03
SQL 注入技術詳解
2016-06-24
SQL
oracle flashback技術詳解
2014-01-05
Oracle
防火牆技術詳解
2008-04-19
防火牆
Service Mesh技術詳解
2024-06-21
FckEditor(CKEditor)配置詳細教程
2011-12-25
rman使用方法詳解
2011-04-14
Web除錯技術詳解
2019-04-23
Web除錯
詳解Vue.js 技術
2019-01-03
Vue.js
web前端技術Mongoose詳解
2022-11-23
Web前端Go
BASH命令使用方法詳解
2014-10-24
PHP 面試詳解之技術篇
2019-05-21
PHP面試
Flutter TextField詳解 | 掘金技術徵文
2018-08-09
Flutter
文字預處理技術詳解
2019-01-16
WiFi協議技術詳解概述
2024-01-19
WiFi協議
Java NIO 緩衝技術詳解
2015-09-24
Java
掌握ASP分頁技術詳解
2008-09-19
ProGuard程式碼混淆技術詳解
2016-05-27
Linux技術——lsof命令詳解
2016-03-03
Linux
Linux技術——tcpdump命令詳解
2016-03-04
LinuxTCP
恆訊科技講解：CDN的原理技術及使用方法
2020-11-05
php中Session使用方法詳解
2016-12-02
PHPSession
詳解 awk 工具的使用方法
2017-05-17
Android FragmentTabHost 使用方法詳解
2016-01-12
AndroidFragment
CynosDB技術詳解——架構設計
2018-12-20
架構
【INDEX】Oracle分割槽索引技術詳解
2022-03-08
IndexOracle索引
Tomcat系列之Java技術詳解
2017-11-17
TomcatJava
Linux技術——netstat命令詳解
2016-03-01
Linux
Docker之Docker Compose技術詳解。
2024-02-20
Docker
Java RMI技術詳解與案例分析
2024-08-05
Java
視訊技術詳解：RTMP H5 直播流技術解析
2019-02-16
H5
從技術到工具再到落地，Pivotal多位技術專家詳解Greenplum
2018-12-28
詳解TF雲原生技術路線圖
2020-08-19
24-PHP+MySQL分頁技術詳解
2021-09-09
PHPMySql

FCKeditor使用方法技術詳解

1、概述

2、下載FCKeditor

3、安裝FCKeditor

3.1、用PHP呼叫FCKeditor

3.2、用JavaScript呼叫FCKeditor

4、FCKeditor常用設定

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

5.1、配置上傳 \瀏覽功能

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

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

6、FCKeditor Api

7、精簡FCKeditor檔案空間大小

相關文章