溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
1、概述
FCKeditor是目前最優(yōu)秀的可見即可得網(wǎng)頁編輯器之一，它采用JavaScript編寫。具備功能強大、配置容易、跨瀏覽器、支持多種編程語言、開源等特點。它非常流行，互聯(lián)網(wǎng)上很容易找到相關(guān)技術(shù)文檔，國內(nèi)許多WEB項目和大型網(wǎng)站均采用了FCKeditor（如百度，阿里巴巴）。本文將通過與PHP相結(jié)合，從基本安裝到高級的配置循序漸進介紹給廣大PHPer。
FCKeditor官方網(wǎng)站：http://www.fckeditor.net/
FCKeditor Wiki：http://wiki.fckeditor.net/
2、下載FCKeditor
登錄FCKeditor官方站（http://www.fckeditor.net），點擊網(wǎng)站右上角“Download”鏈接。
筆者編寫本文時，F(xiàn)CKeditor當前最新的穩(wěn)定版本是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”文檔到您的網(wǎng)站目錄下，我們先假定您存放FCKeditor和調(diào)用腳本存于同一個目錄下。fckeditor目錄包含F(xiàn)CKeditor2.4.3程序文件。check.php用于處理表單數(shù)據(jù)。add_article.php和add_article_js.html分別是PHP調(diào)用FCKeditor和JavaScript調(diào)用FCKeditor實例腳本文件。
3.1、用PHP調(diào)用FCKeditor
調(diào)用FCKeditor必須先載入FCKeditor類文件。具體代碼如下。
<?php
include("fckeditor/fckeditor.php") ; // 用于載入FCKeditor類文件
?>
接下來，我們需要創(chuàng)建FCKeditor實例、指定FCKeditor存放路徑和創(chuàng)建（顯示）編輯器等。具體代碼如下所示（代碼一般放在表單內(nèi)）。
<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ; // 創(chuàng)建FCKeditor實例
$oFCKeditor->BasePath = './fckeditor/'; // 設(shè)置FCKeditor目錄地址
$FCKeditor->Width='100%'; //設(shè)置顯示寬度
$FCKeditor->Height='300px'; //設(shè)置顯示高度的高度
$oFCKeditor->Create() ; // 創(chuàng)建編輯器
?>
下面是筆者創(chuàng)建好的實例代碼，您可將代碼保存為add_article.php。
<?php
include("fckeditor/fckeditor.php") ; // 用于載入FCKeditor類文件
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用PHP調(diào)用FCKeditor</title>
</head>
<body>
<form action="check.php" method="post" name="exapmle">
<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ; // 創(chuàng)建FCKeditor實例，可創(chuàng)建多個實例
$oFCKeditor->BasePath = './fckeditor/'; // 設(shè)置FCKeditor目錄地址
$oFCKeditor->Create() ; // 創(chuàng)建編輯器
?>
<input name="ok" type="submit" value="提交" >
</form>
</body>
</html>
通過瀏覽里打開http://you-address/add_article.php 查看FCKeditor安裝效果。如圖3所示。
圖3：FCKeditor安裝成功
注意：如果您想將FCKeditor創(chuàng)建為HTML結(jié)果代碼，以便于在模板引擎里面調(diào)用（如Smarty）可使用如下代碼。
$output = $oFCKeditor->CreateHtml() ;
現(xiàn)在，您可通過POST方式獲得編輯器的變量值。本例將表單的action設(shè)置為check.php，您可在check.php里使用代碼
$fckeditorValue = $_POST['FCKeditor1'];
獲得編輯器的變量值了。
FCKeditor安裝成功了。但是，我們還可以通過更多設(shè)置來使FCKeditor更加靈活人性化。具體方法文本后面介紹。
3.2、用JavaScript調(diào)用FCKeditor
調(diào)用FCKeditor必須先載入FCKeditor類文件，但與PHP調(diào)用方法不同，應(yīng)用下面的代碼。
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script> <!--載入fckeditor類-->
載入FCKeditor類成功后，有三種方法創(chuàng)建（顯示）編輯器。
一：內(nèi)嵌方法（推薦）
在您想要顯示FCKeditor的地方創(chuàng)建如下代碼（通常在表單里）：
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "./fckeditor /";
oFCKeditor.Create();
</script>
下面是筆者創(chuàng)建好的實例代碼，您可將代碼保存為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調(diào)用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'];
二：文本區(qū)域（TEXTAREA）方法
同內(nèi)嵌方法一樣，也必須先載入fckeditor類。但創(chuàng)建（顯示）編輯器同內(nèi)嵌方法不同，我們需要為window.onload定義一個函數(shù)。這樣，函數(shù)便可以在頁面加載時執(zhí)行了。函數(shù)的定義代碼如下所示。
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "./FCKeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
接著，您就可以在頁面中（通常在表單里）定義id為MyTextarea的文本區(qū)域（TEXTAREA）。代碼如下所示：
<textarea id ="MyTextarea" name="MyTextarea" ></textarea>
下面是筆者創(chuàng)建好的實例代碼，顯示效果當然也是一樣的。筆者這里就不哆嗦了。
<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調(diào)用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的調(diào)用方法
同理，您同樣需要加載類文件。然后使用下面的代碼對div元素創(chuàng)建（顯示）編輯器。
var div = document.getElementById("myFCKeditor"); //使用getElementById方法取得myFCKeditor ID元素
var fck = new FCKeditor("myFCKeditor"); //創(chuàng)建fckeditor實例
div.innerHTML = fck.CreateHtml();//使用innerHTML方法，在myFCKeditor div元素里創(chuàng)建編輯器
和使用PHP調(diào)用fckeditor實例一樣，用javascript方法調(diào)用fckeditor實例也可以設(shè)置編輯器寬度和高度等。
oFCKeditor.Height = 400 ; // 400 像素
oFCKeditor.Height = "250" ; // 250 像素
oFCKeditor.Width = "100%" ; // 百分比
4、FCKeditor常用設(shè)置
FCKeditor已經(jīng)安裝成功了，也可以使用了。但是我們可以通過一些簡單的設(shè)置使FCKeditor更加符合您的項目需求。
設(shè)置工具欄很簡單，只需打開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']
]
在默認情況下，F(xiàn)CKeditor會調(diào)用上面定義的所有工具欄按鈕。大家可以根據(jù)自己的需求進行設(shè)置。表1對上面的配置選項功能說明進行匯總。
代碼名稱
功能
代碼名稱
功能
Source
源代碼
DocProps
頁面屬性
-
｜分隔符
Save
保存
NewPage
新建
Preview
預(yù)覽
Templates
模板
Cut
剪切
Copy
復(fù)制
Paste
粘貼
PasteText
粘貼為無格式文本
PasteWord
從MS Word粘貼
打印
SpellCheck
拼寫檢查
Undo
撤消
Redo
重做
Find
查找
Replace
替換
SelectAll
全選
RemoveFormat
清除格式
Form
表單
Checkbox
復(fù)選框
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
關(guān)于Fuckeditor
表1：工具欄配置選項功能進行匯總
你也可以創(chuàng)建一個非默認的工具欄按鈕設(shè)置，您可以從FCKConfig.ToolbarSets["Default"]當中的代碼重新復(fù)制一份，然后將Default改成您想要的名字。
注意：fckconfig.js配置選項采用JavaScript語法，如果您不懂JavaScript的話，請在配置之前進行備份。
筆者這里配置了一個適合于大部份網(wǎng)站使用的工欄目按鈕（取消了一些不常用的工具欄按鈕，并重新布局）。
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']
] ;
要想使用自定義的工具欄按鈕，必須在創(chuàng)建FCKeditor實例后設(shè)置使用的工具欄選項。
$oFCKeditor->ToolbarSet = ' MyDesign ' ; //PHP
oFCKeditor.ToolbarSet = "MyDesign"; //JavaScript
接下來，我們對常用的一些設(shè)置選項功能進行總結(jié)，讀者可參考fckeditor目錄下fckconfig.js文件進行閱讀。見表2
FCKConfig.AutoDetectLanguage
自動語言檢查
FCKConfig.DefaultLanguage
默認語言設(shè)計，建議改成zh-cn
FCKConfig.ContextMenu
右鍵菜單內(nèi)容
FCKConfig.ToolbarStartExpanded
當頁面載入的時候，工具欄默認情況下是否展開
FCKConfig.FontColors
文字顏色列表
FCKConfig.FontNames
字體列表，可加入國內(nèi)常用的字體，如宋體、揩體、黑體等
FCKConfig.FontSizes
字號列表
FCKConfig.FontFormats
文字格式列表
FCKConfig.StylesXmlPath
指定風格XML文件路徑
FCKConfig.TemplatesXmlPath
指定模板XML文件路徑
FCKConfig.BodyId
設(shè)置編輯器的id
FCKConfig.BodyClass
設(shè)置編輯器的class
FCKConfig.DefaultLinkTarget
設(shè)置鏈接默認情況下的target屬性
FCKConfig.BaseHref
相對鏈接的基地址
FCKConfig.SkinPath
設(shè)置默認皮膚路徑
FCKConfig.SmileyPath
表情文件路徑，您可以設(shè)置此項更改表情
FCKConfig.SmileyImage
表情文件
FCKConfig.SmileyColumns
將表情分成幾列顯示
FCKConfig.SmileyWindowWidth
顯示表情窗口的寬度，單位像素
FCKConfig.SmileyWindowHeight
顯示表情窗口的高度，單位像素
表2：常用設(shè)置選項功能匯總
表2是筆者認為最重要的幾個常選項，如果讀者還需要更多選項的詳細信息，可訪問http://warran.blueidea.com/archives/2006/3467.shtml網(wǎng)址獲得。
5、配置上傳\文件瀏覽功能
5.1、配置上傳 \瀏覽功能
要使您的FCKeditor2.6.6 能夠使用上傳功能，您必須進行以下配制。
注意：FCKeditor2.6.6 不支持虛擬目錄，您的路徑設(shè)置都是針對網(wǎng)站根目錄的絕對路徑而言的。這點對于發(fā)布到遠程網(wǎng)站目錄的開發(fā)者極為不便，后面我們會對此進行討論。
一、打開fckeditor\editor\filemanager\connectors\php\config.php，找到代碼$Config['Enabled']，將值設(shè)置為true。
二、接下來幾行，設(shè)置$Config['UserFilesPath']，設(shè)置上傳路徑。
三、打開fckeditor\fckconfig.js文件，找到代碼_FileBrowserLanguage，將值設(shè)置為php。接下來一行，把_QuickUploadLanguage值也設(shè)置為php。
5.2 、關(guān)于上傳\文件瀏覽安全性問題
為了解決FCKeditor不支持虛擬目錄問題，和FCKeditor文件上傳的安全性考良。我們有必要在這里單論對此進行討論。
打開fckeditor\editor\filemanager\upload\php\config.php，找到$Config['UserFilesPath']代碼，在此行代碼之前定義變量$root_path = $_SERVER['PHP_SELF'];
重新設(shè)置$Config['UserFilesPath']變量的值，示例如下。
$Config['UserFilesPath'] = $root_path . '您想上傳的目錄名/' ;
打開fckeditor\editor\filemanager\browser\default\connectors\php\config.php，找到代碼$Config['UserFilesPath'],在此行代碼之前定義變量$root_path = $_SERVER['PHP_SELF'];
重新設(shè)置$Config['UserFilesPath']變量的值，示例如下。
$Config['UserFilesPath'] = $root_path . '您想瀏覽的目錄名/'
至此，您的FCKeditor已解決不支持虛擬目錄問題。接下來，我們介紹一種技巧配置只允許管理員才可以使用FCKeditor上傳問題。
解決方法其實很簡單，假如網(wǎng)站采用$_SESSION['admin_id']驗證管理員的登錄id，您只需將相關(guān)的腳本文件引入即可。然后使用下面的代碼配置文件上傳\瀏覽開關(guān)。
$Config['Enabled'] = isset($_SESSION['admin_id']);
5.3 、上傳文件自動生成隨機文件名
Fckeditor默認使用上傳的文件名作為放在服務(wù)器上的文件名，但很多時候我們需要它自動生成隨機文件。下面介紹實現(xiàn)方法
打開fckeditor\editor\filemanager\connectors\php\Io.php，這個文件里有一個函數(shù)名叫
function SanitizeFileName( $sNewFileName ),這個函數(shù)原來的功能是清理掉文件名的非法字符，以阻止一些可能發(fā)生的問題?，F(xiàn)在我們可以注釋掉原來的代碼，再加上我們返回生成隨機文件名的代碼。代碼如下：
// 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
下面提供國內(nèi)某網(wǎng)友的翻譯文檔，轉(zhuǎn)載地址：http://blog.imwebs.com/article.asp?id=322
FCK 編輯器加載后，將會注冊一個全局的 FCKeditorAPI 對象。
FCKeditorAPI 對象在頁面加載期間是無效的，直到頁面加載完成。如果需要交互式地知道 FCK 編輯器已經(jīng)加載完成，可使用"FCKeditor_OnComplete"函數(shù)。
<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 編輯器的內(nèi)容：
oEditor.GetXHTML(formatted); // formatted 為：true|false，表示是否按HTML格式取出
也可用：
oEditor.GetXHTML();
設(shè)置 FCK 編輯器的內(nèi)容：
oEditor.SetHTML("content", false); // 第二個參數(shù)為：true|false，是否以所見即所得方式設(shè)置其內(nèi)容。此方法常用于"設(shè)置初始值"或"表單重置"哦作。
插入內(nèi)容到 FCK 編輯器：
oEditor.InsertHtml("html"); // "html"為HTML文本
檢查 FCK 編輯器內(nèi)容是否發(fā)生變化：
oEditor.IsDirty();
在 FCK 編輯器之外調(diào)用 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文件空間大小
正因為這個編輯器是支持多語言的，所以首先我們針對使用對其做相應(yīng)的冗余文件刪除。
1、臨時文件及文件夾刪除：從根目錄下開始刪除一切以“_”開頭的文件及文件夾，因為他們?yōu)榕R時文件和文件夾。刪除這類臨時文件及文件夾之后，我們還要刪除一些根目錄下的多余文件，根目錄下我們只保留fckconfig.js（配置文件）、fckeditor.js（js方式調(diào)用文件）、fckeditor.php（php方式調(diào)用文件，新版本通過該文件統(tǒng)一調(diào)用php4或者php5的調(diào)用文件，fckeditor_php4.php/fckeditor_php5.php你可以根據(jù)自己服務(wù)器使用的情況刪減，建議都保留）、fckeditor_php4.php（php4的調(diào)用文件）、fckeditor_php5.php（php5的調(diào)用文件）、fckstyles.xml（樣式）、fcktemplates.xml（模板）文件和editor文件夾。
2、editor\lang目錄：存放的是多語言配置文件，因為我們只可能用到en和zh-cn（簡體中文）所以，根據(jù)我的選擇，我刪掉其他的語言配置文件。
3、editor\skins界面目錄：默認帶有三個界面（default：默認界面，加載速度相對較快；office2003：相對pp的界面，不過速度確實要慢些；silver：銀白色界面，加載速度也相對較快），可以自行決定是否刪除其中一兩個。
4、editor\filemanager\browser\default\connectors目錄：存放編輯器所支持的Web動態(tài)語言，我們以php為例所以保留php目錄，test.html文件可以幫助你查看某語言下的上傳設(shè)置等（具體上傳設(shè)置我將在后面的配置作較為詳細講解），可以自行決定是否刪除。
5、editor\filemanager\upload目錄：同理。
到此精簡完成，你會發(fā)現(xiàn)整個編輯器確實“瘦身”不少，呵呵
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
