`
long546324
  • 浏览: 203027 次
  • 性别: Icon_minigender_1
  • 来自: 云南
社区版块
存档分类
最新评论

ASP.NET中CKEditor3.2和CKFinder1.43的配置和使用!

    博客分类:
  • .net
阅读更多
通过在网上搜寻资料终于把CKEditor3.2和 CKFinder1.43集成在ASP.NET中使用了!!
CKEditor3.2和 CKFinder1.43官方网站:
http://ckeditor.com/
http://ckfinder.com/

配置方法:
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";//高度
};


通过以上配置就可以体验新版的编辑器了,对于目录中一些没必要的文件可以自行删除,最后附上效果图!








2
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics