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