FCKeditor算是現在用得比較多的編輯器之一了,現在最新版本爲2.6.3,官方網站:http://www.FCKeditor.net
現在比較流行的編輯器主要有:ewebeditor,tiny mce,FCKeditor
記得有人曾說過這樣一段話:
初學者喜歡:ewebeditor 官方網站:http://www.ewebeditor.net/
美化者喜歡:tiny mce 官方網站:http://tinymce.moxiecode.com/
而專業人士則更中意:FCKeditor
的確,ewebeditor比較容易上手,是國人開發的,中文說明文檔比較豐富；tiny mce美化方面做得比較好,看起來比較漂亮,而FCKeditor相對來說修改設置方面有些麻煩. 不過這三個編輯器功能都比較全,用哪個主要還是看個人愛好.
這裏討論的是用調用JS的方式調用這個編輯器,所以不存在服務器端語言,當然也就沒有上傳文件方面的設置.現在比較多的人在用FCKeditor時,都會把上傳這塊去掉,然後自己單獨加個上傳的,或許是出於安全方面考慮的吧.上傳的設置方式網上比較多這方面的文章.
開始設置FCKeditor,先下載相應的版本.這裏以2.6.3版爲例
一.減肥
官方提供的是全部功能及適應全部語言的,所以針對自己的須要進行相應的減肥.
先從根目錄開始減.如圖:
這個是全部文件,把裏面灰色的文件全部刪除,即只留下六個文件(夾):
fckconfig.js fckeditor.js fckpackager.xml fckstyles.xml fcktemplates.xml editor(文件夾)
然後是editor文件夾,把 _source 文件夾刪除.
接下來是editor/filemanager/connectors,因爲這裏沒用到服務端操作,所以把裏面的文件(夾)全部刪除
然後editor/lang,選擇自己須要的語言包,把其它不須要的全部刪除即可.一般只保留 en.js zh.js zh-cn.js; zh-cn.js是簡體中文語言包,en.js是英文，zh.js是繁體中文
editor/skins這個是皮膚文件夾,一般有三個皮膚,選擇自己喜歡的皮膚,如保留default,其它兩個文件夾刪除,或是喜歡office2003,把其它兩個刪除,然後把office2003改名成default就行了.也可以不在這裏改文件夾名,而留在設置文件中把default改成office2003,不過推薦改文件夾名,來得快點.
說明:fckeditor默認的這種奶黃色,如果不想用默認的，那就選那個silver，因爲銀色也就是灰色和任何顏色配起來都不會難看，而那個office2003的皮膚，反正我是非常不喜歡的，並且圖片相對也比較大，增加了下載時間
二.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','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About']
]
在默認情況下，FCKeditor會調用上面定義的所有工具欄按鈕。可以根據自己的需求進行設置。對上面的配置選項功能說明進行彙總。
代碼名稱 功能 代碼名稱 功能
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 增加縮進 Blockquote 塊引用
CreateDiv 創建DIV JustifyLeft 左對齊
JustifyCenter 居中對齊 JustifyRight 右對齊
JustifyFull 兩端對齊 Link 插入／編輯鏈接
Unlink 取消鏈接 Anchor 插入／編輯錨點鏈接
Image 插入編輯圖像 Flash 插入／編輯Flash
Table 插入／編輯表格 Rule 插入水平線
Smiley 插入表情 SpecialChar 插入特殊符號
PageBreak 插入分頁 Style 樣式
FontFormat 格式 FontName 字體
FontSize 大小 TextColor 文本顏色
BGColor 背景顏色 FitWindow 全屏編輯
ShowBlocks 顯示區域 About 關於Fuckeditor
工具欄配置選項功能進行彙總
你也可以創建一個非默認的工具欄按鈕設置，您可以從FCKConfig.ToolbarSets["Default"]當中的代碼重新複製一份，然後將Default改成您想要的名字。
注意：fckconfig.js配置選項採用JavaScript語法，如果您不懂JavaScript的話，請在配置之前進行備份。
如果你的編輯器還用在網站前臺的話，比如說用於留言本或是日記回覆時，那就不得不考慮安全了，在前臺千萬不要使用Default的toolbar，要麼自定義一下功能，要麼就用系統已經定義好的Basic，也就是基本的toolbar,這裏配置了一個適合於大部份網站使用的工欄目按鈕
FCKConfig.ToolbarSets["MyDesign"] = [
['Source','DocProps','-','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Style','FontFormat','FontName','FontSize'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks']] ;
要想使用自定義的工具欄按鈕，必須在創建FCKeditor實例後設置使用的工具欄選項。
oFCKeditor.ToolbarSet = "MyDesign"; //JavaScript
接下來，我們對常用的一些設置選項功能進行總結，可參考fckeditor目錄下fckconfig.js文件進行閱讀
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 顯示錶情窗口的高度，單位像素
FCKConfig.TabSpaces 編輯器域內是否可以使用Tab鍵,1爲可以,默認爲0(不可以)
更多設置選項請參考>>
接下來是編輯器位置的設置，我的習慣是把editor放在根目錄下，最開始所述的六個文件也放在根目錄下（Tips:建議放在根目錄下，並且建議使用時設置路徑也採用絕對路徑，如"/fckeditor/"，而我的習慣的設置是"/"），這樣有利於fckeditor的更新升級，並且網站下所有文件夾都可以任意調用，不存在其它文件夾名變了而其它地方就無法使用編輯器的問題。
打開fckeditor.js文件，找到 this.BasePath = '/fckeditor/' ;改爲 this.BasePath = '/' ;
編輯器域內默認的顯示字體爲12px，想要修改可以通過修改樣式表來達到要求，打開editor/css/fck_editorarea.css，把第4行改爲 font-size: 14px;即可。 14即爲你想要的字體的大小
FCKEDITOR類參考:(fckeditor.js)
下面是用來在頁面中建立編輯器的FCKEDITOR類的說明
構造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:編輯器的唯一名稱(相當於ID)
WIDTH:寬度
HEIGHT:高度
toolbarSet:工具條集合的名稱
value:編輯器初始化內容
來源：(http://blog.sina.com.cn/s/blog_5c012cc00100b70z.html) - FCKeditor2.6.3操作說明,基本設置,精簡以及JS調用方_risun_新浪博客
屬性:
instanceName:編輯器實例名
width:寬度,默認值爲100%
height:高度,默認值是200
ToolbarSet:工具集名稱,參考FCKCONFIG.JS,默認值是Default
value:初始化編輯器的HTML代碼,默認值爲空
BasePath:編輯器的基路徑,默認爲/Fckeditor/文件夾,注意,儘量不要使用相對路徑.最好能用相對於站點根路徑的表示方法,要以/結尾
CheckBrowser:是否在顯示編輯器前檢查瀏覽器兼容性,默認爲true
DisplayErrors:是否顯示提示錯誤,默爲true;
集合:
Config[Key]=value;
這個集合用於更改配置中某一項的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";
方法:
Create()
建立並輸出編輯器
RepaceTextArea(TextAreaName)
用編輯器來替換對應的文本框
自定義樣式列表
FCKEDITOR的樣式工具欄中提供了預定義的樣式,樣式是通過XML文件定義的,默認的XML樣式文件存在於FCkEditor根文件夾下的FckStyls.xml文件中
這個XML文件的結構分析如下:
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>
每一個STYLE標記定義一種樣式,NAME是顯示在下拉列表中的樣式名,ELEMENT屬性指定此樣式所適用的對象,因爲FCKEDITOR中的樣式是上下文敏感的,也就是說,選擇不同的對象,僅會顯示針對這類對象定義的樣式
三.創建自己的在線編輯器(JS版)
第一步我們需要做的就是在頁面的HEAD段中放入SCRIPT標記以引入JAVASCRIPT整合模塊.例如:
<script type="text/javascript" src="fckeditor.js"></script>,路徑根據自己的目錄進行相應修改即可.
第二步 現在,FCKEDITOR類已經可以使用了.有兩個方法在頁面中建立一個FCKEDITOR編輯器:
方法1:內聯方式:在頁面的FORM標記內需要插入編輯器的地方置入以下代碼:
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'logbody' ) ;
oFCKeditor.BasePath = '/' ;
oFCKeditor.ToolbarSet = 'Basic' ;
oFCKeditor.Width = '100%' ;
oFCKeditor.Height = '400' ;
oFCKeditor.Value = '' ;
oFCKeditor.Create() ;
</script>
如:<label for="title">標題：</label>
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'title' ) ;
oFCKeditor.Create() ;
</script> 這樣就創建了一個名爲title的編輯框
如果要給它附值的話,就用:oFCKeditor.Value = '這裏是內容' ;
在測試的時候,發現用上面這個方法會出現幾個問題,就是當內容裏有 ' " 回車時,就顯示不了內容.所以推薦使用第二個方法
方法2:TEXTAREA標記替換法:在頁面的ONLOAD事件中,添加以下代碼以替換一個已經存在的TEXTAREA標記,這樣就不會出現方法1的問題了.如:
<html>
<head>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>
這樣,ID爲MyTextarea的文本區域就會成爲編輯框了.這個方法的文本區域的內容可以直接在文本區域內寫.
四.一些常見問題及使用技巧
1、適時打開編輯器
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
很多時候，我們在打開頁面的時候不需要直接打開編輯器，而在用到的時候纔打開，這樣一來有很好的用戶體驗，另一方面可以消除FCK在加載時對頁面打開速度的影響，點擊“Open Editor”按鈕後纔打開編輯器界面。
實現原理：
使用JAVASCRIPT版的FCK，在頁面加載時（未打開FCK），創建一個隱藏的TextArea域，這個TextArea
的name和ID要和創建的FCK實例名稱一致，然後點擊”Open Editor”按鈕時，通過調用一段函數，使用
FCK的ReplaceTextarea()方法來創建FCKeditor，代碼如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript”>
<!–
function showFCK(){
var FCKeditor = new FCKeditor( ‘fbContent’ ) ;
oFCKeditor.BasePath = ‘/FCKeditor/’ ;
oFCKeditor.ToolbarSet = ‘Basic’ ;
oFCKeditor.Width = ‘100%’ ;
oFCKeditor.Height = ‘200′ ;
oFCKeditor.ReplaceTextarea() ;
}
//–>
</script>
<textarea name=”fbContent” id=”fbContent”></textarea>
2、使用FCKeditor 的 API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor編輯器，提供了非常豐富的API，用於給End User實現很多想要定製的功能，比如最基本的數據驗證，如何在提交的時候用JS判斷當前編輯器區域內是否有內容，FCK的API提供了GetLength()方法；
再比如如何通過腳本向FCK裏插入內容，使用InsertHTML()等；
還有，在用戶定製功能時，中間步驟可能要執行FCK的一些內嵌操作，那就用ExecuteCommand()方法。
詳細的API列表，請查看FCKeditor的Wiki。而常用的API，請查看FCK壓縮包裏的_samples/html/sample08.html。此處就不貼代碼了。
3、外聯編輯條（多個編輯域共用一個編輯條）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
這個功能是2.3版本纔開始提供的，以前版本的FCKeditor要在同一個頁面裏用多個編輯器的話，得一個個創建，現在有了這個外聯功能，就不用那麼麻煩了，只需要把工具條放在一個適當的位置，後面就可以無限制的創建編輯域了。
要實現這種功能呢，需要先在頁面中定義一個工具條的容器：<div id=”xToolbar”></div>，然後再根據這個容器的id屬性進行設置。
JAVASCRIPT實現代碼：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<div id=”xToolbar”></div>
FCKeditor 1:
<script. type=”text/javascript”>
<!–
// Automatically calculates the editor base path based on the _samples directory.
// This is usefull only for these samples. A real application should use something like this:
// oFCKeditor.BasePath = ‘/fckeditor/’; // ‘/fckeditor/’ is the default value.
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf(’_samples’));
var FCKeditor = new FCKeditor( ‘FCKeditor_1′ );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;
oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’;
oFCKeditor.Create();
//–>
</script>
<br />
FCKeditor 2:
<script. type=”text/javascript”>
<!–
FCKeditor = new FCKeditor( ‘FCKeditor_2′ );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;
oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’;
oFCKeditor.Create();
//–>
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
參考資料:
http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide
http://blog.chinaunix.net/u2/69227/showart_697612.html
http://www.cnblogs.com/timy/archive/2008/08/21/1273497.html
http://blog.8s8s.net/read.php?315
來源：(http://blog.sina.com.cn/s/blog_5c012cc00100b70z.html) - FCKeditor2.6.3操作說明,基本設置,精簡以及JS調用方_risun_新浪博客