ASP.Net中CKEditor和CkFinder的使用

 

一.CKEditor的使用

1.将CKEditor解压到网站js目录下

2.添加对editor.js的js引用到页面

<script src="js/ckeditor/ckeditor.js" type="text/javascript"></script>

3.页面添加服务端控件TextBox

增加CssClass="ckeditor"和TextMode="MultiLine"

 

二.CKFinder的使用

1.将CKFinder解压到网站js目录下

2.复制/bin/Release目录下的ckfinder.dll文件至站点bin目录

3.页面page指令中加入ValidateRequest="false"

 

 三.与CKEditor集成

1.打开CKEditor目录中的config.js文件在function 函数中加入

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

        var ckfinderPath = "/js"; //改成ckfinder相对网站（不是应用）根目录的绝对路径
        config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html';
        config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?Type=Images';
        config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?Type=Flash';
        config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
        config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
        config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
};

2.确保你的文件夹能被网络访问写入。在Windows里，给IUSR_<ServerName>用户写权限；CKFinder可以结合 session来判断用户是否有权限进行上传。如果不需要进行用户身份验证，那么修改config.ascx文件里的 CheckAuthentication()函数，直接返回true。要进行身份验证，也是修改这个函数。

如： if (Session["已经登陆"] != null && (bool)Session["已经登陆"] == true)
        {
            return true;
        }
        return false;

3.创建一个上传文件的目录。在默认配置的情况下，/ckfinder/userfiles/是上传目录；如果想修改上传目录，修改config.ascx文件中的BaseUrl = "/uploads/"，这里是以根目录作为绝对路径的目录，注意以反斜杠结尾。其目录下会自动生成images、flash等子目录。 

最终效果图：