在通常的博客系統中，我們發表文章的時候，在數據庫中存儲的一般不僅僅是文章的文字，還包括文章的樣式，而且很多時候都是所見即所得的效果。這就要求我們以html+文字這樣存進數據庫中，通過查找資料，可以用專門的文字編輯器可以實現，使用方法如下：
FCKeditor是一個專門使用在網頁上屬於開放源代碼的所見即所得文字編輯器。它志於輕量化，不需要太復雜的安裝步驟即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的編程語言相結合。“FCKeditor”名稱中的“FCK” 是這個編輯器的作者的名字Frederico Caldeira Knabben的縮寫。
什么是FckEditor
FCKeditor 相容於絕大部分的網頁瀏覽器，像是 : Internet Explorer 5.5+ (Windows)、Mozilla Firefox 1.0+、Mozilla 1.3+ 和 Netscape 7+。在未來的版本也將會加入對 Opera 的支持。
FckEditor更名CKEditor
著名的開源網頁編輯軟件FCKEditor在09年發布更新到3.0，並改名為CKEditor。原來叫FCK，是因為最初的開發者叫Frederico Calderia Knabben；現在叫CK，意指"Content and Knowledge"。新版的編輯器的更新包括：新的用戶界面，一個支持Plug-in的Javascript API，並提供對視覺障礙者的使用支持。"
據官方的解釋，CK是對FCK的代碼的完全重寫，而且此項工作從2007年就開始了，並在今年初發表了多個測試版。至此，為大家服務長達6年的FCKeditor將被CKeditor替代。
配置中文解釋
AutoDetectLanguage=true/false 自動檢測語言
BaseHref="" 相對鏈接的基地址
ContentLangDirection="ltr/rtl" 默認文字方向
ContextMenu=字符串數組,右鍵菜單的內容
CustomConfigurationsPath="" 自定義配置文件路徑和名稱
Debug=true/false 是否開啟調試功能,這樣,當調用FCKDebug.Output()時,會在調試窗中輸出內容
DefaultLanguage="" 缺省語言
EditorAreaCss="" 編輯區的樣式表文件
EnableSourceXHTML=true/false 為TRUE時,當由可視化界面切換到代碼頁時,把HTML處理成XHTML
EnableXHTML=true/false 是否允許使用XHTML取代HTML
FillEmptyBlocks=true/false 使用這個功能,可以將空的塊級元素用空格來替代
FontColors="" 設置顯示顏色拾取器時文字顏色列表
FontFormats="" 設置顯示在文字格式列表中的命名
FontNames="" 字體列表中的字體名
FontSizes="" 字體大小中的字號列表
ForcePasteAsPlainText=true/false 強制粘貼為純文本
ForceSimpleAmpersand=true/false 是否不把&符號轉換為XML實體
FormatIndentator="" 當在源碼格式下縮進代碼使用的字符
FormatOutput=true/false 當輸出內容時是否自動格式化代碼
FormatSource=true/false 在切換到代碼視圖時是否自動格式化代碼
FullPage=true/false 是否允許編輯整個HTML文件,還是僅允許編輯BODY間的內容
GeckoUseSPAN=true/false 是否允許SPAN標記代替B,I,U標記
IeSpellDownloadUrl=""下載拼寫檢查器的網址
ImageBrowser=true/false 是否允許瀏覽服務器功能
ImageBrowserURL="" 瀏覽服務器時運行的URL
ImageBrowserWindowHeight="" 圖像瀏覽器窗口高度
ImageBrowserWindowWidth="" 圖像瀏覽器窗口寬度
LinkBrowser=true/false 是否允許在插入鏈接時瀏覽服務器
LinkBrowserURL="" 插入鏈接時瀏覽服務器的URL
LinkBrowserWindowHeight=""鏈接目標瀏覽器窗口高度
LinkBrowserWindowWidth=""鏈接目標瀏覽器窗口寬度
Plugins=object 注冊插件
PluginsPath="" 插件文件夾
ShowBorders=true/false 合並邊框
SkinPath="" 皮膚文件夾位置
SmileyColumns=12 圖符窗列數
SmileyImages=字符數組 圖符窗中圖片文件名數組
SmileyPath="" 圖符文件夾路徑
SmileyWindowHeight 圖符窗口高度
SmileyWindowWidth 圖符窗口寬度
SpellChecker="ieSpell/Spellerpages" 設置拼寫檢查器
StartupFocus=true/false 開啟時FOCUS到編輯器
StylesXmlPath="" 設置定義CSS樣式列表的XML文件的位置
TabSpaces=4 TAB鍵產生的空格字符數
ToolBarCanCollapse=true/false 是否允許展開/折疊工具欄
ToolbarSets=object 允許使用TOOLBAR集合
ToolbarStartExpanded=true/false 開啟是TOOLBAR是否展開
UseBROnCarriageReturn=true/false 當回車時是產生BR標記還是P或者DIV標記
在ASP dot NET中調用
在ASP dot NET中調用其實是很簡單的事，FCKEditor有一個FCKeditor dor Net （一個ASP dot NET 服務器控件），可以很容易地與ASP dot NET集成。
首先去FCKEditor官網下載FCKEditor和FCKeditor dot Net服務器控件。
按以下步驟在ASP dot NET頁面是調用：
1、為ASP dot NET應用程序添加FCKeditor dot Control的引用。
方法一、解壓FCKeditor dot Net，在Visual Sutdio的工具箱中右擊→添加項目，在打開的對話框中點擊“瀏覽”按鈕，定位到解壓后的FCKeditor dot Net控件的/bin/Release/2.0/下的FredCK.FCKeditorV2.dll文件，點擊確定。此時，Visual Studio的工具箱中就會出現FCKEditor，就要以像其他控件一樣使用了。
方法二、把/bin/Release/2.0/下的FredCK.FCKeditorV2.dll文件復制到ASP dot NET應用程序的Bin文件夾下，然后在要調用FCKEditor的.aspx頁面中添加一條注冊指令<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>就可以使用了。
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server">
</FCKeditorV2:FCKeditor>
但是，如果就這樣訪問頁面的話，FCKEditor所在的區域將會出現404（File Not Found）的錯誤。這是因為還沒有FCKEditor所要使用的資源文件。請看下一步：
2、指定資源文件的位置
把下載到的FCKEditor解壓到你的ASP dot NET應用程序下的任意位置，如應用程序根目錄下的fckeditor。然后修改頁面中控件的聲明為：
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" BasePath="~/fckeditor/">
</FCKeditorV2:FCKeditor>
這里的BasePath用來指定FCKEditor資源文件（其中包含有JavaScript腳本、用於顯示FCKEditor工具欄的PNG圖片等）的位置，其值取決於你把FCKEditor解壓的位置。
以上步驟完成后，你將在.aspx頁面中看到FCKEditor的廬山真面目（注：Google Chrome暫不支持此控件的顯示）。
在PHP中調用
<?php
function FCKeditor_IsCompatibleBrowser()
{
if ( isset( $_SERVER ) ) {
$sAgent = $_SERVER['HTTP_USER_AGENT'] ;
}
else {
global $HTTP_SERVER_VARS ;
if ( isset( $HTTP_SERVER_VARS ) ) {
$sAgent = $HTTP_SERVER_VARS['HTTP_USER_AGENT'] ;
}
else {
global $HTTP_USER_AGENT ;
$sAgent = $HTTP_USER_AGENT ;
}
}
if ( strpos($sAgent, 'MSIE') !== false && strpos($sAgent, 'mac') === false && strpos($sAgent, 'Opera') === false )
{
$iVersion = (float)substr($sAgent, strpos($sAgent, 'MSIE') + 5, 3) ;
return ($iVersion >= 5.5) ;
}
else if ( strpos($sAgent, 'Gecko/') !== false )
{
$iVersion = (int)substr($sAgent, strpos($sAgent, 'Gecko/') + 6, 8) ;
return ($iVersion >= 20030210) ;
}
else if ( strpos($sAgent, 'Opera/') !== false )
{
$fVersion = (float)substr($sAgent, strpos($sAgent, 'Opera/') + 6, 4) ;
return ($fVersion >= 9.5) ;
}
else if ( preg_match( "|AppleWebKit/(/d+)|i", $sAgent, $matches ) )
{
$iVersion = $matches[1] ;
return ( $matches[1] >= 522 ) ;
}
else
return false ;
}
class FCKeditor
{
public $InstanceName ;
public $BasePath ;
public $Width ;
public $Height ;
public $ToolbarSet ;
public $Value ;
public $Config ;
public function __construct( $instanceName )
{
$this->InstanceName = $instanceName ;
$this->BasePath = '../common/editor/' ;
$this->Width = '100%' ;
$this->Height = '400' ;
$this->ToolbarSet = 'Default' ;
$this->Value = '' ;
$this->Config = array() ;
}
public function Create()
{
echo $this->CreateHtml() ;
}
public function CreateHtml()
{
$HtmlValue = htmlspecialchars( $this->Value ) ;
$Html = '' ;
if ( $this->IsCompatible() )
{
if ( isset( $_GET['fcksource'] ) && $_GET['fcksource'] == "true" )
$File = 'fckeditor.original.html' ;
else
$File = 'fckeditor.html' ;
$Link = "{$this->BasePath}editor/{$File}?InstanceName={$this->InstanceName}" ;
if ( $this->ToolbarSet != '' )
$Link .= "&Toolbar={$this->ToolbarSet}" ;
$Html .= "<input type=/"hidden/" id=/"{$this->InstanceName}/" name=/"{$this->InstanceName}/" value=/"{$HtmlValue}/" style=/"display:none/" />" ;
$Html .= "<input type=/"hidden/" id=/"{$this->InstanceName}___Config/" value=/"" . $this->GetConfigFieldString() . "/" style=/"display:none/" />" ;
$Html .= "<iframe id=/"{$this->InstanceName}___Frame/" src=/"{$Link}/" width=/"{$this->Width}/" height=/"{$this->Height}/" frameborder=/"0/" scrolling=/"no/"></iframe>" ;
}
else
{
if ( strpos( $this->Width, '%' ) === false )
$WidthCSS = $this->Width . 'px' ;
else
$WidthCSS = $this->Width ;
if ( strpos( $this->Height, '%' ) === false )
$HeightCSS = $this->Height . 'px' ;
else
$HeightCSS = $this->Height ;
$Html .= "<textarea name=/"{$this->InstanceName}/" rows=/"4/" cols=/"40/" style=/"width: {$WidthCSS}; height: {$HeightCSS}/">{$HtmlValue}</textarea>" ;
}
return $Html ;
}
public function IsCompatible()
{
return FCKeditor_IsCompatibleBrowser() ;
}
public function GetConfigFieldString()
{
$sParams = '' ;
$bFirst = true ;
foreach ( $this->Config as $sKey => $sValue )
{
if ( $bFirst == false )
$sParams .= '&' ;
else
$bFirst = false ;
if ( $sValue === true )
$sParams .= $this->EncodeConfig( $sKey ) . '=true' ;
else if ( $sValue === false )
$sParams .= $this->EncodeConfig( $sKey ) . '=false' ;
else
$sParams .= $this->EncodeConfig( $sKey ) . '=' . $this->EncodeConfig( $sValue ) ;
}
return $sParams ;
}
public function EncodeConfig( $valueToEncode )
{
$chars = array(
'&' => '%26',
'=' => '%3D',
'"' => '%22' ) ;
return strtr( $valueToEncode, $chars ) ;
}
}
$editor = new FCKeditor('editor') ;//接收時$_POST['........']中的內容
$editor->BasePath = "../common/editor/";//FCKEDITOR的路徑
?>
在需要調用的地方<?php $editor->Create();?>
接受的文件用$_POST['editor']調用（editor）可在$editor = new FCKeditor('editor')設置
在Asp中調用
首先在文件頂部包含主文件
<!--#include file="../fckeditor.asp"-->
在適當的地方插入文本區域內容:
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.ToolbarSet = "A" ’使用工具條
oFCKeditor.Width = "100%" ’寬度
oFCKeditor.Height = "400" ’高度
oFCKeditor.Value = ’源文件
oFCKeditor.Create "content" ’文本框名稱
%>
在JSP中調用
web.xml配置：
FckEditor for java 2.4版本
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
在JSP中使用標簽調用demo:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
<html>
<head>
<title>FckEditor測試</title>
</head>
<body style="text-align: center;">
FckEditor測試
<hr>
<form action="ShowData.jsp" method="post">
<FCK:editor instanceName="test" height="400pt">
<jsp:attribute name="value"> 這里是http://baike.baidu.com/">數據測試
</jsp:attribute>
</FCK:editor>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
自定義工具條
/* Source="頁面源碼"
DocProps="頁面屬性"
Save="保存"
NewPage="新建"
Preview="預覽"
Templates="模版"
Cut="剪切"
Copy="拷貝"
Paste="粘貼"
PasteText="粘貼為無格式的文本"
PasteWord="粘貼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="增加縮進"
JustifyLeft="左對齊"
JustifyCenter="居中對齊"
JustifyRight="右對齊"
JustifyFull="分散對齊"
Link="鏈接"
Unlink="刪除鏈接"
Anchor="插入/刪除錨點"
Image="上傳圖片"
Flash="上傳動畫"
Table="插入表格"
Rule="插入水平線"
Smiley="插入表情"
SpecialChar="插入特殊字符"
PageBreak="插入分頁符"
Style="樣式"
FontFormat="格式"
FontName="字體"
FontSize="大小"
TextColor="字體顏色"
BGColor="背景色"
FitWindow="全屏編輯"
About="關於我們"
*/
也就是fckeditor總配置文件，位於根目錄下的fckconfig.js文件。請根據下面的列表進行（以fckeditor 2.0版的為准）：找到第20行FCKConfig.DefaultLanguage = 'en' ;改為 FCKConfig.DefaultLanguage = 'zh-cn' ;設置默認語言為簡體中文
找到第40行 FCKConfig.TabSpaces = 0 ; 改為FCKConfig.TabSpaces = 1 ; 即在編輯器域內可以使用Tab鍵。
如果你的編輯器還用在網站前台的話，比如說用於留言本或是日記回復時，那就不得不考慮安全了，在前台千萬不要使用Default的toolbar，要么自定義一下功能，要么就用系統已經定義好的Basic，也就是基本的toolbar，
找到第64行：
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']
] ;
這是我改過的Basic，把圖像功能去掉，把添加鏈接功能去掉，因為圖像和鏈接和flash和圖像按鈕添加功能都能讓前台頁直接訪問和上傳文件，要是這兒不改直接給你上傳個木馬還不馬上玩完？
一下為全部顯示工具欄顯示的示例:
FCKConfig.ToolbarSets["Default"] = [//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’]
] ;
用戶根據需要自行配置
官方網站
http://www.fckeditor.net
最新版本
目前FCKeditor已發展到3.0，並更名為CKEditor，最新版本是CKEditor 3.6。
CKEditor是FCKeditor的一個完全重寫版本，加載更快更方便使用。
FCKeditor最后版本為2.6.6
fckeditor for java最新版本為2.4
相對於2.3有如下改變：
◆The integration pack is now managed by Maven 2 with complete documentation and reports.
◆Automatic creation of release distribution files (assemblies).
◆The library runs now from Servlet 2.4/JSP 2.0 and above.
◆A complete structure and package review has been done. Base package moved from com.fredck.FCKeditor to net.fckeditor.
◆The Server Side Integration requirements are completely fulfilled.
◆The SimpleUploaderServlet functionality has been merged into the ConnectorServlet.
◆The JSP tag library has been completely restructured.
◆A more complete and reliable browser detection code.
◆New configuration handling:
★No configuration settings in the web.xml anymore.
★The configuration properties can be set in a common properties file or programmatically.
★'Convention over conversion', just reset the properties which don't meet your requirements.
◆Introduced the state-of-the-art SLF4J logging facade.
◆Pluggable interfaces have been introduced to extend the ConnectorServlet. This system provides session or request-based functionality.
◆JUnit test coverage on viable classes.
◆Clean and safe parameter handling and abstraction.
◆A lot of code performance improvements and tweaks.