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引用：

    view plaincopy to clipboardprint?
    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下，如果想使用后台取得编辑器里的数据，可以这样来做：

    view plaincopy to clipboardprint?
    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还不具备上传功能，得把两个东西集成在一起。代码相当简单：

    view plaincopy to clipboardprint?
    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吧！
  • 相关阅读:
    除法
    01.python对象
    00.基础入门
    00.斐波那契数列第n项
    16.分治排序
    15.快速排序
    14.插入排序--希尔排序(缩小增量排序)
    13.插入排序--直接插入排序(简单插入排序)
    12.选择排序
    11.冒泡排序
  • 原文地址：https://www.cnblogs.com/hannover/p/2122483.html
Copyright © 2011-2022 走看看