#CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用

1、CKEDITOR 富文本编辑器 +AJAX+JQUERY+ListView 综合应用 一、下载安装 Ckeditor ，并将其整合到项目中1、什么是 CKeditor ？为什么要使用它？ 我们在做门户网站或者公文系统时，客户经常要求在录入时能够更改字体样式、大 小、颜色并具备插入图片的功能。而一般的 TextBox 无法满足我们的需求，此时就需要 使用一种叫做富文本编辑器的东西，这类编辑器有很多， ckeditor 就是其中一种，下面介 绍其使用方法、如何下载 进入官方网站 ，点击 Download 进入下载页面 CKEDITOR 支持多种编程语言及框架 如： java 、 、 sharepo

2、int 等），我们 选择 下载后解压，简单解释里面内容、下面讲如何将 CKEditor 整合到我们的应用中 新建一个网站1 / 41 为了代码清晰，新建一个目录，起名JS ，方便将 ckeditor 放到该目录下 将解压后 _Samples 文件夹中的 ckeditor 目录拷贝到 JS 下 新建网页，起名 test_ckeditor2 / 41 增加对 ckeditor 的引用 调用，主要是通过对 为了简便，我们引入 合 ，从下载TextBox 的格式化实现富文本的显示效果JQUERY 类库 （一种使 javascript 更容易理解与编写的代码集3 / 41 将下载后的文件放到 JS 文件

