#CKEDITOR富文本編輯器+AJAX+JQUERY+ListView綜合應用

1、CKEDITOR 富文本編輯器 +AJAX+JQUERY+ListView 綜合應用 一、下載安裝 Ckeditor ，并將其整合到項目中1、什么是 CKeditor ？為什么要使用它？ 我們在做門戶網(wǎng)站或者公文系統(tǒng)時，客戶經(jīng)常要求在錄入時能夠更改字體樣式、大 小、顏色并具備插入圖片的功能。而一般的 TextBox 無法滿足我們的需求，此時就需要 使用一種叫做富文本編輯器的東西，這類編輯器有很多， ckeditor 就是其中一種，下面介 紹其使用方法、如何下載 進入官方網(wǎng)站 ，點擊 Download 進入下載頁面 CKEDITOR 支持多種編程語言及框架 如： java 、 、 sharepo

2、int 等），我們 選擇 下載后解壓，簡單解釋里面內(nèi)容、下面講如何將 CKEditor 整合到我們的應用中 新建一個網(wǎng)站1 / 41 為了代碼清晰，新建一個目錄，起名JS ，方便將 ckeditor 放到該目錄下 將解壓后 _Samples 文件夾中的 ckeditor 目錄拷貝到 JS 下 新建網(wǎng)頁，起名 test_ckeditor2 / 41 增加對 ckeditor 的引用 調(diào)用，主要是通過對 為了簡便，我們引入 合 ，從下載TextBox 的格式化實現(xiàn)富文本的顯示效果JQUERY 類庫 （一種使 javascript 更容易理解與編寫的代碼集3 / 41 將下載后的文件放到 JS 文件

