在通常的博客系统中，我们发表文章的时候，在数据库中存储的一般不仅仅是文章的文字，还包括文章的样式，而且很多时候都是所见即所得的效果。这就要求我们以html+文字这样存进数据库中，通过查找资料，可以用专门的文字编辑器可以实现，使用方法如下：
FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。
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中调用其实是很简单的事，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
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')设置
首先在文件顶部包含主文件
<!--#include file="../fckeditor.asp"-->
在适当的地方插入文本区域内容:
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.ToolbarSet = "A" ’使用工具条
oFCKeditor.Width = "100%" ’宽度
oFCKeditor.Height = "400" ’高度
oFCKeditor.Value = ’源文件
oFCKeditor.Create "content" ’文本框名称
%>
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.
