CKEditor与CKFinder的配置

首先下载CKEditor与CKFinder:

CKEditor:http://ckeditor.com/

CKFinder:http://cksource.com/ckfinder

将CKEditor与CKFinder解压到工程根目录下：

 

删除CKFinder中的_samples和_source文件夹，分别为示例文件和未压缩源程序，否则编译时会出错，然后在网站中添加ckfinder\bin\Debug\CKFinder.dll文件的引用：

 

页面中添加引用CKEditor和CKFinder的引用代码(注意：服务器控件要添加class=“ckeditor”属性)：

<script src="../editor/ckeditor/ckeditor.js" type="text/javascript"></script>    <script src="../editor/ckfinder/ckfinder.js" type="text/javascript"></script>    <script type="text/javascript">
	//创建编辑器
        var editor = CKEDITOR.replace("TextBox_content");
	//为编辑器绑定上传控件
        CKFinder.setupCKEditor(editor, '/editor/ckfinder/');
    </script>
 
    <asp:TextBox ID="TextBox_content" runat="server" Height="400px" TextMode="MultiLine"
                        Width="100%" class="ckeditor"></asp:TextBox>

打开CKEditor目录下的config.js文件，在CKEDITOR.editorConfig = function( config )｛｝中添加如下代码（使图片上传功能显示出来）：

    config.filebrowserBrowseUrl = '../editor/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = '../editor/ckfinder/ckfinder.html?Type=Images';
    config.filebrowserFlashBrowseUrl = '../editor/ckfinder/ckfinder.html?Type=Flash';
    config.filebrowserUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

打开CKFinder目录下的config.ascx文件，将public override bool CheckAuthentication()｛｝的返回值修改为true（授予浏览服务器目录的权限）:

    public override bool CheckAuthentication()
    {
        return true;
    }

可以修改CKFinder的config.ascx中的BaseUrl = "/ckfinder/userfiles/";  它是服务器文件路径，用于存储图片的文件夹，这里我修改为自己的目录：

 

可以浏览服务器文件夹：

 

运行效果：