溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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粘貼
打印
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目錄：同理。
到此精簡完成，你會發現整個編輯器確實“瘦身”不少，呵呵
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
