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

long546324

浏览: 207044 次
性别:
来自: 云南

最近访客更多访客>>

mzguodong

as84568326

扁舟垂钓

gxpcw

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

.net

ASP.net .net ASP IE Windows

通过在网上搜寻资料终于把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
踩

分享到：

css兼容性问题 | ASP.NET中FCKEDITOR在线编辑器的用法

2010-03-17 11:08
浏览 3091
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论