CKEDITOR (FCKEDITOR) --- 目前最优秀的可见即可得网页编辑器之一

FCKEDITOR

编辑

同义词 CKEditor一般指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";