CKEditor 3.6 + CKFinder 2.0在Asp.Net中的配置与基本用法
分类： Asp.Net 前端应用 2011-08-21 03:20 288人阅读 评论(3) 收藏 举报
 
前言
之前的项目中一直使用的是FCKeditor，昨天突然有个想法：为什么不试一下新的CKEditor呢？于是花了大半天的时间去学习它的用法，现在把我的学习过程与大家分享一下。
谈起FCKeditor，相信没几个Web程序员不知道的吧。不过，官方已经停止了该产品的更新，其最新版是2.6.6，于2010年2月15日发布。
取代FCKeditor的产品叫CKEditor（Content And Knowledge Editor），与其说是对FCKeditor的升级，不如说是全新的一个产品。相比FCKeditor，其加载速度更快，功能更强大，更丰富的插件和API，更友好的界面，生成的html更标准化。我们先一睹它的风采吧。
它与FCKeditor最大的一个区别是CKEditor不集成文件上传与管理功能（乍一看到，心里瓦凉瓦凉的），这部分被独立出来放到另一个产品CKFinder中，这是一个商业授权的产品。CKEditor + CKFinder 两者结合起来才算一个完整的在线编辑器，所以我会把它们的配置放到一起，毕竟两者是缺一不可的。接下来我们看看如何在项目中使用它们吧。
(一)  下载和部署
目前CKEditor最新版为3.6.1，于2011-6-16发布。官方下载地址：ckeditor/download。
CKEditor.NET，最新版为3.6.1，于2011-6-17发布，这是CKEditor的.Net的源码项目。 官方下载地址：ckeditor/download，请选择ASP.NET版下载。
CKFinder的最新版为2.0.2.1，于2011-4-19发布。官方下载地址：ckfinder/download，请选择ASP.NET版本下载。
分别解压下载下来的这3个文件，并把解压后的ckeditor_3.6.1和ckfinder_aspnet_2.0.2.1文件夹拷贝到你的项目中（解压出来后的文件夹原本是ckeditor和ckfinder，但我更习惯把
他们的版本号也加上去，方便项目后期的追踪），把“ckeditor_aspnet_3.6.1\bin\Release\CKEditor.NET.dll”和“ckfinder_aspnet_2.0.2.1\bin\Release\CKFinder.dll”这两个文件拷贝到网站根目录下的bin文件夹中，下面是部署后的目录结构图。
注意：
1. 不要拷贝ckfinder_aspnet_2.0.2.1下的_source（源代码项目）和bin文件夹，否则将导致无法成功编译你原来的项目。
2. 你可以把CKEditor和CKFinder放到你喜欢的任意目录中，然后正确配置他们的基路径（接下来就会说到），这丝毫不影响使用。
(二)  配置和使用
CKFinder的必要配置
打开/editor/ckfinder_aspnet_2.0.2.1/ config.ascx文件，完成验证逻辑（非常重要）、设置文件保存路径。
view plaincopy to clipboardprint?
1. public override bool CheckAuthentication() 
2. { 
3.     // WARNING : DO NOT simply return "true". By doing so, you are allowing  
4.     // "anyone" to upload and list the files in your server. You must implement  
5.     // some kind of session validation here. Even something very simple&  
6.     //  
7.     //      return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );  
8.     //  
9.     // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the  
10. // user logs on your system.  
11. //重视上面这段话，在用户试图管理文件前，你必须在这里验证用户是否有权限操作，  
12. //比如检查用户是否登录了，等等。如果验证成功，返回true，  
13. //否则返回false以拒绝此操作。  
14. //如果你直接返回true，这将是非常危险的，任何一个人，只要知道你ckfinder的路径，  
15. //都可以随意上传或者删除文件，这将是毁灭性的  
16.  
17.     //return false;  
18.     return true; 
19. } 
20.  
21. /** 
22.  * All configuration settings must be defined here. 
23.  */ 
24. public override void SetConfig() 
25. { 
26.     // Paste your license name and key here. If left blank, CKFinder will  
27.     // be fully functional, in Demo Mode.  
28. aspnet和net的区别    LicenseName = ""; 
29.     LicenseKey = ""; 
30.  
31.     // The base URL used to reach files in CKFinder through the browser.  
32. BaseUrl = "/ckfinder/userfiles/";   //在这里指明你想把上传的文件放到哪里  
33. // The phisical directory in the server where the file will end up. If  
34. // blank, CKFinder attempts to resolve BaseUrl.  
35. BaseDir = ""; 
36.  
37. //后面还有代码  
38. //... 
接下来，你可以通过以下3种方式使用CKEditor，使用哪一种取决于你的偏好和习惯。
方式1 控件加载法
这是在.Net环境下最简便的方式，对于习惯了拖控件的同志们来说，这是最好的方式，推荐使用。
1. 添加CKEditorControl控件
在Visual Studio左侧的工具箱中点击右键，在弹出的菜单中选择“选择项(I)…”①菜单，将弹出选择工具箱项窗口，点击“浏览”按钮②在你网站根目录的Bin文件夹中到刚刚添加的CKEditor.NET.dll③，一路点确定完成。你会发现工具箱里多了一个叫“CKEditorControl”的控件，没错，那个就是我们需要的CKEditor编辑器控件。
2. 添加dll引用
右键点击你的Web项目，选择“添加引用(R)…”菜单，到之前拷贝进来的CKEditor.NET.dll和CKFinder.dll，点击“确定”按钮完成操作，见下图。
3. 还等什么，赶快试用吧
双击该控件或直接把该控件拖放到你的aspx页面中，并配置CKEditor的基路径BasePath。
view plaincopy to clipboardprint?
1. <CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"   
2. BasePath="/editor/ckeditor_3.6.1/"></CKEditor:CKEditorControl> 
说明：若你的CKEditor放在根目录的ckeditor文件夹中，你无需配置BasePath属性，直接把控件拖到页面中就能正常使用，CKEditor将自动搜索该路径。CKFinder的默认基路径为根目录下的ckfinder。下面提到的基路径配置规则与此相同。
后台代码，必须创建一个CKFinder并绑定到CKEditor上，以使用文件上传与管理功能。
view plaincopy to clipboardprint?
1. protected void Page_Load(object sender, EventArgs e) 
2. { 
3.     CKFinder.FileBrowser fileBrowser = new CKFinder.FileBrowser(); 
4.     fileBrowser.BasePath = "/editor/ckfinder_aspnet_2.0.2.1/";  //设置CKFinder的基路径  
5.     fileBrowser.SetupCKEditor(CKEditorControl1); 
6. } 
恭喜你，你已经学会了CKEditor的使用方法，运行页面去体验一下吧。
方式2 使用官方原始的JavaScript方式加载
1. 必要的配置
打开/editor/ckeditor_3.6.1/config.js，配置CKEeditor的基路径，如下：
view plaincopy to clipboardprint?
1. CKEDITOR.editorConfig = function( config ) 
2. { 
3.     // Define changes to default configuration here. For example:  
4.     // config.language = 'fr';  
5.     // config.uiColor = '#AADC6E';   
6.     basePath = '/editor/ckeditor_3.6.1/';   //配置CKEditor的根路径  
7.  
8. }; 
2. 使用
首先在页面中引入CKEditor和CKFinder的js文件。
view plaincopy to clipboardprint?

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。