asp.net使用ckeditor_3.6.2+ckfinderckfinder_aspnet_2.1.1设置上传图片功能

小渣渣

CKEditor和CKFinder的最新版可以到官方网站（http://cksource.com）上下载获得。

把以上两个资源放到网站的根目录： /CKEditor（这里在3.6.2版本中要把压缩文件夹里面的_Samples\ckeditor文件夹放进去） 和 /CKFinder (不区分大小写，这里的文件夹可以直接放进去。)

注，这里有时生成会出现错误。比如有重复的AssemblyTitle类型标签，主要是因为网站有不止一个AssemblyInfo.cs，可以把下载中的这个文件删除。或是把_source这个文件夹删除。如里这里再有问题可以联系本人：本人QQ：515072775

在页面使用 CKEditor：

<textarea cols="80"id="prcontent" name="content" rows="50">你好，你的使用成功了！</textarea>

<scrip去掉ttype="text/javascrip去掉t">

CKEDITOR.replace('content', { height:200, width: 520 });

</scrip去掉t>

CKEditor 本身不自带上传功能，所以需要配合CKFinder才可以实现上传

第一步：网站需要引用CKFinder的dll（目录：/CKFinder/bin/Release/CKFinder.dll）

第二步：配置CKEditor的config.js (目录：/CKEditor/config.js ) 在CKEDITOR.editorConfig函数里加上，不需要的功能可以去掉


CKEDITOR.editorConfig = function(config) {
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要写成"~/ckfinder/..."或者"/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth = '800';  //“浏览服务器”弹出框的size设置
config.filebrowserWindowHeight = '500';
}
CKFinder.setupCKEditor(null, '../ckfinder/');//注意ckfinder的路径对应实际放置的位置

CKFinder的配置：

打开“ckfinder\”下的用户控件config.ascx，更改其BaseUrl路径：

BaseUrl = "~/ckfinder/userfiles/";//or BaseUrl = "ckfinder/userfiles/";





这里要加一条：要在IIS中测试才有用。不然的话上传图片不成功，你会以为配置还有什么问题。

配置完成后CKEditor 就带有上传功能了，但假如上传图片时，图片的文件是用原来图片的名字，想改为随机文件名呢，怎么办？接着看第三步。

第三步：修改CKFinder的源码。CKFinder自带有源码，目录：/CKFinde/_source

在VS里新建一个 现在的项目 指向CKFinde/_source/CKFinder.Net.sln，这里下载的解决方案文件可能在vs2008中打不开，可以选择添加一个新项目中或是使用更新版本的vs打开。

1) 打开/Settings/ConfigFile.cs文件

定位27行，添加一个属性：public bool RandomReName; //随机重命名

定位67行，给刚才的属性赋值：RandomReName = true; //默认值为true

保存关闭文件

2) 打开/Connector/Config.cs文件

定位62行，添加一个属性：

public bool RandomReName

{

get { returnSettings.ConfigFile.Current.RandomReName; }

}

保存关闭文件

3) 打开/Connector/CommandHandlers/FileUploadCommandHandler.cs文件

定位64行，添加一句判断代码：

if ( Config.Current.RandomReName) //使用随机名

sFileName =DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." +sExtension;


保存关闭文件
4) 重新生成项目，把/ckfinder/_source/bin/Debug/CKFinder.dll覆盖/ckfinder/bin/Release/CKFinder.dll或者网站项目去掉之前加入的引用再重新从CKFinder.Net项目里的Dll
最后一步：打开/ckfinder/config.ascx
定位40行，添加一属性：（其实这个加不加都可以的，因为之前有设置默认值，但使用原名时一定要设置为false）

//上传完毕后使用随机文件名

RandomReName = true;


保存关闭

好了，到此已经配置成功了，CKEditor 可以有上传功能了。其它的功能的设置，有空再继续研究~

还要提醒一句：CKEditor 和 CKFinder 文件夹里有很多不需要的东西，例如名字带有下划线前辍的，.net项目不需要php,asp的。

如果上传文件出现错误：因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.

需要修改config.ascx文件中

public override bool CheckAuthentication()
{
reture false;
}
修改为:

public override bool CheckAuthentication()
{

// 窗体验证时用
returnRequest.IsAuthenticated;

}



三、在页面应用CKEditor控件【a，b两种方法】

【a: 引用压缩包内的 INSTALL.html 】

If you want to integrate CKEditor with your ASP.NET page, follow the steps outlined below.

1.  Go to the official CKEditor download site and download the latest versions of both CKEditor 3.x and the CKEditor for ASP.NET Control.
2.  Unpack both installation packages to a desired locatio去掉n.
3.  Add a reference to the CKEditor for ASP.NET Control to your website.
     In Visual Studio use the Add Reference command and browse to the bin\Release\CKEditor.NET.dll file from the unpacked CKEditor for ASP.NET     installation package. You can also manually copy the DLL file to the bin folder of your application.
4.  Copy the unpacked editor files from the CKEditor 3.x installation package and paste them into the application directory of your website.
5.  Register the CKEditor for ASP.NET Control in your page:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6.  Insert a CKEditor instance into the page body:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
【b】

1、在页面的<head>中添加对应的js引用：

    <scrip去掉t type="text/javascrip去掉t" language="javascrip去掉t" src="ckfinder/ckfinder.js"></scrip去掉t>
    <scrip去掉t type="text/javascrip去掉t" language="javascrip去掉t" src="ckeditor/ckeditor.js"></scrip去掉t>
2、然后，在<body>中需要放置该控件的位置加入如下代码，分别有以下几种使用方法：

