***博客系统文章的数据库存储方式

在通常的博客系统中，我们发表文章的时候，在数据库中存储的一般不仅仅是文章的文字，还包括文章的样式，而且很多时候都是所见即所得的效果。这就要求我们以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中调用

　　首先在文件顶部包含主文件

　　在适当的地方插入文本区域内容:

　　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-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>

　　FckEditor测试

　　<hr>

　　<FCK:editor instanceName="test" height="400pt">

　　<jsp:attribute name="value"> 这里是http://baike.baidu.com/">数据测试

　　</jsp:attribute>

　　</FCK:editor>

　　</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