ASP.NET中CKEditor3.2和CKFinder1.43的配置和使用！-优快云博客

本文介绍了如何将CKEditor3.2富文本编辑器与CKFinder1.43文件管理器集成到ASP.NET项目中，并提供了详细的步骤说明及示例代码。

通过在网上搜寻资料终于把CKEditor3.2和 CKFinder1.43集成在ASP.NET中使用了！！
[size=medium][color=blue]CKEditor3.2和 CKFinder1.43官方网站：[/color][/size]
[url]http://ckeditor.com/[/url]
[url]http://ckfinder.com/[/url]

[color=blue][size=medium]配置方法：[/size][/color]
1，到官方网站下载CKEditor3.2.rar和CKFinder1.43.rar文件，分别解压后放到将两个文件夹拷贝到网站的根目录下，CKEditor是编辑器，它本身并没有上传功能，所以需要集成CKFinder的上传功能。
2，将CKFinder文件夹里的bin目录下的CKFinder.dll文件拷到你自己网站的bin目录下
3，创建一个上传文件的目录upload。在默认配置的情况下，/ckfinder/userfiles/是上传目录；如果想修改上传目录，修改 config.ascx文件中的BaseUrl = "/upload/"，这里是以根目录作为绝对路径的目录，注意以反斜杠结尾。
4,确保你的文件夹能被网络访问写入。在Windows里，给IUSR_<ServerName>用户写权限；CKFinder可以结合 session来判断用户是否有权限进行上传。如果不需要进行用户身份验证，那么修改config.ascx文件里的 CheckAuthentication()函数，直接返回true。要进行身份验证，也是修改这个函数。
5,去掉上传功能中讨厌的水印提示，打开ckfinder—core—js目录下的ckfinder_gecko.js和ckfinder_ie.js两个文件，直接查找en.call(window,qo); 并注释掉就ok了。
6，在页面中嵌入编辑器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>ckeditor</title>
    <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="ckfinder/ckfinder.js" type="text/javascript"></script>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
         $("#btn").click(function(){

	        var oEditor = CKEDITOR.instances.txtCk;

	        alert( oEditor.getData() );

         });
         $("#btn1").click(function(){

            var oEditor = CKEDITOR.instances.txtCk;
	        var str="ASP.NET中CKEditor3.2和CKFinder1.43的配置和使用！"
	        oEditor.setData("<h3 style='color:blue; text-align:center;'>"+str+"</h3>");

         });       
    });


      </script>
</head>
<body>
<div style="width:900px; height:500px; margin :20px auto;">  
        <!-- 嵌入编辑器开始-->
        <textarea id="txtCk" cols="80" rows="50" name="txtCk" ></textarea>
        <script type="text/javascript">
           if (typeof CKEDITOR == "undefined") {
            document.write("加载CKEditor失败");
            }
            else {
            var editor = CKEDITOR.replace("txtCk");            
            CKFinder.SetupCKEditor(editor, "ckfinder/"); //ckfinder总目录的相对路径.
            }            
        </script>
        <!-- 嵌入编辑器结束-->
          <br />
          <input type="button" id="btn" value="获取内容"/> 
          <input type="button" id="btn1" value="设置内容"/> 
</div>
</body>
</html>

7，打开ckeditor目录下的文件config.js文件，对编辑器进行个性化配置。

CKEDITOR.editorConfig = function( config )
{	 
    //更多的相关配置请参考官方文档
	 config.language = 'zh-cn';//中文
	 config.uiColor = '#AADC6E';//编辑器颜色
	 config.height="220";//宽度
	 config.width="820";//高度
};

通过以上配置就可以体验新版的编辑器了，对于目录中一些没必要的文件可以自行删除，最后附上效果图！
[img]http://dl.iteye.com/upload/picture/pic/56813/cc6a50e0-8419-3912-88bb-e19ac985e708.jpg[/img]
[img]http://dl.iteye.com/upload/picture/pic/56815/b289151a-0f51-3b44-990c-77aaabd6779b.jpg[/img]