-
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替代。
中文解釋編輯
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實體
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
.=
"&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
.=
'&'
;
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: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";