那么為什么說是FCKeditor的冰冷之心呢？這不是嘩眾取寵，主要是說它使用起來有點麻煩，下文就詳細說明如何搞定這玩意兒。
1.FCKeditor的官方網站是：http://www.fckeditor.net/download
下載地址：http://sourceforge.net/project/showfiles.php?group_id=75348
如圖所示：
要下載FCKeditor2.4.2.zip和 FCKeditor.NET版的2個zip包。
說明：
FCKeditor2.4.2.zip是其最新的Javascript文件和圖片什么的；
FCKeditor.NET.zip是ASP.NET調用的DLL在里面。
2.分別解壓后把FCKeditor2.4.2.zip里的fckeditor目錄整個復制到網站中。
3.解壓FCKeditor.NET.zip包后在FCKeditor.Net_2.2\bin\Debug目錄里找到FredCK.FCKeditorV2.dll。其他文件沒用，把FredCK.FCKeditorV2.dll復制到我們的網站，建立一個Bin目錄。
4.引用FredCK.FCKeditorV2.dll。
第一步：
第二步：
5.導入工具箱。
在“工具箱”下右鍵
點擊“選擇項”。彈出如圖窗口：
點擊瀏覽,找到dll所在目錄。
這時發現工具箱里多出FCKeditor控件。
6.拖拽FCKeditor到頁面上
7.配置WebConfig
<?xml version="1.0"?>
<!--
注意: 除了手動編輯此文件以外，您還可以使用
Web 管理工具來配置應用程序的設置。可以使用 Visual Studio 中的
“網站”->“Asp.Net 配置”選項。
設置和注釋的完整列表在
machine.config.comments 中，該文件通常位於
\Windows\Microsoft.Net\Framework\v2.x\Config 中
-->
<configuration>
<appSettings>
<add key="FCKeditor:BasePath" value="~/fckeditor/"/>
<add key="FCKeditor:UserFilesPath" value="/Files/" />
</appSettings>
<connectionStrings/>
<system.web>
說明：BasePath是fckeditor所在路徑，fckeditor由於我們直接放網站目錄下這樣寫就可以，如果您的網站多放幾層適當調整即可。
UserFilesPath是所有上傳的文件的所在目錄。為什么要設置成/Files這樣而不是~/Files，因為FCKeditor使用這個值來返回你上傳后的文件的相對路徑到客戶端。否則的話客戶訪問的時候就會取客戶的機器目錄而不是http形式的目錄。
建議：Files要單獨做wwwroot目錄下的一個站點比較好，和我們的站點FCKEditor平行。不要把它放FCKEditor里，為什么呢？因為Files是要讓客戶有寫的權限的，如果放FCKEditor下很危險。
8.Files目錄要有寫的權限。你根據自己網站需求設置那個帳號，本文為方便設置User實際中你可能用ASP.NET帳號更合理。
9.修改fckeditor/fckconfig.js文件
在第182行的位置
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
改為
var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php
10.FCKeditor給其瘦身。以_打頭的的都是范例文件或源文件，不過建議小心。
11.下面以上傳圖片示例說明如何使用，
點擊“瀏覽服務器”。
彈出窗口很容易報錯
如果報錯XML request error: Internal Server Error(500)，很可能就是目錄路徑不對和寫權限沒有。
選擇圖像
最后效果
前台代碼：
<%@ Page Language="C#" validateRequest=false AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>FCKeditor文本編輯器</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<fckeditorv2:fckeditor id="FCKeditor1" runat="server" DefaultLanguage="zh-cn" Height="400px" Width="660px"
></fckeditorv2:fckeditor>
</div>
</form>
</body>
</html>
怎么樣獲取結果呢？FCKeditor1.Value就是。
2.常用配置
這里主要包括了以下內容:
- Configuration File 配置文件
- Toolbar 工具欄
配置文件:
這個編輯器包括了豐富的配置選項,所以你可以自定義它的顯示方式,特色,和行為,主配置文件是 “fckconfig.js”,你可以在安裝目錄的根目錄找到.
重寫默認的配置文件:
你 可以直接編輯方配置文件,你也可以在不同的文件夾中重寫默認的配置文件,Javascript是用來配置FCKeditor的,為了簡單的升級你站點中的 FCKeditor,最好的方式就是把你的所有的配置文件放到一個獨立的配置文件中,並且該文件不在根目錄下,這樣的話,你只需要覆蓋安裝目錄就可以升級 了.
首先,你可以創建一相文件,比方說叫做 “myconfig”並且保存在你在根目錄下(或者任何其它的目錄),你的自定義設置將會放在這里,比方說你想要設置你的編輯器一直以法文顯示,你只要寫 下面的代碼到你在文件中.FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = "fr" ;
其次,你需要告訴編輯器去加載你的自定義配置,這里有兩種方法
第 一種,在fckeditor.js中找到后面的一行,FCKConfig.CustomConfigurationsPath = '' ;並且在路徑中加入你自定義配置文件的位置,如:FCKConfig.CustomConfigurationsPath = '/myconfig.js' ;這種方法是好的,但是你可以想像,在不改變原始文件方面,你缺少了靈活性.但是不管怎樣,你只要記住需要改變的只有一行,其它的改變都還是獨立的.
第 二種,這是一種能夠達到上述效果,並且更為好的方法,你不需要更改原來的配置文件fckeditor.js,你可以直接設置你的自定義在使用編輯器的地 方,下面是達到這個目標的一小段javascript代碼:var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js" ;
oFCKeditor.Create() ;
你可以使用你想用的語言達到同樣地效果,你只需要看看例子,找到怎樣使用代碼去配置編輯器.
配置加載過程:
當重載配置文件的時候,我們會經歷下面的步驟
1.在主配置文件(fckeditor.js)中的配置加載;
2.如果提供了自定義的配置文件,那么,這些配置文件要進行加載;
3.除了用"CustomConfigurationsPath" 配置的內容在第一步之后加載外,在頁面內的配置文件加載完畢.
注意:你需要保留原始的配置文件在根目錄下,否則的話,fckeditor就會出問題了.
瀏覽器緩存:在對配置文件做更改試試更改之后,請記住清空瀏覽器緩存,否則的話,你就不會看到你做得更改.當在代理環境下工作時,這就更顯得重要了,你的代理可能會保存更長時間的js文件,這里有一些建議可以用來更新最新的配置文件:
如果你使用的是IE,使用CTRL+F5應該就可以清空js文件的緩存了,並且加載js到最新的配置.
如果你使用的是firefox或者mozilla子項目下的瀏覽器,一般情況下,使用Shift+CTRL+R可以加載最新的js配置文件;如果失敗的話,你就要手動清空緩存了.
在自定義配置文件的路徑之后,你可以添加幾行代碼,這樣瀏覽器每次運行就必須加載它們了,如
var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js?" + ( new Date() * 1 ) ;
oFCKeditor.Create() ;
工具欄配置:
配置你需要的工具欄是一件十分簡單的事情,只要在配置文件"FCKConfig.ToolbarSets" 中修改或者填加新的選項;當然了,你也可以創建你自己的配置文件。
你可以看一下fckconfig.js ，看看這兩個簡單的工具欄定義。
//默認配置
FCKConfig.ToolbarSets["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','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
//精減工具欄
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;
工具欄集合：
每一個工具欄設置都包含有一組工具欄集合，每一個工具欄集合都在一個不同的層上，當你重新設置editor大小時，工具欄集合就會一起移動。你可以在上面 工具欄定義看到，每一個工具欄集合都被定義成一個javaScript字符串數組，每一個字符串都對應了在代碼中定義的一個小工具，或者一個插件。如果這 個小工具不存在，則在編輯器加載的時候，就會給出錯誤提示。你也可以通過在工具欄定義中填加 “-” 字符串，以在工具欄集合中包括一個分隔符。
強迫工具欄集合換行：
看看默認工具欄的定義，你會發現在某一行使用 “/” 代替一個數組，這個標記可以告訴編輯器，你想要下一個工具欄集合換到另一行。
自定義工具欄：
在fckconfig.js 的配置文件中已經包括了”Default” 和“Basic” 兩個工具欄，你可以修改它們，當然，你也可以創建新的自定義工具欄。例如，你可以創建名為”MyToolbar”的工具欄，只需要在默認的配置文件中加入 下面內容，當然，你也可以在自定義的配置文件中加入。FCKConfig.ToolbarSets["MyToolbar"] = [
['Cut','Copy','Paste','PasteText','PasteWord'],
['Undo','Redo','-','Bold','Italic','Underline','StrikeThrough'],
'/',
['OrderedList','UnorderedList','-','Outdent','Indent'],
['Link','Unlink','Anchor'],
'/',
['Style'],
['Table','Image','Flash','Rule','SpecialChar'],
['About']
] ;
現在，你需要在創建編輯器實例的時候設置你的工具欄，下面就是在不同語言中定義工具欄的一些例子。JavaScript
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.ToolbarSet = 'MyToolbar' ;
oFCKeditor.Create() ;
</script>
$oFCKeditor->ToolbarSet = 'MyToolbar';
<FCK:editor id="EditorDefault" toolbarSet="MyToolbar"></FCK:editor>
oFCKeditor.ToolbarSet = "MyToolbar"
<FCKeditorV2:FCKeditor id="FCKeditor2" ToolbarSet="MyToolbar" runat="server" />
fckEditor.toolbarSet = "MyToolbar";
額外的注意事項：
在自定義工具欄時通常犯的錯誤是，只記得從默認工具欄中移去你不要的元素，包括About的菜單，留下最后一行僅僅是一個逗號。所以你要記住的是最后一個工具欄集合最后沒有逗號。
記住清空瀏覽器緩存，否則，你對配置文件做更改的時候，你將看不到變化，你也不知道為什么。
工具欄的行為：
開始行為：
當編輯器加載的時候，你可以決定它的顯示方式。工具欄默認情況可以是展開的，也可以是合上的。如果你想要改變工具欄的顯示方式，你可以查看ToolbarStartExpanded 選項，或者僅僅在配置文件中加入以下的代碼，記住，‘true’設置為展開，'false'設置為合上。
FCKConfig.ToolbarStartExpanded = true ;
工具欄收起：
當使用編輯器的時候，你可以選擇是否允許閉合工具欄。你可以查看ToolbarCanCollapse 的選項，或者在配置文件中聲明，'true'為允許,'false'為不允許。
FCKConfig.ToolbarCanCollapse = false;
3.使用js獲取值
FCKeditorAPI是FCKeditor加載后注冊的一個全局對象，利用它我們就可以完成對編輯器的各種操作。
EditorName是頁面中可編輯區域元素的id比如：
<TEXTAREA id="texterea1" name="content" rows="30" cols="420"><c:out value="${content}"/></TEXTAREA>
EditorName就是texterea1了
// 獲取編輯器中HTML內容
function getEditorHTMLContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.GetXHTML(true));
}
// 獲取編輯器中文字內容
function getEditorTextContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.EditorDocument.body.innerText);
}
// 設置編輯器中內容
function SetEditorContents(EditorName, ContentStr) {
var oEditor = FCKeditorAPI.GetInstance(EditorName) ;
oEditor.SetHTML(ContentStr) ;
}
4.兼容問題
升級到 IE 9后，fckeditor在IE 9里的彈出浮動層會出現bug，里面的內容不會出現。所以無論是想在頁面編輯器里粘貼內容，還是上傳圖片等凡是需要彈出窗口操作的東西都會有問題，想要進行其它的操作也只能重新刷新頁面。原因是 IE 9 不支持var $=document.getElementById;這樣的寫法了。
解決方法可以這么來做：
打開這個文件， fckeditor/editor/js/fckeditorcode_ie.js ，找到第 38行的這個方法：FCKTools.RegisterDollarFunction
將原來的
FCKTools.RegisterDollarFunction=function(A){A.$=A.document.getElementById;};
修改方法為：
FCKTools.RegisterDollarFunction=function(A){A.$=function(v){return A.document.getElementById(v);}};
親自做了實驗，結果理想。
在IE10中會遇到不支持selectSingleNode屬性的問題，解決方法是在fckeditorcode_ie.js文件中的B.open(“GET", A, false); 和 B.send(null);這兩句之間加上try { B.responseType = ‘msxml-document’; } catch (e) { }，可以解決問題，本人親自驗證。