FCKeditor使用方法技术详解
轉載自?http://www.cnblogs.com/cchyao/archive/2010/07/01/1769204.html
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目錄：同理。?
到此精簡完成，你會發現整個編輯器確實“瘦身”不少，呵呵
?
轉載于:https://www.cnblogs.com/yangcclg/p/5488329.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的FCKeditor使用方法技术详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信红包退款为什么没通知
- 下一篇： 学习练习 java 二分查找法