FCKEDITOR

FCKeditor是目前最优秀的可见即可得网页 编辑器之一，它采用 JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了FCKeditor。

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替代。

中文名

网页编辑器

外文名

FCKeditor

兼容性

相容于绝大部分的 网页浏览器

更    名

CKEditor

属    性

网页编辑器

目录

1. 1 中文解释
2. 2 调用种类
3. 3 工具条
4. 4 最新版本

中文解释

编辑

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 dot 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的庐山真面目。

在PHP中调用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128

<?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); } elseif ( strpos ( $sAgent , 'Gecko/' )!==false) { $iVersion =(int) substr ( $sAgent , strpos ( $sAgent , 'Gecko/' )+6,8); return ( $iVersion >=20030210); } elseif ( strpos ( $sAgent , 'Opera/' )!==false) { $fVersion =(float) substr ( $sAgent , strpos ( $sAgent , 'Opera/' )+6,4); return ( $fVersion >=9.5); } elseif (preg_match( "|AppleWebKit/(\d+)|i" , $sAgent , $matches )) { $iVersion = $matches [1]; return ( $matches [1]>=522); } else returnfalse; } classFCKeditor { public $InstanceName ; public $BasePath ; public $Width ; public $Height ; public $ToolbarSet ; public $Value ; public $Config ; publicfunction__construct( $instanceName ) { $this ->InstanceName= $instanceName ; $this ->BasePath= '../common/editor/' ; $this ->Width= '100%' ; $this ->Height= '400' ; $this ->ToolbarSet= 'Default' ; $this ->Value= '' ; $this ->Config= array (); } publicfunctionCreate() { echo $this ->CreateHtml(); } publicfunctionCreateHtml() { $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 ; } publicfunctionIsCompatible() { returnFCKeditor_IsCompatibleBrowser(); } publicfunctionGetConfigFieldString() { $sParams = '' ; $bFirst =true; foreach ( $this ->Configas $sKey => $sValue ) { if ( $bFirst ==false) $sParams .= '&amp;' ; else $bFirst =false; if ( $sValue ===true) $sParams .= $this ->EncodeConfig( $sKey ). '=true' ; elseif ( $sValue ===false) $sParams .= $this ->EncodeConfig( $sKey ). '=false' ; else $sParams .= $this ->EncodeConfig( $sKey ). '=' . $this ->EncodeConfig( $sValue ); } return $sParams ; } publicfunctionEncodeConfig( $valueToEncode ) { $chars = array ( '&' => '%26' , '=' => '%3D' , '"' => '%22' ); returnstrtr( $valueToEncode , $chars ); } } $editor =newFCKeditor( 'editor' ); //接收时$_POST['........']中的内容 $editor ->BasePath= "../common/editor/" ; //FCKEDITOR的路径 ?>

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

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

在Asp中调用

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

<!--#include file="../fckeditor.asp"-->

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

1 2 3 4 5 6 7 8 9

<% DimoFCKeditor SetoFCKeditor=NewFCKeditor oFCKeditor.ToolbarSet= "A" ’使用工具条 oFCKeditor.Width= "100%" ’宽度 oFCKeditor.Height= "400" ’高度 oFCKeditor.Value=’源文件 oFCKeditor.Create "content" ’文本框名称 %>

在JSP中调用

web.xml配置：

FckEditor for java 2.4版本

1 2 3 4 5 6 7 8 9 10 11 12 13

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<%@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’]

] ;

用户根据需要自行配置

//去除超链接选显卡 上传

// config.removeDialogTabs = "link:upload;image:Upload";

//去除超链接选显卡 目标

//config.removeDialogTabs = "image:advanced;link:target;"

//去除超链接选显卡 目标 高级 上传 去除flash目标上传

config.removeDialogTabs = "link:advanced;link:target;image:advanced;image:target;link:upload;image:Upload;flash:advanced;image:Link;flash:upload;flash:Upload";

最新版本

编辑

目前FCKeditor已发展到3.0，并更名为CKEditor，最新版本是CKEditor 4.4.5。

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.

2012年11月28日，CKEditor 4 正式版发布，全新外观

CKEditor 团队很高兴的宣布了 CKEditor 4 正式版发布！该版本带来全新的外观、提升代码、即时编辑和其他诸多改进。同时还发布了一个新网站包含扩展中心和名为 CKBuilder 的服务，可用于创建自己的 CKEditor 版本。