（1）给控件添加指定的class属性
    <textarea id="textarea1" name="editor1" class="ckeditor">hello!</textarea>
服务器控件：
    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>

（2）注入js代码——此处js代码最好写在控件之后，也可以写在<head>中
    <textarea id="textarea1" name="editor1">hello!</textarea>
    <scrip去掉t type="text/javascrip去掉t">
        CKEDITOR.replace('editor1', { height:400, width:800 });
    </scrip去掉t>
服务器控件：
    <asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
    <scrip去掉t type="text/javascrip去掉t">
        CKEDITOR.replace('<%=mckeditor.ClientID %>');
    </scrip去掉t>
=============================================================================================================
Second参考：
asp.net下ckeditor3.0.1和ckfinder_aspnet_1.4.1.1的配置方法
按照http://ckeditor.com.cn/docs/的提示，在网页上配置好了CKEditor，在浏览器中查看，感觉CKEditor的界面确实非常美观，可当我兴高采烈的想要尝试一下图片上传功能时，却没有看到上传图片的按钮。

继续在网上搜索，结论是“CKEditor 本身不具备上传功能，需要集成 CKFinder 才能实现上传功能”。
接着下载了CKFinder 1.4.1.1 for Asp.net，解压后，将ckfinder文件夹放到项目根目录下——因为网上的很多资料都说，最好把CKEditor和CKFinder放在同一级目录下。而这样一来，我们的项目里就会平白无故的多出两个文件夹来。我本人是有代码洁癖的，我觉得，
留一个文件夹，以示对作者的尊重，这样就足够了。要留两个，会让我觉得很不舒服。


在将CKFinder集成到CKEditor之前，我们还要对CKFinder进行一些配置。聪明的朋友应该很容易想到，既然是上传文件的插件，要配置的东西多半是上传文件的路径。

CKFinder默认的上传路径是在其本身目录下的userfiles文件夹，不过，我已经将CKFinder放到CKEditor文件夹里了，要是把图片再存放到userfiles里面，系统就得绕过三层文件夹去找文件或图片了，于是，我打算将图片上传到项目根目录下的upFile文件夹里。
要实现这一功能，需要修改CKFinder下的config.ascx文件，将BaseUrl = "/ckfinder/userfiles/"修改为BaseUrl = "~/upFile/"。然后，将CKFinder/bin文件夹下的CKFinder.dll文件剪切到系统项目的bin文件夹里。或者通过添加引用的方式，将CKFinder.dll引入到项目中。
接下来，我们就可以使用带有文件上传功能的CKEditor了：

把CKFinder文件夹放到CKEditor文件夹内，在页面中，引入两者的js文件：

<scrip去掉tsrc="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascrip去掉t"></scrip去掉t>

<scrip去掉t src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascrip去掉t"></scrip去掉t>
至于将编辑器引用到控件上，网上有如下两种方法：

一是使用客户端控件textarea:

<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>

<scrip去掉t type="text/javascrip去掉t">

var editor = CKEDITOR.replace('txtContent');

CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');

</scrip去掉t>

二是使用服务器端控件textbox:

<asp:TextBox id="txtContent" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>

<scrip去掉t type="text/javascrip去掉t">

var editor = CKEDITOR.replace('txtContent');

CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');

</scrip去掉t>个人觉得，既然是asp.net的程序，那就用服务器端的控件吧。尽管运行效率比客户端控件要慢一点，但开发效率要快一些。而且，作为程序员，我们总是喜欢是尝试所有的可能性，然后再选择自己喜欢的那一种。

其实，这里也可以不使用Text='<%# Bind("info") %>'来对控件进行赋值，直接在后置代码中使用

this.txtContent.Text=”初始值”
    也是可以的。取值的时候，也可以直接使用如下代码：

CKFinder和CKEditor的代码。当我直接运行带有编辑器的页面时，编译器提示如下错误：

string content=this.txtContent.Text
    注意：TextMode="MultiLine"属性必不可少，否则取到的将是空值。

在调试程序之前，我没有精简

命名空间“System.Web.UI.Design”中不存在类型或命名空间名称“ControlDesigner”(是缺少程序集引用吗?)

出错的地方在ckeditor\ckfinder\_source\FileBrowserDesigner.cs的第19行，于是，索性把文件精简一下：

第一步，精简ckeditor：将 _samples、_source文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js三个语言文件；

第二步，精简ckfinder：将 _samples、_source文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js三个语言文件。

这里请注意js代码的第二行：CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');，这里的“http://www.cnblogs.com/ckeditor/ckfinder/”是ckfinder与当前页面的相对路径，
请大家不要直接复制粘贴代码，否则在上传图片时，可能会出现如下错误：

说明: HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除，或其名称已更改，或暂时不可用。请检查以下 URL 并确保其拼写正确。

请求的URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx

所以，如果您不想同我一样把ckfinder放到ckeditor文件夹里，那也没关系，只要你在这里把路径修改填写正确就可以了。

我以为这样就算是做完了所有的工作了，但当我上传图片时，却又弹出了如下的提示信息：

因为安全原因,文件不可浏览.请联系系统管理员并检查CKFinder配置文件。

没办法呀 ，俗话说，好事多磨。我又只能去请教最好的老师——百度了。复制上面的提示信息到百度搜索框，回车后找到了一条关于PHP整合ckeditor的帖子，对比了一下，抱着试一试的心态，居然把这样问题解决了。方法是这样的：

修改CKFinder下的config.ascx文件，将public override bool CheckAuthentication()函数的返回值由return false修改为return true。

再次测试，图片上传成功！