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(不可以)