CKEdiotr是一款不错的网页富文本编辑器，其内置的功能最大满足用户的需求，先将CKEditor的简单实用做个总结，以便于日后查看、使用。我用的是.net平台，故而以下介绍的是.net的CKEditor。
第一步：获取CKEditor工具。
1.1在官网的下载页面下载你所需要的语言的CKEditor，官网是：http://ckeditor.com/download ，选择CKEditor 3.6.4 for ASP.NET（若有最新版本，建议使用最新版本，下同）。
1.2 只有CKEditor还是不够的，因为CKEditor只有富文本编辑功能没有上传功能，所以下载一个与之配套的CKFinder，官网是：http://cksource.com/ckfinder/download ，选择.net版本。
第二步：引用到项目中
2.0 把CKEditor和CKFinder两个文件复制到项目的适当位置（建议是UI层的根目录）。
2.1 使用CKEditor的时候需要在页面引用js，在解压后的CKEditor文件夹的根目录下引用ckeditor.js、config.js、ckeditor_basic.js这三个文件。
2.2 同样，需要引用CKFinder里的js文件：ckfinder.js、ckfinder_v1.js。
2.3 找到解压后的CKEditor文件夹中的ckeditor_aspnet_3.6.4inRelease目录下的CKEditor.NET.dll文件，复制到项目的Bin文件夹下并引用
2.4 找到解压后CKFinder文件夹中的ckfinderinRelease目录下的CKFinder.dll文件，复制到项目Bin文件夹中并引用。
2.5 页面注册：<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
第三步：配置CKEditor和CKFinder
3.1 CKEditor中的config.js文件是对CKEditor的配置，这里可以自定义一些自己所需要的功能，一般的，我们只需定义编辑器的语言、背景色、高度、宽度、样式、皮肤、工具栏等这些基础的东西，这些使用手写代码设置的，具体的代码如下：
config.language='zh-cn';//中文
config.skin='kama';//皮肤
//取消“拖拽改变尺寸”功能
config.resize_enabled = false;
config.width=900;//宽
config.height=400;//高
// config.uiColor = '#FFF'; //背景颜色
//全能工具栏
config.toolbar = "Full";
// 基础工具栏
// config.toolbar = "Basic";
config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;
// 自定义工具栏
// config.toolbar =
// [
// ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
// ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
// ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
// ];
config.tabSpaces = 4;
config.resize_maxWidth = 600; //如果设置了编辑器可以拖拽 这是可以移动的最大宽度
config.toolbarCanCollapse = false; //工具栏可以隐藏
//config.toolbarLocation = 'bottom'; //可选：设置工具栏在整个编辑器的底部bottom
config.resize_minWidth = 600; //如果设置了编辑器可以拖拽 这是可以移动的最小宽度
config.resize_enabled = false; //如果设置了编辑器可以拖拽
//验证非法数据
config.protectedSource.push( /<s*iframe[sS]*?>/gi ) ; // <iframe> tags.
config.protectedSource.push( /<s*frameset[sS]*?>/gi ) ; // <frameset> tags.
config.protectedSource.push( /<s*frame[sS]*?>/gi ) ; // <frame> tags.
config.protectedSource.push( /<s*script[sS]*?/scripts*>/gi ) ; // <SCRIPT> tags.
config.protectedSource.push( /<%[sS]*?%>/g ) ; // ASP style server side code
config.protectedSource.push( /<?[sS]*??>/g ) ; // PHP style server side code
config.protectedSource.push( /(<asp:[^>]+>[s|S]*?</asp:[^>]+>)|(<asp:[^>]+/>)/gi ) ;
//config.startupFocus = true; //打开时就focus
注意：这些代码全部是在config.js文件中的CKEDITOR.editorConfig = function( config ){};方法内；
3.2在CKEditor中集成CKFinder
3.2.1 在CKEditor的config.js中CKEDITOR.editorConfig = function( config ){};函数内添加如下语句：
//集成CKFinder
CKFinder.SetupCKEditor(null, '../ckfinder/');//第二个参数是ckfinder文件夹的路径，注意路径要正确
这句就是在CKEditor中集成CKFinder的语句，该语句不可少。否则不能上传图片视频等。
3.2.2 打开 " ckfinderconfig.ascx "，修改 BaseUrl 为 BaseUrl = "~/ckfinder/userfiles/";
// 注意“~” 以 userfiles 为默认路径，其目录下会自动生成images、flash等子目录。
第四步：在项目中调用CKEditor
调用的时候有人说可以把CKEditor放入工具栏中，直接拖动使用，这个方法我没有做出来(找到了，见下文)，所以又找了个方法：直接用TextBox控件，具体的使用方法如下代码：
<asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
这种使用方法与其他.net控件使用方法相同，设置Text='<%# Bind("info") %>' 可以方便与数据源进行交互;使用CKEditor必须定义class="ckeditor"
附加
F1、 常见错误及排除：
ckfind文件夹的config.ascx中找到如下语句
症状：因为安全原因，文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
语句：
public override bool CheckAuthentication()
{
reture false;
}
原因：未设置用户身份验证或者用户未登录，设置为 reture true;（不进行用户身份验证）即可。
症状：未知错误
语句：
public override bool CheckAuthentication()
{
reture true;
}
原因：设置不进行用户身份验证，但是 BaseUrl 路径不对。
调试页面，出现“A potentially dangerous Request.Form value was detected from the client",按照经验，在web.config中增加
<system.web>
<pages validateRequest="false"/>
system.web>
还是同样错误，在页面头部加入，
还是出错。
后来终于试着在config.js文件中添加下面一行：
config.htmlEncodeOutput = true;
OK!
F2、 解压后的CKEditor和CKFinder文件释义，如下图
图F2-1 CKFinder文件夹
图F2-2 CKEditor文件夹
F3、Config.js文件里的其他设置
//自定义的一些表情图片，对应的也要将表情包中名词改变；
config.smiley_images = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif',
'17.gif','18.gif','19.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif',
'31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif','42.gif','43.gif','44.gif',
'45.gif','46.gif',"47.gif",'48.gif','49.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif',
'59.gif','60.gif','61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif','71.gif','72.gif'];
//设置工具栏里面的工具 最主要的config.toolbar = [
['Bold','Italic','Underline','Strike','FontSize','NumberedList','BulletedList','Outdent','Indent','JustifyLeft',
'JustifyCenter','JustifyRight','Link','Unlink','TextColor','BGColor','Image','Flash','Smiley','Table',
'RemoveFormat','Source']
];
工具设置：
config.toolbar =
[
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
['Font', 'FontSize'],
['TextColor', 'BGColor'],
[ 'Undo', 'Redo']
];
F4、把CKEditor放入VS的自定义工具栏
首先找到ckeditor_aspnet_3.6.4inRelease目录下的CKEditor.NET.dll文件,放在一个不容易删且合适的位置，在VS的工具栏中右击，然后选择添加选项卡，设置名字为CKEditor，在CKEditor选项卡中右击，选择“选择项”，在“.NET Framework组件”中浏览到你刚才放的dll文件，然后确定。OK搞定！现在CKEditorControl控件已经出现在你的工具选项卡里了，其使用你可以参考TextBox的使用。