3、夾下 引用 jquery 通過將 jquery 類庫拖放到 title 標簽下） 頁面上添加 TextBox 文本框 ID ： TextBox1 ) 用 ckeditor 插件格式化 TextBox1 。在 中添加如下代碼var ckeditor。 / 定義全局變量 ckeditor$(function ( / 當全部 DOM元素加載完畢后執(zhí)行下面語句，不加此句javascript無法找到 TextBox1將ckeditor = CKEDITOR.replace( ITOR.replace 命令將 TextBox1 格式化成富文本。 / 用 CKED 2003-2018, CKSource -

4、 Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or*/ 41CKEDITOR.editorConfig =function（config / Define changes to default configuration here. For example:/ 定義語言，此處改為中文config.language = zh-cn。 / 中文/ 顏色/config.uiColor = #AADC6E 。/ 字體config.font_names = 宋體。楷體。新宋體。黑體。隸書。幼圓。微軟雅黑。

5、Arial 。 ComicSans MS 。 Courier New 。Tahoma 。 Times New Roman 。 Verdana 。/ 默認使用的 toolbar 工具欄），此設定名字為 “Basic ” 的 toolbar為系統(tǒng)默認的工具欄config.toolbar = Basic。/ 名字為 “Basic ”的 toolbar 工具欄）的具體設定。只保留以下功能：config.toolbar_Basic = name: styles, items: Font, FontSize ,/ 樣式欄：字體、大小name: paragraph, items: JustifyLeft,

6、JustifyCenter, JustifyRight, JustifyBlock ,/ 對齊欄：左對齊、中心對齊、右對齊、兩端對齊name: colors, items: TextColor, BGColor , / 顏色欄：文本顏 色、背景顏色name: basicstyles, items: Bold, Italic, Underline, Strike, Subscript, Superscript, -, RemoveFormat , / 基本樣式欄：加粗、傾 斜、下劃線、刪除線、下標、上標、移除樣式name: insert, items: Image, Flash, Table,

7、HorizontalRule, / 插入欄：圖像、 flash 、表格、水平線name: links, items: Link, Unlink ,/ 超鏈接欄：增加超鏈接、取消超鏈接name: document, items: Source / 源代碼欄：查看源代碼 。/ 工具欄是否可以被收縮 即：右上角的三角符號是否顯示）config.toolbarCanCollapse = true 。/ 工具欄默認是否展開config.toolbarStartupExpanded = true 。/ 是否允許 “拖拽改變尺寸 ”功能 即：右下角的三角符號是否顯示）config.resize_enable

8、d = false 。/ 當輸入： shift+Enter 時插入的標簽config.shiftEnterMode = CKEDITOR.ENTER_P。 / 可選： CKEDITOR.ENTER_BR 或 CKEDITOR.ENTER_DIV/ 回車 Enter ）時產(chǎn)生的標簽config.enterMode = CKEDITOR.ENTER_BR 。 / 可選： CKEDITOR.ENTER_BR 或 CKEDITO R.ENTER_DIV/ 寬度/config.width = 600px 。/ 高度/config.height = 500px 。/ 41/ 默認樣式/config.ski

9、n：kama 默認）、 office2003、v2/config.skin = kama/ 工具欄的位置/config.toolbarLocation = top/ 改變大小的最大高度。 / 可選： bottom/config.resize_maxHeight = 3000 / 改變大小的最大寬度/config.resize_maxWidth = 3000 / 改變大小的最小高度/config.resize_minHeight = 250 / 改變大小的最小寬度/config.resize_minWidth = 750。/ 當提交包含有此編輯器的表單時，是否自動更新元素內(nèi)的資料/config.

10、autoUpdateElement = true/ 絕對目錄還是相對目錄，為空為相對目錄/config.baseHref = / 編輯器的 z-index 值/config.baseFloatZIndex = 10000。/ 以下為上傳附件的相關(guān)配置，需配合 ckfinder 控件使用/ var ckfinderPath = /Scripts。/ config.filebrowserUrl = ckfinderPath + /ckfinder/ckfinder.html 傳文件時瀏覽服務文件夾。/ 上/ config.filebrowserImageBrowseUrl = ckfinderPa

11、th + /ckfinder/ckfinder.html?Type=Images 。/ 上傳圖片時瀏覽服務文件夾/ config.filebrowserFlashBrowserUrl = ckfinderPath + /ckfinder/ckfinder.。 / 上傳 Flash 時瀏覽服務文件夾html?Type=Flash/ config.filebrowserUploadUrl = ckfinderPath + /ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files/ config.fileb

12、rowserImageUploadUrl = ckfinderPath + /ckfinder/core/conn/上傳文件按鈕 ( 標簽ector/aspx/connector.aspx?command=QuickUpload&type=Images 簽。/ 上傳圖片按鈕 ( 標/ config.filebrowserFlashUploadUrl = ckfinderPath + /ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash 簽。/ 上傳 Flash 按鈕( 標。以上我們設定了控件默認語

13、言為中文 (config.language = zh-cn。默認的工具欄為 Basic ，并且在 config.toolbar_Basic = 功能。中定義了工具欄中需要的添加了對中文字體的支持 config.font_names = 幼圓。微軟雅黑。 宋體?？w。新宋體。黑體。隸書。 做完以上配置，經(jīng)過我們精簡和優(yōu)化的ckeditor 呈現(xiàn)形式如下：/ 41二、下載安裝 Ckfinder ，并將其整合到項目中、解釋：什么是 Ckfinder ？為什么要使用它？ 下圖會給您說明、如何下載 打開，點擊 Download 進入下載頁面 在下載頁面可以看到， ckfinder 針對許多語言做了單獨設

14、計，此處我們選擇 ASP.NET/ 41 將下載后的文件放在 JS 文件夾下，然后刪除 _samples 、 _source 兩個文件夾中添加如下語句，將 ckfinder 整合至 ckeditorCKFinder.setupCKEditor(ckeditor, /JS/ckfinder/。/ 用 CKFinder.setupCKEditor命令將 ckeditor 與 ckfinder 進行整合說明如下：/ 41 添加 CKFinder.dll 引用，路徑在 JSckfinderbinRelase下 按F5 運行，此時再次點擊圖像“按鈕，會發(fā)現(xiàn)多出”上傳“選項10 / 41 添加上傳權(quán)限默認

15、情況下，為了安全， ckfinder 不允許上傳附件，如果需要上傳，則需要更改ckfinder 下的 config.ascx 文件，將 CheckAuthentication(方法返回 true11 / 41 關(guān)閉 ASP.NET 驗證功能。處于安全性考慮， ASP.NET 會對請求的數(shù)據(jù)及事件進行安 全性驗證，而我們上傳的文件都是安全的，不需要這些驗證，所以去掉這些功能。 如果用的是 .net4.0 ，那么請在 web.config 中加入如下代碼，將驗證模式改為 2.0、CKFinder 個性化定制 規(guī)定文件上傳的路徑。默認情況下， ckfinder 會把文件上傳到 ckfinderuse

16、rfiles 目錄，以此類推。下面我 們要改變它自有的規(guī)則，自定義文件存放位置。同樣找到 config.ascx 文件，定位到 SetConfig 方法，其中的 BaseUrl 就是上傳文 件的默認路徑，根據(jù)實際需要修改即可 以上我們放開了上傳權(quán)限，更改了上傳目錄，按F5 鍵，上傳一個圖片查看效果12 / 41定位到 UPLOAD 目錄 我們自定義的文件上傳目錄），查看我們上傳的文件 如果我們想更改上傳到服務器的文件名稱，例如：以日期時間命名，如何做呢？目錄中 這就需要更改源文件，打開剛才下載并解壓好的ckfinder 文件夾，將 _source的 CKFinder.Net.sln 拖到 vs

17、2018 中進行編輯13 / 4114 / 41 按 F5 預覽，再次上傳一個文件，此時可以看到文件名改成了以日期和時間命名的形式三、添加模擬數(shù)據(jù)1 、新建數(shù)據(jù)庫文件15 / 41 此時會彈出一個對話框，提示程序會自動建立 App_Data 文件夾，并把數(shù)據(jù)庫放到該 文件夾下，點擊”是“即可 雙擊 db_test.mdf 數(shù)據(jù)庫，左側(cè)會出現(xiàn)并選中剛才創(chuàng)建的數(shù)據(jù)庫 db_test ，右鍵點 擊，我們需要創(chuàng)建一個 ”表“ 數(shù)據(jù)庫字段定義如下：16 / 41 設置 id 主鍵）列的默認值 設置 post_time 提交時間）列的默認值 右鍵點擊第一行，設置 id 列為主鍵 在右側(cè)屬性欄處，為該表命名

18、 關(guān)閉該表17 / 41四、數(shù)據(jù)的展示1 、用 ListView 控件呈現(xiàn)數(shù)據(jù)庫內(nèi)容18 / 4119 / 41 讓 ListView 根據(jù)數(shù)據(jù)庫 / 此時在前臺會自動生成如下代碼：DataSourceID=dc_test d % /asp:Label ID=idLabelrunat= server Text= %# Eval(ipost_timeLabel runat=server Text= %#asp:Label ID=content_detailsLabelrunat= serverText= % % /titleLabelrunat= server Text= %# Evalasp:

19、Label ID= %21 / 41tr style=background-color: #FFCC66color: #000080 。 % / %/UpdateButtonrunat=serverCommandNameCancelButtonrunat=serverCommandNameidLabel1 runat=server Text=%# Eval(titleTextBoxrunat=serverText= %#asp:TextBox ID=Text=asp:TextBox ID=Text= table runat=post_timeTextBox %content_detailsTe

20、xtBox %serverrunat= server/runat= server/style=border-color: #999999background-color: #FFFFFF。 border-collapse: collapseborder-style:none。border-width:1px。 未返回數(shù)據(jù)。 InsertButtonrunat= server CommandName22 / 41asp:TextBox ID=idTextBoxrunat= serverText= %/asp:TextBox ID=titleTextBoxrunat= serverText= %/

21、asp:TextBox ID=post_timeTextBoxrunat=serverText= %/asp:TextBox ID=content_detailsTextBoxrunat= serverText= %/tr style=background-color: #FFFBD6。 color: #333333asp:Label ID=idLabelrunat= serverText= % /asp:Label ID=titleLabelrunat= serverText= %/asp:Label ID=post_timeLabelrunat= serverText= %/asp:Lab

22、el ID=content_detailsLabelrunat= serverText= %/table runat=server23 / 41servertd runat=border= 1table ID=itemPlaceholderContainerrunat= serverstyle=background-color: #FFFFFF。border-collapse:collapse。 border-color: #999999border-style:noneborder-width:1px。 font-family: Verdana, Arial, Helvetica, sans

23、-seriftr runat=serverstyle=background-color: #FFFBD6。 color: #333333th runat=serveridth runat=servertitleth runat=serverpost_timeth runat=servercontent_detailstr ID=itemPlaceholderrunat= servertr runat=servertd runat=serverstyle=text-align: center。 background-color: #FFCC66 。 font-family: Verdana, A

24、rial, Helvetica, sans-serif。 color: #333333asp:Label ID=idLabelrunat=serverText= % /(title %asp:Label ID=titleLabelrunat= serverText= asp:Label ID=post_timeLabelrunat= serverText= %/24 / 41 content_detailsLabel %runat= server/asp:Label ID= Text= 千萬別暈，接下來我們對其進行精簡DataKeyNames=id 表示主鍵是 idLayoutTemplate

25、 是數(shù)據(jù)表頭定義，他會自動從數(shù)據(jù)庫中讀取字段的名稱，然后顯示在表 頭，我們可以通過更改這些名稱使得顯示更人性化AlternatingItemTemplate 與 ItemTemplate 表示數(shù)據(jù)間隔行的數(shù)據(jù)及樣式 比如：奇 數(shù)行紅色、偶數(shù)行藍色），為了代碼簡潔，我們把 AlternatingItemTemplate 刪除，同 時將 ItemTemplate 中的 id 主鍵）列刪掉EditItemTemplate 表示當點擊編輯按鈕時的數(shù)據(jù)及樣式，為了代碼簡潔，我們也將其刪 除EmptyDataTemplate 表示當數(shù)據(jù)為空的話，顯示的提示信息，默認提示信息：未返回數(shù) 據(jù)。 此時我們按 F

26、5 鍵即可看到）/ 41InsertItemTemplateSelectedItemTemplate中定義了“插入模板”中的數(shù)據(jù)及樣式，為使代碼簡潔，刪掉中定義了“選擇模板”的數(shù)據(jù)及樣式，為使代碼簡潔，刪掉未返回數(shù)據(jù)。tr style=background-color: #FFFBD6color: #333333(title %asp:Label ID=titleLabelrunat= server Text= asp:Label ID=post_timeLabelrunat= server Text= %/= %/ 41 table runat=tr runat=td runat=serve

27、r server itemPlaceholderContainerrunat= serverborder= 1 style= background-color: #FFFFFFborder-collapse: collapse9。 border-style: none。 border-width: 1px 。font-family: Verdana, Arial, Helvetica, sans-serborder-color: # 99999if 。th runat=th runat=th runat=tr id=tr runat=標題server 錄入時間server 內(nèi)容itemPlac

28、eholderserver runat= server server style= text-align: centerbackground-color: #FFCC66333333 。font-family: Verdana, Arial, Helvetica, sans-serifcolor: # 2 、下面演示如何向數(shù)據(jù)庫中插入數(shù)據(jù) 首先按 F7 鍵切換到后臺代碼/ 41 在 page_load 上方配置數(shù)據(jù)庫連接 切換到前臺 在 TextBox1 上添加 TextBoxID ： txt_Title ），作為標題 標題： 在 TextBox1 下添加一個 ButtonID ： btn_I

29、nsert ），作為錄入按鍵 添加完成后整體效果如下圖所示： 在后臺添加“錄入”點擊事件/ 41 在錄入按鍵的 Click 點擊事件中定義如下代碼protectedvoidbtn_Insert_Click(object sender, EventArgs eusing (SqlConnection conn =new SqlConnection(str_Conn/ 與數(shù)據(jù)庫建立連接conn.Open( 。/ 打開數(shù)據(jù)庫 / 執(zhí)行命令using (SqlCommand cmd =new SqlCommand( insert into tb_test (title,content_details

30、values (title,content_details , conncmd.Parameters.AddWithValue(title ,txt_Title.Text。/ 標題cmd.Parameters.AddWithValue(Text 。/ 正文content_details,TextBox1.if (cmd.ExecuteNonQuery( 0/ 如果插入成功 0)ListView1.DataBind(else / 否則報“插入失敗”的錯誤ScriptManager.RegisterClientScriptBlock(this .Page, typeof (Page, , aler

31、t( 插入失敗 , true 。 按F5 運行項目，分別在標題、正文處錄入文字及上傳照片，然后點擊錄入”29 / 41 點擊“錄入”，我們可以看到記錄成功插入30 / 413、美化或許你會感覺這樣的錄入方式不太給力，如果我點擊錄入按鈕，然后彈出一個模擬層，并且可以拖動，似乎更炫，而且客戶要求一般也是如此。就像下面的感覺： 先說拖動效果，代碼可以自己寫，但是有了JQUERY ，我們只需要在彈出層 此處為一個 DIV ）后面加一個 .draggable 就行了，代碼簡潔，何樂而不為。但 draggable 這個方 法并非 JQUERY 類庫原始封裝，需要一個叫 JQUERY UI 的插件 該插件能

32、夠擴展許多 J QUERY 的功能）來提供 進入 進入 UI 選項，下載需要的插件31 / 41 在項目的 JS 文件加下建立一個jquery_ui目錄，將下載后的文件解壓到該目錄下 前臺添加對 UI 控件的引用32 / 41 下面我們定義彈出層在 ListView1 的下方新增一個 div ，命名為 div_Pop在該 div 中再建一個 div 作為標題行，命名為 div_Title ，并且輸入標題：錄入內(nèi)容 將我們需要錄入的內(nèi)容全部剪切到該 div_Pop 中在錄入按鈕后面添加取消按鈕，點擊后彈出層消失錄入內(nèi)容 標題： 在 form 標簽下新增一個 button ，點擊該 button

33、后出現(xiàn)彈出層 在 javascript 標簽 中，定義彈出層顯示 和消失的方法/ 彈出層顯示 function show_Win(div_Win, tr_Title, event var c_Width = document.documentElement.clientWidth 。 / 可見寬度 var s_Width = document.documentElement.scrollWidth。 / 滾動寬度var s_Left = document.documentElement.scrollLeft | document.body.scrollLef t 。 / 據(jù)左邊距 寬度(doc

34、ument.body 的加入是為了兼容 safari 瀏覽器 var c_Height = document.documentElement.clientHeight。 / 可見高度var s_Height = document.documentElement.scrollHeight。 / 滾動高度var s_Top = document.documentElement.scrollTop | document.body.scrollTop 。 / / 距上邊距 高度(document.body的加入是為了兼容 safari 瀏覽器 var js_Title = $(# + tr_Title

35、。 / 標題js_Title.css(cursor, move 。/ 創(chuàng)建遮罩層$(.css( position: absolute, le/ 41ft: 0px, right: 0px, width: s_Width + px, height: s_Height + px, background-color: #ffffff, opacity: 0.6 .prependTo(body 。 / 獲取彈出層var msgObj = $(# + div_Win。msgObj.css(display, block。 / 必須先彈出此行，否則 msgObj0.offsetHeight為 0，因為 di

36、splay:none時， offsetHeight 無法取到數(shù)據(jù)/y 軸位置var js_Top = (c_Height - parseInt(msgObj0.offsetHeight / 2 + s_Top + px。/x 軸位置var js_Left = (c_Width - parseInt(msgObj0.offsetWidth / 2 + s_Left + px。msgObj.css( position: absolute, top: js_Top, left: js_Left, background-color: #ffffff, border: double 4px #FF999

37、9 。/ 使彈出層可移動msgObj.draggable( handle: js_Title, scroll: false 。 /handdle 表示拖動什么部位可使整個彈出層移動， scroll 表示彈出層移出可視范圍后瀏覽器是否自動生成滾動條/ 彈出層消失function close_Win(div_Win var div_Bg = $(#div_Bg。div_Bg.remove( 。$(# + div_Win.fadeOut(200。 在 JQUERY 標簽$(function( 中，新增錄入 彈出層顯示)和取消 .click( function( show_Win(div_Pop, d

38、iv_Title, event 。/ 事件：點擊“取消”后，彈出層消失$(#btn_Close.click( function( close_Win(div_Pop。 按 F5 預覽結(jié)果 我想蘋果系統(tǒng)之所以受歡迎是因為它做到了簡潔、易用與高度的整合。想象一下，如果增 刪改查操作在多個頁面給客戶是什么體驗 繁瑣、暈 ，如果在一個頁面并且做得相當人 性化又是什么感覺 簡潔、爽！那么如何將修改功能做的更人性化呢？我們做如下嘗試： 當點擊標題行中的數(shù)據(jù)，自動彈出相關(guān)內(nèi)容 根據(jù)主鍵 id 從 WebService 獲取) 彈出層新增“修改”按鍵，點擊后能將修改的數(shù)據(jù)更新到數(shù)據(jù)庫/ 41 因為我們要新增修

39、改功能，所以在錄入、取消中間，要增加“修改”按鍵 同時加入一個 HiddenFiled 隱藏標簽，并將主鍵的值賦給它 using (SqlConnection conn = new SqlConnection(str_Conn / 與數(shù)據(jù)庫 建立連接conn.Open( 。/ 打開數(shù)據(jù)庫/ 執(zhí)行命令using (SqlCommand cmd =new SqlCommand( update tb_test set title=title,content_details=content_details where id=id , conncmd.Parameters.AddWithValue( 標

40、題cmd.Parameters.AddWithValue(Text 。/ 正文title , txt_Title.Text。/content_details , TextBox1.cmd.Parameters.AddWithValue(id ,hf.Value。/ 主鍵 idif (cmd.ExecuteNonQuery( / 重新綁定數(shù)據(jù)0/ 如果修改成功 0)ListView1.DataBind(/ 41else / 否則報“修改失敗”的錯誤ScriptManager.RegisterClientScriptBlock( this .Page, t ypeof (Page, , alert

41、( 修改失敗 , true 。 添加 WebService 部更新的體驗），取名：一種讓前臺頁面與后臺代碼異步通訊的技術(shù)，能為我們帶來網(wǎng)頁局WebService1.asmx 取消相關(guān)注釋，允許外部 javascript 方法調(diào)用該 WebService1 ；自定義方法，根據(jù)主 鍵 id 得到數(shù)據(jù)庫其他字段值/ 41因為我們要返回一個數(shù)組列表/str_Id參數(shù)是從 javascript方法中接收的主鍵 id 值ArrayList al = 時間、內(nèi)容 using (SqlConnection conn =new ArrayList(/ 定義 ArrayList，準備存儲 標題、提交conn.Op

42、en(new SqlConnection(str_Conn/ 建立數(shù)據(jù)庫連接/ 打開數(shù)據(jù)庫/ 執(zhí)行 SQL 命令37 / 41using (SqlCommand cmd = ls from tb_test where id=idnew SqlCommand( select title,post_time,content_detai, conncmd.Parameters.AddWithValue( id , str_Id/ 定義只讀數(shù)據(jù)流，根據(jù)主鍵 id 從中讀取 標題title t_time )、內(nèi)容 content_details )。/ 主鍵 id ）、提交時間 /CommandBehavior.CloseConnection表示自動偵測 sdr的狀態(tài)，如果 sdr關(guān)閉，則數(shù)據(jù)庫連接也自動關(guān)閉sdr.Read(al.Add(sdral.Add(sdral.Add(sdrif (!sdr.IsClosed sdr.Close(。/ 向前讀取一條記錄title .ToString( 。/ 標題post_time .ToString( 。/ 提交時間content_details .ToString(。/ 內(nèi)容 / 如果數(shù)據(jù)流沒有關(guān)閉，就關(guān)掉它return al 。/ 返回 ArrayList 前臺調(diào)用步驟：切換到 test