我們?cè)谧鰓eb項(xiàng)目的時(shí)候，時(shí)常會(huì)遇到需要在線編輯的情況，需要我們?cè)诰W(wǎng)頁(yè)上進(jìn)行編輯，就像在Word里編輯一樣，今天就把常用的幾種在線的編輯器介紹給大家，順便沒一種編輯器都會(huì)帶有相應(yīng)的使用示例，方便大家使用。好了，廢話不多說，直接進(jìn)入正題。
一、FreeTextBox（點(diǎn)擊下載壓縮包FreeTextBox用法.zip）
FreeTextBox是一個(gè)很好用的在線編輯器，使用很簡(jiǎn)單，同時(shí)在線編輯的感覺就像在word里編輯一樣，先給大家一個(gè)編輯器的圖像顯示，然后再一步步的教大家如何配置并使用FreeTextBox。
顯示效果：（可以在文本框里添加圖片以及各種文字效果）
1、先將FreeTextBox文件壓縮包解壓，里邊的文件目錄如下：
2、在Visual Studio工具箱里標(biāo)準(zhǔn)項(xiàng)（其他任意的一項(xiàng)均可）點(diǎn)擊右鍵，選擇“選擇項(xiàng)”如圖示
3、進(jìn)入選擇工具箱項(xiàng)以后，選擇瀏覽按鈕,找到剛剛解壓的文件夾并找到FreeTextBox.dll選擇添加，如圖
添加成功之后會(huì)在工具箱里看到FreeTextBox控件，如圖：
3、將FreeTextBox控件添加到你需要用到的頁(yè)面，然后將之前我們剛剛解壓的文件夾里的
Iamges文件夾和其他的三個(gè).aspx文件添加到項(xiàng)目的根目錄下，如圖：
4、如果這個(gè)時(shí)候我們?cè)跒g覽器里瀏覽當(dāng)前頁(yè)，可能會(huì)出現(xiàn)錯(cuò)誤，因?yàn)槲覀冃枰谠次募?aspx中做如下配置
這樣做是禁止請(qǐng)求驗(yàn)證，如果不禁用的話，如果請(qǐng)求提交的文本里有特殊的字符就會(huì)報(bào)錯(cuò)。
5、這個(gè)時(shí)候我們的文本編輯器已經(jīng)可以使用了，但是它會(huì)有很多的按鈕顯示不出來，它還需要你對(duì)它的ButtonPath進(jìn)行設(shè)置，如圖示：
好了，到此為了一個(gè)跟Word一樣的在線編輯器就配置好了，是不是有點(diǎn)迫不及待呢？趕緊去試一下吧，先給大家上個(gè)圖，在編輯文本中插入圖片：
如果我們需要提交數(shù)據(jù)則直接在后臺(tái)代碼中this.FreeTextBox1.Text即可。
在這里需要額外強(qiáng)調(diào)的一點(diǎn)是，我們的images文件夾和添加的三個(gè).aspx文件都是在項(xiàng)目的根目錄下，但是在實(shí)際的開發(fā)中可能不會(huì)在根目錄下，這個(gè)時(shí)候我們需要將FreeTextBox的ButtonPath屬性做一些修改，應(yīng)該為"images上一級(jí)文件夾名/images/ftb/office2003"，同時(shí)在項(xiàng)目的根目錄下創(chuàng)建一個(gè)images文件夾，這樣就可以自如的使用FreeTextBox進(jìn)行在線編輯了。如圖示的是在非根目錄中使用FreeTextBox，這個(gè)時(shí)候的ButtonPath為"Admin/images/ftb/oofice2003"，需要向大家解釋的一點(diǎn)是我們之所以要?jiǎng)?chuàng)建images文件夾是因?yàn)槟J(rèn)的文件夾被添加到了Admin文件下目錄下，上傳圖片的時(shí)候找不到默認(rèn)的文件了，所以我們需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)images文件夾，同時(shí)我們還需要將ftb.imagegallery.aspx文件復(fù)制一份在根目錄下，這樣就可以自如的在文本框中插入的圖片了，否則會(huì)提示該文件不存在的。在文本框中插入圖片步驟如下，先瀏覽圖片，然后選中要上傳的圖片，點(diǎn)擊上傳，上傳之后會(huì)在對(duì)話框中顯示已上傳成功的圖片，這個(gè)時(shí)候只要雙擊要插入的圖片，就可以把圖片插入到文本中了。（下圖為非根目錄下的FreeTextBox配置，需要大家ftb.imagegallery.aspx文件復(fù)制一份在根目錄下）
二、CKEditor+CKFinder（點(diǎn)擊此處下載壓縮包c(diǎn)kfinder_aspnet_1.4.3.zip）
我們可以將其理解為一款歷史悠久的在線文本編輯器，CKEditor主要是用作文本的編輯，CKFinder主要是用作圖片的上傳。好了，進(jìn)入正題。
1、在網(wǎng)站的根目錄下創(chuàng)建兩個(gè)文件夾：ckeditor和ckfinder
如圖：
2、將壓縮包c(diǎn)keditor中的adapters、images、lang、plugins、Skins、thems、ckeditor.js、config.js、contexts.css解壓到上一步創(chuàng)建的文件夾ckeditor下，在發(fā)帖也引用ckeditor.js文件，對(duì)引用的TextBox文本框添加cssclass屬性例如：cssclass=“ckeditor”并將其文本設(shè)置為多行，代碼頁(yè)中可通過TextBox的Text屬性來獲取編輯器內(nèi)容。如圖：
使用Ckeditor控件頁(yè)代碼：
3、在aspx頁(yè)的page指令中添加ValidateRequest=“false“禁用攻擊檢測(cè)
4、到這里為止我們已經(jīng)實(shí)現(xiàn)了在線的文本編輯器，先給大家看個(gè)圖像效果
但是我們只能進(jìn)行文本的編輯，如果想要像FreeTextBox那樣在文本中插入圖片，則就需要用到了另一個(gè)組件ckfinder。ckfinder是ckeditor的一個(gè)插件，為ckeditor提供上傳文件、圖片的功能，將解壓文件中的CKFinder.dll添加到項(xiàng)目引用，并將core、ckfinder.js、ckfinder.html、config.ascx解壓到ckfinder自己的文件夾下，如圖示
5、在ckeditor的config.js文件中配置上傳文件路徑：（高亮部分固定不變，一般不要改動(dòng)）
var ck="/";
config.filebrowserBrowseUrl = ck + 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = ck+'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = ck+'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = ck + 'ckfinder/core/connector/aspx/connector.aspx?Command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = ck+'ckfinder/core/connector/aspx/connector.aspx?Command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = ck + 'ckfinder/core/connector/aspx/connector.aspx?Command=QuickUpload&type=Flash';
6、在ckfinder的config.ascx文件中進(jìn)行如下配置：
在public override bool CheckAuthentication()中
添加如下語(yǔ)句：
if (Session["denglu"].ToString() == "true")
{
return true;
}
else
{
return false;
}
用來驗(yàn)證用戶是否有足夠的權(quán)限上傳文件，在登錄時(shí)設(shè)置：session[“denglu”]=“true“如果沒有登錄則沒有權(quán)限上傳文件，也可以直接設(shè)置為true
7、至此已經(jīng)配置完畢，可以完成文件圖片的上傳。上傳文件、圖片時(shí)，應(yīng)先選擇上傳，然后選擇要上傳的文件，然后上傳到服務(wù)器，最后再確定，這樣你所要插入的圖片就可以顯示編輯的文本框中了。如圖:
這樣就完成了CKEditor的在線編輯、圖片上傳的使用示例，當(dāng)然上傳文件的的時(shí)候也是這樣的方法，這里就不再演示了。還需要注意的是本在線編輯器是在空的Asp.Net Web應(yīng)用程序中使用的，如果你新建的不是項(xiàng)目而是網(wǎng)站，則需要在配置文件里做如下修改：
網(wǎng)站根目錄下的web.config文件做如下的配置：
同時(shí)在使用Ckeditor編輯器的頁(yè)做如下使用：
然后添加文本框：（代碼如下）：
這樣即使在你新建的網(wǎng)站中也可以使用Ckeditor進(jìn)行在線編輯了。
好了，今天這一節(jié)就到這里了。在線編輯器使用的還是比較多的，所以就把常用的兩款在線編輯器給總結(jié)示例了下，主要還是配置，感覺挺麻煩的，總結(jié)下來做以后備用，同時(shí)也希望能給大家?guī)硪恍⿴椭�，共同學(xué)習(xí)。如果有不正確的地方還請(qǐng)多多指點(diǎn)。會(huì)附上FreeTextBox和Ckeditor和CkFinder的壓縮包，使用的時(shí)候先解壓下，同時(shí)我在壓縮包里也附錄了一個(gè)簡(jiǎn)單的使用文檔，方便大家使用。
當(dāng)然除此之前還有很多比較好的編輯器比如：kindeditor、HTMLArea還有比較有名的SinaEditor等等，這里我只是總結(jié)了經(jīng)常用的兩款編輯器，有興趣的朋友可以下去再了解下其他的幾款編譯器，個(gè)人感覺SinaEditor用戶體驗(yàn)是最好的，但是它體積有點(diǎn)大。見仁見智吧，希望對(duì)大家有所幫助。
喜歡 
頂
難過
囧
圍觀
無聊
