一、准備工作
首先下載最新版的FCKeditor V2.3,下載地址:http://prdownloads.sourceforge.net/fckeditor/FCKeditor_2.3.zip?download;這個壓縮包裡並不包含ASP.NET要用到的DLL控件,所以還要下載另外一個壓縮包,下載地址:http://sourceforge.net/project/showfiles.PHP?group_id=75348&package_id=137125。把第一個文件解壓到WEB根目錄,默認文件夾名為:FCKeditor;再把第二個包解壓,裡面包含了源代碼,如果你想自己再次開發,可以雙擊 FredCK.FCKeditorV2.csproj文件,打開VS.Net進行修改,所用的語言是C#;不想修改的話,直接把bin\Release下面的FredCK.FCKeditorV2.DLL文件拷到WEB目錄的bin下面。
二、精簡文件
因為只用到ASP.Net,所以有必要精簡一下文件。
進入FCKeditor文件夾,把所有“_”開頭的文件和文件夾刪掉,這些都是一些范例,只保留editor文件夾、fckconfig.js、fckeditor.JS、fckstyles.xml、fcktemplates.XML就可以了;
進入editor文件夾,刪掉“_source”文件夾,裡面放的同樣是源文件;
退回上一級目錄進入filemanager文件夾,有browser和upload兩個文件夾。進入browser\default\connectors,只保留aspx文件夾,其余的刪掉;mcpuk目錄亦可刪除;upload也一樣,只保留ASPx文件夾;
退到editor再進入images文件夾,smiley裡面放的是表情圖標,有msn和fun兩個系列,如果你想用自己的表情圖標,可以把它們都刪除;如果你想用這裡的表情圖標那就不要刪了;
lang裡面放的是語言包,如果只是用簡體中文,那麼只保留fcklanguagemanager.js、zh-cn.js兩個文件就行了,建議也保留 en.js(英文)、zh.js(繁體中文)兩個文件,fcklanguagemanager.js是語言配置文件,有了它才能和 fckconfig.JS裡的設置成對,對應上相應的語言文件,一定要保留!
再退出lang文件夾,進入skins文件夾,如果你想使用FCKeditor默認的奶黃.色,那就把除了default文件夾外的另兩個文件夾直接刪除,如果想用別的,那就看你自己的喜好了,不要上傳文件的話把filemanager也刪除算了。
至此,文件精簡完畢,由原來的2.55M變成現在的689K了。接著修改設置。
三、修改設置
打開位於根目錄的fckconfig.JS文件。
FCKConfig.SkinPath = FCKConfig.BasePath + ''skins/default/'' ;這行是設置皮膚的,如果精簡時保留了silver,就把路徑改成skins/silver,默認就不用管它了;
FCKConfig.DefaultLanguage = ''en'' ;設置默認語言,把en改成zh-cn,即簡體中文;
FCKConfig.TabSpaces = 0;如果在編輯過程中要用到TAB鍵,就把0改成1;
因為FCKeditor默認是ASP的,所以要把它換成ASP.NET。把ASP跟其它被注釋掉的代碼刪掉,用ASP.Net來代替。例如:
var _FileBrowserLanguage = ''ASPx''
var _QuickUploadLanguage = ''ASPx''
余下的代碼都按照以上操作,刪掉其它WEB語言,只保留ASP.NET。也可以點這裡下載我精簡過的文件,注意:只適用於ASP.Net,其他語言勿下!建議先解壓到別的目錄,再復制到WEB目錄相對應的位置,以免造成文件丟失。
改完後保存,FCKeditor已經完全支持ASP.NET了。當然還有一些安全問題,只要修改相應的toolbar,鼠標右鍵菜單等等,因為我的後台不面對前台用戶的,即沒有留言本和日記回復,所以略過這些步驟。下一步是打開VS.NET,在ASP.Net頁面中加入FCKeditor。
四、ASP.Net中的應用
打開項目的“資源管理器”,添加“FredCK.FCKeditorV2”引用。
打開添加文章、管理文章相對應的文件以修改其中的內容。下面以“添加文章”為例。切換到“Html”界面,添加FCK的引用,代碼如下:
<%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>
並確保@ Page中的“AutoEventWireup”“validateRequest”兩個值都為false,不然當你發表的文章中含有鏈接或是其他 Html語句時,.Net會警告你有安全隱患而出錯。在form的適當位置加入FCKeditor控件,當然form一定要有“runat= "server"”,代碼如下:
<FCKeditorV2:FCKeditor id="content" runat="server"></FCKeditorV2:FCKeditor>
id可以自己命名,自己喜歡易記就行。如果程序中有檢測輸入是否為空的話,那麼就不再是content.Text了,而是content.Value。
至此,文件修改完畢。所有代碼如下:
程序代碼
<%@ Page language="c#" Codebehind="AdminFileAdd.ASPx.cs" AutoEventWireup="false" Inherits="MyBlog.Admin.AdminFileAdd" validateRequest=false%>
<%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.0 Transitional//EN" >
<Html>
<HEAD>
<title>AdminFileAdd</title>
<meta content="Microsoft Visual Studio .Net 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClIEntScript">
<meta content="http://schemas.microsoft.com/intellisense/IE5" name="vs_targetSchema">
<LINK href="admin.css" type="text/CSS" rel="stylesheet">
</HEAD>
<body class="right">
<form id="Form1" method="post" runat="server">
<div>添加文章</div>
<div class="main">
<ul>
<li>
標題:<asp:textbox id="title" runat="server" MaxLength="50" Width="250px"></ASP:textbox>
<li>
欄目:<asp:dropdownlist id="m" runat="server" AutoPostBack="True"></ASP:dropdownlist>
<li>
<FCKeditorV2:FCKeditor id="content" runat="server"></FCKeditorV2:FCKeditor>
<li>
<asp:button id="add" runat="server" Text="提 交"></ASP:button>
</li>
</ul>
</div>
</form>
</body>
</Html>