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）

√ 用ckeditor插件格式化TextBox1。在中添加如下代码

（注：以上代码表示当页面的所有元素加载完毕后用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";