天天看點

FckEditor配置手冊中文教程詳細說明

性能

首先,FCKEDITOR的性能是非常好的,使用者隻需很少的時間就可以載入FCKEDITOR所需檔案.對于其他線上編輯器來說,這幾乎是個很難解決的難

題,因為在開啟編輯器時需要裝載太多的檔案.比如CUTEEDITOR,雖然功能比FCKEDITOR還要強大,可是,它本身也夠龐大了,至于

FREETEXTBOX等,其易用性與FCKEDITOR相比,尚有差距,可以說,FCKEDITOR是一個别具匠心的線上編輯器,它裡面融入了作者高深

的面向對象的JAVASCRIPT功力,集易用性與強大的功能與一體.

.與編輯器相關的所有圖像,腳本以及調用頁

.語言檔案

.編輯器的皮膚檔案

.工具樣的貼圖等

這些将導緻在伺服器和用戶端間産生相當的流量.如果有許多檔案被調用,那麼即便每個檔案很小.也會讓使用者等得不耐煩.

裝載順序

從2.0版開始,編輯器按以下步驟裝載資源:

.基本頁(就是編輯器所在頁)以及裝入編輯器的JS腳本

.用來建立編輯器的腳本

.編輯器的語言和皮膚.

.建立編輯器.

.載入預置的編輯文檔内容.

.從現在開始,使用者可以閱讀和編輯文檔了,不過,拖拽支援以及工具欄都是不可用的

.載入編輯器引擎腳本

.建立工具欄,并且可用

.從現在開始,編輯器的所有功能都已經完整

.載入工具欄圖示

腳本壓縮

在打包任何新版本時,編輯器的JS腳本将會進行預處理.預處理步驟如下:

.移除所有代碼注釋

.移除所有無用的空白字元.

.将腳本合并成幾個檔案

使用上面的方法,我們可以将腳本檔案的大小壓縮到原來的50%.

壓縮後,原始的代碼仍然存在于一個名為_Source的檔案夾中

如何打包?

編輯器已經自帶了打包程式,它位于FCKEDITOR的根檔案夾中_PACKAGER檔案夾中,名為Fckeditor.Packager.exe,将其複制到FCKEDITOR根檔案夾中并運作,即可自動将JS腳本打包并壓縮

需要注意的是該程式是一個.NET程式,必須安裝.NET FRAMEWORK才能使用

想要擷取支援?

如果你捐贈15000歐元,你就可以獲得1年的免費技術支援(比較貴的說,相當于人民币15萬,不過西歐的費用相當驚人)

如何安裝?

1.下載下傳最新版的FCKEDITOR

2.解壓縮到你的站點根檔案夾中名為FCKEDITOR的檔案夾中(名稱必須為FCKEDITOR,因為配置檔案中已經使用此名稱來标示出FCKEDITOR的位置)

3.現在,編輯器就可以使用了,如果想要檢視示範,可以按下面方法通路:

http://<your-site>/FCKeditor/_samples/default.html

注意:你可以将FCKEDITOR放置到任何檔案夾,預設情況下,将其放入到FCKEDITOR檔案夾是最為簡單的方法.如果你放入的檔案夾使用别的名稱,請修改配置檔案夾中編輯器BasePath參數,如下所示:

oFckeditor.BasePath="/Components/fckeditor/";

另外,FCKEDITOR檔案夾中所有以下劃線開頭的檔案夾及檔案,都是可選的,可以安全的從你的釋出中删除.它們并不是編輯器運作時必需的

如何将FCKEDITOR整合進我的頁面?

由于目前的版本提供的FCKEDITOR僅提供了JAVASCRIPT式的整合,是以,這裡僅講述如何應用JAVASCRIPT來整合FCKEDITOR到站點中,當然,其他各種語言的整合,你可以參考_samples檔案夾中的例子來完成

1,假如編輯器已經安裝在你的站點的/FCKEDITOR/檔案夾下.那麼,第一步我們需要做的就是在頁面的HEAD段中放入SCRIPT标記以引入JAVASCRIPT整合子產品.例如:

<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>

其中路徑是可更改的

2,現在,FCKEDITOR類已經可以使用了.有兩個方法在頁面中建立一個FCKEDITOR編輯器:

方法1:内聯方式(建議使用):在頁面的FORM标記内需要插入編輯器的地方置入以下代碼:

script type="text/javascript">

var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;

oFCKeditor.Create() ;

</script>

方法2:TEXTAREA标記替換法(不建議使用):在頁面的ONLOAD事件中,添加以下代碼以替換一個已經存在的TEXTAREA标記

<html>

<head>

<script type="text/javascript">

window.onload = function()

{

var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;

oFCKeditor.ReplaceTextarea() ;

}

</head>

<body>

<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>

</body>

</html>

3.現在,編輯器可以使用了

FCKEDITOR類參考:

下面是用來在頁面中建立編輯器的FCKEDITOR類的說明

構造器:

FCKeditor( instanceName[, width, height, toolbarSet, value] )

instanceName:編輯器的唯一名稱(相當于ID)

WIDTH:寬度

HEIGHT:高度

toolbarSet:工具條集合的名稱

value:編輯器初始化内容

屬性:

instanceName:編輯器執行個體名

width:寬度,預設值為100%

height:高度,預設值是200

ToolbarSet:工具集名稱,參考FCKCONFIG.JS,預設值是Default

value:初始化編輯器的HTML代碼,預設值為空

BasePath:編輯器的基路徑,預設為/Fckeditor/檔案夾,注意,盡量不要使用相對路徑.最好能用相對于站點根路徑的表示方法,要以/結尾

CheckBrowser:是否在顯示編輯器前檢查浏覽器相容性,預設為true

DisplayErrors:是否顯示提示錯誤,默為true;

集合:

Config[Key]=value;

這個集合用于更改配置中某一項的值,如

oFckeditor.Config["DefaultLanguage"]="pt-br";

方法:

Create()

建立并輸出編輯器

RepaceTextArea(TextAreaName)

用編輯器來替換對應的文本框

如何配置FCKEDITOR?

FCKEDITOR提供了一套用于定制其外觀,特性及行為的設定集.主配置檔案名為Fckconfig.js

你既可以編輯主配置檔案,也可以自己定義單獨的配置檔案.配置檔案使用JAVASCRIPT文法.

修改後,在建立編輯器時,可以使用以下文法:

oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;

提醒:當你修改配置後,請清空浏覽器緩存以檢視效果

配置選項:

AutoDetectLanguage=true/false 自動檢測語言

BaseHref="" _fcksavedurl="""" 相對連結的基位址

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="" 皮膚檔案夾位置

繼續閱讀