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

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

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

如何联系我:【万里虎】www.bravetiger.cn 【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起) 【博客】http://www.cnblogs.com/kenshinobiy/
目录
相关文章
|
4月前
|
Cloud Native 数据管理 数据挖掘
核心系统转型问题之阿里云数据库用户需求的通用性和差异性如何平衡
核心系统转型问题之阿里云数据库用户需求的通用性和差异性如何平衡
|
28天前
|
关系型数据库 MySQL Linux
Linux系统如何设置自启动服务在MySQL数据库启动后执行?
【10月更文挑战第25天】Linux系统如何设置自启动服务在MySQL数据库启动后执行?
72 3
|
27天前
|
Java 数据库连接 数据库
深入探讨Java连接池技术如何通过复用数据库连接、减少连接建立和断开的开销,从而显著提升系统性能
在Java应用开发中,数据库操作常成为性能瓶颈。本文通过问题解答形式,深入探讨Java连接池技术如何通过复用数据库连接、减少连接建立和断开的开销,从而显著提升系统性能。文章介绍了连接池的优势、选择和使用方法,以及优化配置的技巧。
27 1
|
2月前
|
SQL JavaScript 关系型数据库
node博客小项目:接口开发、连接mysql数据库
【10月更文挑战第14天】node博客小项目:接口开发、连接mysql数据库
|
2月前
|
SQL 存储 关系型数据库
数据储存数据库管理系统(DBMS)
【10月更文挑战第11天】
103 3
|
2月前
|
存储 关系型数据库 MySQL
PACS系统 中 dicom 文件在mysql 8.0 数据库中的 存储和读取(pydicom 库使用)
PACS系统 中 dicom 文件在mysql 8.0 数据库中的 存储和读取(pydicom 库使用)
34 2
|
2月前
|
安全 NoSQL 关系型数据库
阿里云数据库:构建高性能与安全的数据管理系统
在企业数字化转型过程中,数据库是支撑企业业务运转的核心。随着数据量的急剧增长和数据处理需求的不断增加,企业需要一个既能提供高性能又能保障数据安全的数据库解决方案。阿里云数据库产品为企业提供了一站式的数据管理服务,涵盖关系型、非关系型、内存数据库等多种类型,帮助企业构建高效的数据基础设施。
69 2
|
3月前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
本文介绍了一个基于Spring Boot和Vue.js实现的在线考试系统。随着在线教育的发展,在线考试系统的重要性日益凸显。该系统不仅能提高教学效率,减轻教师负担,还为学生提供了灵活便捷的考试方式。技术栈包括Spring Boot、Vue.js、Element-UI等,支持多种角色登录,具备考试管理、题库管理、成绩查询等功能。系统采用前后端分离架构,具备高性能和扩展性,未来可进一步优化并引入AI技术提升智能化水平。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
|
3月前
|
Java 关系型数据库 MySQL
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
本文介绍了一款基于Spring Boot和JSP技术的房屋租赁系统,旨在通过自动化和信息化手段提升房屋管理效率,优化租户体验。系统采用JDK 1.8、Maven 3.6、MySQL 8.0、JSP、Layui和Spring Boot 2.0等技术栈,实现了高效的房源管理和便捷的租户服务。通过该系统,房东可以轻松管理房源,租户可以快速找到合适的住所,双方都能享受数字化带来的便利。未来,系统将持续优化升级,提供更多完善的服务。
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
|
3月前
|
存储 SQL 关系型数据库
一篇文章搞懂MySQL的分库分表,从拆分场景、目标评估、拆分方案、不停机迁移、一致性补偿等方面详细阐述MySQL数据库的分库分表方案
MySQL如何进行分库分表、数据迁移?从相关概念、使用场景、拆分方式、分表字段选择、数据一致性校验等角度阐述MySQL数据库的分库分表方案。
431 15
一篇文章搞懂MySQL的分库分表,从拆分场景、目标评估、拆分方案、不停机迁移、一致性补偿等方面详细阐述MySQL数据库的分库分表方案