zoukankan      html  css  js  c++  java
  • CKEditor3.0在asp.net环境下上传文件的配置,集成CKFinder

    FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它能在asp、asp.net、PHP、JSP等多个平台下使用,并且支持大部分浏览器,所以在它出现的6年时间里,成为了最流行的文字编辑器。
    随着技术的发展,很多更新更方便的东西为开发者提供了更大的便利。在这种情况下,FCKeditor团队推出了一个FCKeditor的重写版本——CKEditor。
    新版本的CKEditor加载速度更快、更方便使用,在新版本的基础上又一个全新的用户界面,甚至可以让用户精确地自定义颜色。CKEditor经过了重写,提供了丰富而强大的集成和互动的API。该编辑器是完全基于插件的,它可以扩展和所有部件以符合所有需求。
    新版本的CKEditor只提供了基本的文本编辑功能,上传模块由另一个组件CKFinder。如果同时需要上传功能,就需要再下载CKFinder(http://www.ckfinder.com/)。

    CKEditor的配置


    下面我们看一下在asp.net环境中如何使用新版本的CKEditor和CKFinder。

    CKEditor的配置相对FCKeditor来说非常简单。将文件夹拷贝到你的程序目录,然后你只需要在页面中添加js引用:

    1. <mce:script type="text/javascript" src="ckeditor/ckeditor.js" mce_src="ckeditor/ckeditor.js"></mce:script>  
    2. 然后在页面中就能够使用:  
    3. <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">  
    4. 这里是内容  

    这样就可以使用了。

    在asp.net下,如果想使用后台取得编辑器里的数据,可以这样来做:

    1. <asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine"></asp:TextBox>  
    2. <mce:script type="text/javascript"><!--  
    3.    
    4.       CKEDITOR.replace( '<%= txtContent.ClientID %>' );   
    5. // --></mce:script>  

    <%= txtContent.ClientID %>是服务器控件被编译过以后在HTML中显示的ID名,这样就可以通过后台调用编辑器中的数据了。

    为了减少编辑器的大小,可以删除一些不必要的文件,如把_samples、_source、_tests三个文件夹删除,进入lang文件目录,保留en.js、zh.js、zh-cn.js三个文件,其余的语言文件如果你用不到,可以删除。

    CKFinder的配置:


    1、把解压后的/ckfinder/夹拷贝到你的web目录下;然后把bin目录下的dll文件拷到你自己的bin目录下。
    2、创建一个上传文件的目录。在默认配置的情况下,/ckfinder/userfiles/是上传目录;如果想修改上传目录,修改config.ascx文件中的BaseUrl = "/uploads/",这里是以根目录作为绝对路径的目录,注意以反斜杠结尾。
    3、确保你的文件夹能被网络访问写入。在Windows里,给IUSR_<ServerName>用户写权限;CKFinder可以结合session来判断用户是否有权限进行上传。如果不需要进行用户身份验证,那么修改config.ascx文件里的CheckAuthentication()函数,直接返回true。要进行身份验证,也是修改这个函数。
    4、编辑config.ascx文件。确保你已经正确设置该文件中的设置,并确定CKFinder在里面。

    然后测试是否可用,运行下面这个页面:

    /ckfinder/_samples/aspx/standalone.aspx

    没有意外的就,应该能使用了。

    PS:网上一些教程说CKFinder需要付费才能上传,那是放屁。未注册的CKFinder照样可以使用全部功能,只不过在编辑器里放了个LOGO而已。

    与CKEditor集成:

    按照上面的配置好以后,理论上CKEditor和CKFinder都应该能使用了。但是这个时候CKEditor还不具备上传功能,得把两个东西集成在一起。代码相当简单:

    1. <asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine"></asp:TextBox>  
    2.     <mce:script type="text/javascript"><!--  
    3.        // This call can be placed at any point after the  
    4.        // <textarea>, or inside a <head><script> in a  
    5.        // window.onload event handler.  
    6.   
    7.        // Replace the <textarea id="editor"> with an CKEditor  
    8.        // instance, using default configurations.  
    9.        CKEDITOR.replace('<%= txtContent.ClientID %>',  
    10.                  {  
    11.                      filebrowserBrowseUrl: '../ckfinder/ckfinder.html',  
    12.                      filebrowserImageBrowseUrl: '../ckfinder/ckfinder.html?Type=Images',  
    13.                      filebrowserFlashBrowseUrl: '../ckfinder/ckfinder.html?Type=Flash',  
    14.                      filebrowserUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',  
    15.                      filebrowserImageUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',  
    16.                      filebrowserFlashUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'  
    17.                  }  
    18.                 );  
    19. // --></mce:script>  

    如果路径没有配置错误,那么恭喜你,享受全新的CKEditor吧!

  • 相关阅读:
    Fidder4 顶部提示 “The system proxy was changed,click to reenable fiddler capture”。
    redis 哨兵 sentinel master slave 连接建立过程
    虚拟点赞浏览功能的大数据量测试
    python基础练习题(题目 字母识词)
    python基础练习题(题目 回文数)
    python基础练习题(题目 递归求等差数列)
    python基础练习题(题目 递归输出)
    python基础练习题(题目 递归求阶乘)
    python基础练习题(题目 阶乘求和)
    python基础练习题(题目 斐波那契数列II)
  • 原文地址:https://www.cnblogs.com/hannover/p/2122483.html
Copyright © 2011-2022 走看看