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

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用一、下载安装Ckeditor，并将其整合到项目中1、什么是CKeditor？为什么要使用它？我们在做门户网站或者公文系统时，客户经常要求在录入时能够更改字体样式、大小、颜色并具备插入图片的功能。

而一般的TextBox无法满足我们的需求，此时就需要使用一种叫做富文本编辑器的东西，这类编辑器有很多，ckeditor就是其中一种，下面介绍其使用方法2、如何下载√ 进入官方网站/，点击Download进入下载页面√ CKEDITOR支持多种编程语言及框架（如：java、、sharepoint等），我们选择√ 下载后解压，简单解释里面内容3、下面讲如何将CKEditor整合到我们的应用中√ 新建一个网站√ 为了代码清晰，新建一个目录，起名JS，方便将ckeditor放到该目录下√ 将解压后_Samples文件夹中的ckeditor目录拷贝到JS下√ 新建网页，起名test_ckeditor√ 增加对ckeditor的引用√ 调用，主要是通过对TextBox的格式化实现富文本的显示效果√ 为了简便，我们引入JQUERY类库(一种使javascript更容易理解与编写的代码集合)，从/下载√ 将下载后的文件放到JS文件夹下√ 引用jquery（通过将jquery类库拖放到title标签下）√ 页面上添加TextBox文本框（ID：TextBox1）<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" />√ 用ckeditor插件格式化TextBox1。

在<script src="JS/jquery-1.6.2.min.js" typ e="text/javascript"></script>中添加如下代码<script type="text/javascript">var ckeditor; //定义全局变量 ckeditor$(function () {//当全部DOM元素加载完毕后执行下面语句，不加此句javascript将无法找到TextBox1ckeditor = CKEDITOR.replace("<%=TextBox1.ClientID %>"); //用CKEDITO R.replace命令将TextBox1格式化成富文本});</script>（注：以上代码表示当页面的所有元素加载完毕后用CKEDITOR.replace命令对TextBo x1这个文本框进行改造，让其看起来更炫）√ 按F5键预览，即可看到TextBox1被ckeditor格式化后的效果4、CKEDITOR个性化定制√ 这么多功能摆在这里就一个字”乱“，如何去掉我们不常用的功能呢？这就需要定义√ 双击ckeditor目录中的config.js文件，通过对其进行配置可实现您的个性化需求√ 下面给出常用的配置，供您选择/*Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or /license*/CKEDITOR.editorConfig = function (config) {// Define changes to default configuration here. For example://定义语言，此处改为中文nguage = 'zh-cn'; //中文//颜色//config.uiColor = '#AADC6E';//字体config.font_names = '宋体;楷体;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans 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', 'JustifyCenter', 'JustifyRig ht', 'JustifyBlock'] }, //对齐栏：左对齐、中心对齐、右对齐、两端对齐{name: 'colors', items: ['TextColor', 'BGColor'] }, //颜色栏：文本颜色、背景颜色{name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] }, //基本样式栏：加粗、倾斜、下划线、删除线、下标、上标、移除样式{name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule'] }, //插入栏：图像、flash、表格、水平线{name: 'links', items: ['Link', 'Unlink'] }, //超链接栏：增加超链接、取消超链接{name: 'document', items: ['Source']}//源代码栏：查看源代码];//工具栏是否可以被收缩（即：右上角的三角符号是否显示）config.toolbarCanCollapse = true;//工具栏默认是否展开config.toolbarStartupExpanded = true;// 是否允许“拖拽改变尺寸”功能（即：右下角的三角符号是否显示）config.resize_enabled = false;//当输入：shift+Enter时插入的标签config.shiftEnterMode = CKEDITOR.ENTER_P; //可选：CKEDITOR.ENTER_BR或CKEDIT OR.ENTER_DIV//回车（Enter）时产生的标签config.enterMode = CKEDITOR.ENTER_BR; //可選：CKEDITOR.ENTER_BR或CKEDITOR.E NTER_DIV//宽度//config.width = "600px";//高度//config.height = "500px";//默认样式//config.skin ：'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.autoUpdateElement = true;//绝对目录还是相对目录，为空为相对目录//config.baseHref = ''//编辑器的z-index值//config.baseFloatZIndex = 10000;//以下为上传附件的相关配置，需配合ckfinder控件使用// var ckfinderPath = "/Scripts";// config.filebrowserUrl = ckfinderPath + '/ckfinder/ckfinder.html';//上传文件时浏览服务文件夹// config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinde r.html?Type=Images';//上传图片时浏览服务文件夹// config.filebrowserFlashBrowserUrl = ckfinderPath + '/ckfinder/ckfind er.html?Type=Flash'; //上传Flash时浏览服务文件夹// config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connect or/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签) // config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/co nnector/aspx/connector.aspx?command=QuickUpload&type=Images';//上传图片按钮(标签)// config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/co nnector/aspx/connector.aspx?command=QuickUpload&type=Flash';//上传Flash按钮(标签)};①以上我们设定了控件默认语言为中文(nguage = 'zh-cn';)②默认的工具栏为Basic，并且在config.toolbar_Basic =[];中定义了工具栏中需要的功能③添加了对中文字体的支持config.font_names = '宋体;楷体;新宋体;黑体;隶书;幼圆;微软雅黑;'√ 做完以上配置，经过我们精简和优化的ckeditor呈现形式如下：二、下载安装Ckfinder，并将其整合到项目中1、解释：什么是Ckfinder？为什么要使用它？下图会给您说明2、如何下载√ 打开/，点击Download进入下载页面√ 在下载页面可以看到，ckfinder针对许多语言做了单独设计，此处我们选择√ 将下载后的文件放在JS文件夹下，然后删除_samples、_source两个文件夹（注：_sample为示例文件夹，我们不需要；_source为源代码文件夹，可以通过修改它对ckfinder默认行为进行定义：比如修改上传文件的名称，下面会讲到）3、下面讲如何将CKFinder整合到我们的应用中√ 将ckfinder目录下的ckfinder.js拖拽至title标签下方，以示引用√ 在$(function(){})中添加如下语句，将ckfinder整合至ckeditorCKFinder.setupCKEditor(ckeditor, "/JS/ckfinder/");//用CKFinder.setupCKEditor 命令将ckeditor与ckfinder进行整合说明如下：√ 添加CKFinder.dll引用，路径在JS\ckfinder\bin\Relase 下√ 按F5运行，此时再次点击”图像“按钮，会发现多出”上传“选项√ 添加上传权限默认情况下，为了安全，ckfinder不允许上传附件，如果需要上传，则需要更改JS\ ckfinder下的config.ascx文件，将CheckAuthentication()方法返回true√ 关闭验证功能。