3、夹下 引用 jquery 通过将 jquery 类库拖放到 title 标签下） 页面上添加 TextBox 文本框 ID ： TextBox1 ) 用 ckeditor 插件格式化 TextBox1 。在 中添加如下代码var ckeditor。 / 定义全局变量 ckeditor$(function ( / 当全部 DOM元素加载完毕后执行下面语句，不加此句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为系统默认的工具栏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 ）时产生的标签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。/ 当提交包含有此编辑器的表单时，是否自动更新元素內的资料/config.

10、autoUpdateElement = true/ 绝对目录还是相对目录，为空为相对目录/config.baseHref = / 编辑器的 z-index 值/config.baseFloatZIndex = 10000。/ 以下为上传附件的相关配置，需配合 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 = 幼圆。微软雅黑。 宋体。楷体。新宋体。黑体。隶书。 做完以上配置，经过我们精简和优化的ckeditor 呈现形式如下：/ 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 运行，此时再次点击图像“按钮，会发现多出”上传“选项10 / 41 添加上传权限默认

15、情况下，为了安全， ckfinder 不允许上传附件，如果需要上传，则需要更改ckfinder 下的 config.ascx 文件，将 CheckAuthentication(方法返回 true11 / 41 关闭 ASP.NET 验证功能。处于安全性考虑， ASP.NET 会对请求的数据及事件进行安 全性验证，而我们上传的文件都是安全的，不需要这些验证，所以去掉这些功能。 如果用的是 .net4.0 ，那么请在 web.config 中加入如下代码，将验证模式改为 2.0、CKFinder 个性化定制 规定文件上传的路径。默认情况下， ckfinder 会把文件上传到 ckfinderuse

16、rfiles 目录，以此类推。下面我 们要改变它自有的规则，自定义文件存放位置。同样找到 config.ascx 文件，定位到 SetConfig 方法，其中的 BaseUrl 就是上传文 件的默认路径，根据实际需要修改即可 以上我们放开了上传权限，更改了上传目录，按F5 键，上传一个图片查看效果12 / 41定位到 UPLOAD 目录 我们自定义的文件上传目录），查看我们上传的文件 如果我们想更改上传到服务器的文件名称，例如：以日期时间命名，如何做呢？目录中 这就需要更改源文件，打开刚才下载并解压好的ckfinder 文件夹，将 _source的 CKFinder.Net.sln 拖到 vs

17、2018 中进行编辑13 / 4114 / 41 按 F5 预览，再次上传一个文件，此时可以看到文件名改成了以日期和时间命名的形式三、添加模拟数据1 、新建数据库文件15 / 41 此时会弹出一个对话框，提示程序会自动建立 App_Data 文件夹，并把数据库放到该 文件夹下，点击”是“即可 双击 db_test.mdf 数据库，左侧会出现并选中刚才创建的数据库 db_test ，右键点 击，我们需要创建一个 ”表“ 数据库字段定义如下：16 / 41 设置 id 主键）列的默认值 设置 post_time 提交时间）列的默认值 右键点击第一行，设置 id 列为主键 在右侧属性栏处，为该表命名

18、 关闭该表17 / 41四、数据的展示1 、用 ListView 控件呈现数据库内容18 / 4119 / 41 让 ListView 根据数据库 / 此时在前台会自动生成如下代码：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。 未返回数据。 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、 是数据表头定义，他会自动从数据库中读取字段的名称，然后显示在表 头，我们可以通过更改这些名称使得显示更人性化AlternatingItemTemplate 与 ItemTemplate 表示数据间隔行的数据及样式 比如：奇 数行红色、偶数行蓝色），为了代码简洁，我们把 AlternatingItemTemplate 删除，同 时将 ItemTemplate 中的 id 主键）列删掉EditItemTemplate 表示当点击编辑按钮时的数据及样式，为了代码简洁，我们也将其删 除EmptyDataTemplate 表示当数据为空的话，显示的提示信息，默认提示信息：未返回数 据。 此时我们按 F

26、5 键即可看到）/ 41InsertItemTemplateSelectedItemTemplate中定义了“插入模板”中的数据及样式，为使代码简洁，删掉中定义了“选择模板”的数据及样式，为使代码简洁，删掉未返回数据。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 内容itemPlac

28、eholderserver runat= server server style= text-align: centerbackground-color: #FFCC66333333 。font-family: Verdana, Arial, Helvetica, sans-serifcolor: # 2 、下面演示如何向数据库中插入数据 首先按 F7 键切换到后台代码/ 41 在 page_load 上方配置数据库连接 切换到前台 在 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/ 与数据库建立连接conn.Open( 。/ 打开数据库 / 执行命令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 ，并且输入标题：录入内容 将我们需要录入的内容全部剪切到该 div_Pop 中在录入按钮后面添加取消按钮，点击后弹出层消失录入内容 标题： 在 form 标签下新增一个 button ，点击该 button

33、后出现弹出层 在 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 。 / 据左边距 宽度(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 。/ 创建遮罩层$(.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 无法取到数据/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 预览结果 我想苹果系统之所以受欢迎是因为它做到了简洁、易用与高度的整合。想象一下，如果增 删改查操作在多个页面给客户是什么体验 繁琐、晕 ，如果在一个页面并且做得相当人 性化又是什么感觉 简洁、爽！那么如何将修改功能做的更人性化呢？我们做如下尝试： 当点击标题行中的数据，自动弹出相关内容 根据主键 id 从 WebService 获取) 弹出层新增“修改”按键，点击后能将修改的数据更新到数据库/ 41 因为我们要新增修

39、改功能，所以在录入、取消中间，要增加“修改”按键 同时加入一个 HiddenFiled 隐藏标签，并将主键的值赋给它 using (SqlConnection conn = new SqlConnection(str_Conn / 与数据库 建立连接conn.Open( 。/ 打开数据库/ 执行命令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( / 重新绑定数据0/ 如果修改成功 0)ListView1.DataBind(/ 41else / 否则报“修改失败”的错误ScriptManager.RegisterClientScriptBlock( this .Page, t ypeof (Page, , alert

41、( 修改失败 , true 。 添加 WebService 部更新的体验），取名：一种让前台页面与后台代码异步通讯的技术，能为我们带来网页局WebService1.asmx 取消相关注释，允许外部 javascript 方法调用该 WebService1 ；自定义方法，根据主 键 id 得到数据库其他字段值/ 41因为我们要返回一个数组列表/str_Id参数是从 javascript方法中接收的主键 id 值ArrayList al = 时间、内容 using (SqlConnection conn =new ArrayList(/ 定义 ArrayList，准备存储 标题、提交conn.Op

42、en(new SqlConnection(str_Conn/ 建立数据库连接/ 打开数据库/ 执行 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/ 定义只读数据流，根据主键 id 从中读取 标题title t_time )、内容 content_details )。/ 主键 id ）、提交时间 /CommandBehavior.CloseConnection表示自动侦测 sdr的状态，如果 sdr关闭，则数据库连接也自动关闭sdr.Read(al.Add(sdral.Add(sdral.Add(sdrif (!sdr.IsClosed sdr.Close(。/ 向前读取一条记录title .ToString( 。/ 标题post_time .ToString( 。/ 提交时间content_details .ToString(。/ 内容 / 如果数据流没有关闭，就关掉它return al 。/ 返回 ArrayList 前台调用步骤：切换到 test