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

在通常的博客系统中，我们发表文章的时候，在数据库中存储的一般不仅仅是文章的文字，还包括文章的样式，而且很多时候都是所见即所得的效果。这就要求我们以html+文字这样存进数据库中，通过查找资料，可以用专门的文字编辑器可以实现，使用方法如下：

 

 

FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用。它可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合。“FCKeditor”名称中的“FCK” 是这个编辑器的作者的名字FredericoCaldeira 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页面中添加一条注册指令<%@ RegisterAssembly="FredCK.FCKeditorV2"Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2"%>就可以使用了。

　　<FCKeditorV2:FCKeditorID="FCKeditor1" runat="server">

　　</FCKeditorV2:FCKeditor>

　　但是，如果就这样访问页面的话，FCKEditor所在的区域将会出现404（File Not Found）的错误。这是因为还没有FCKEditor所要使用的资源文件。请看下一步：

　　2、指定资源文件的位置

　　把下载到的FCKEditor解压到你的ASP dot NET应用程序下的任意位置，如应用程序根目录下的fckeditor。然后修改页面中控件的声明为：

　　<FCKeditorV2:FCKeditorID="FCKeditor1" runat="server"BasePath="~/fckeditor/">

　　</FCKeditorV2:FCKeditor>

　　这里的BasePath用来指定FCKEditor资源文件（其中包含有JavaScript脚本、用于显示FCKEditor工具栏的PNG图片等）的位置，其值取决于你把FCKEditor解压的位置。

　　以上步骤完成后，你将在.aspx页面中看到FCKEditor的庐山真面目（注：Google Chrome暂不支持此控件的显示）。

在PHP中调用

　　<?php

　　functionFCKeditor_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 .="&amp;Toolbar={$this->ToolbarSet}" ;

　　$Html .= "<inputtype=/"hidden/" id=/"{$this->InstanceName}/"name=/"{$this->InstanceName}/" value=/"{$HtmlValue}/"style=/"display:none/" />" ;

　　$Html .= "<inputtype=/"hidden/" id=/"{$this->InstanceName}___Config/"value=/"" . $this->GetConfigFieldString() . "/"style=/"display:none/" />" ;

　　$Html .= "<iframeid=/"{$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 .= "<textareaname=/"{$this->InstanceName}/" rows=/"4/"cols=/"40/" style=/"width: {$WidthCSS}; height:{$HeightCSS}/">{$HtmlValue}</textarea>" ;

　　}

　　return $Html ;

　　}

　　public functionIsCompatible()

　　{

　　return FCKeditor_IsCompatibleBrowser();

　　}

　　public functionGetConfigFieldString()

　　{

　　$sParams = '' ;

　　$bFirst = true ;

　　foreach ( $this->Config as$sKey => $sValue )

　　{

　　if ( $bFirst == false )

　　$sParams .= '&amp;' ;

　　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 = newFCKeditor('editor') ;//接收时$_POST['........']中的内容

　　$editor->BasePath ="../common/editor/";//FCKEDITOR的路径

　　?>

　　在需要调用的地方<?php$editor->Create();?>

　　接受的文件用$_POST['editor']调用（editor）可在$editor = newFCKeditor('editor')设置

在Asp中调用

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

　　<!--#includefile="../fckeditor.asp"-->

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

　　<%

　　Dim oFCKeditor

　　Set oFCKeditor = NewFCKeditor

　　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:

　　<%@ pagelanguage="java" import="java.util.*"pageEncoding="UTF-8"%>

　　<%@ tagliburi="http://java.fckeditor.net" prefix="FCK" %>

　　<html>

　　<head>

　　<title>FckEditor测试</title>

　　</head>

　　<bodystyle="text-align: center;">

　　FckEditor测试

　　<hr>

　　<formaction="ShowData.jsp" method="post">

　　<FCK:editorinstanceName="test" height="400pt">

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

　　</jsp:attribute>

　　</FCK:editor>

　　<inputtype="submit" value="提交"/>

　　<inputtype="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 byMaven 2 with complete documentation and reports.

　　◆Automatic creation of releasedistribution files (assemblies).

　　◆The library runs now from Servlet 2.4/JSP2.0 and above.

　　◆A complete structure and package reviewhas been done. Base package moved from com.fredck.FCKeditor to net.fckeditor.

　　◆The Server Side Integration requirementsare completely fulfilled.

　　◆The SimpleUploaderServlet functionalityhas been merged into the ConnectorServlet.

　　◆The JSP tag library has been completelyrestructured.

　　◆A more complete and reliable browserdetection code.

　　◆New configuration handling:

　　★No configuration settings in the web.xmlanymore.

　　★The configuration properties can be setin a common properties file or programmatically.

　　★'Convention over conversion', just resetthe properties which don't meet your requirements.

　　◆Introduced the state-of-the-art SLF4Jlogging facade.

　　◆Pluggable interfaces have been introducedto extend the ConnectorServlet. This system provides session or request-basedfunctionality.

　　◆JUnit test coverage on viable classes.

　　◆Clean and safe parameter handling andabstraction.

　　◆A lot of code performance improvementsand tweaks.