zoukankan      html  css  js  c++  java
  • CKeditor在.net环境下的配置

    本文源地址:http://licheng3222.blog.163.com/blog/static/6109936720101145839330/

     

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

    <mce:script type="text/javascript" src="ckeditor/ckeditor.js" mce_src="ckeditor/ckeditor.js"></mce:script>

    然后在页面中就能够使用:

    <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">这里是内容 这样就可以使用了。

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

    <asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine">

    </asp:TextBox><mce:script type="text/javascript">

    <!--       CKEDITOR.replace( '<%= txtContent.ClientID %>' ); // -->

    </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还不具备上传功能,得把两个东西集成在一起。代码相当简单:

    C#代码 CKeditor在.net环境下的配置 - kerry - kerry的日志

     1 <asp:TextBoxID="txtContent"runat="server"TextMode="MultiLine"></asp:TextBox>   
     2     <mce:scripttype="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 <textareaid="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>  
    20 

    <asp:TextBoxID="txtContent"runat="server"TextMode="MultiLine"></asp:TextBox> <mce:scripttype="text/javascript"><!-- // This call can be placed at any point after the // <textarea>, or inside a <head><script> in a // window.onload event handler. // Replace the <textareaid="editor"> with an CKEditor // instance, using default configurations. CKEDITOR.replace('<%= txtContent.ClientID %>', { filebrowserBrowseUrl: '../ckfinder/ckfinder.html', filebrowserImageBrowseUrl: '../ckfinder/ckfinder.html?Type=Images', filebrowserFlashBrowseUrl: '../ckfinder/ckfinder.html?Type=Flash', filebrowserUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files', filebrowserImageUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images', filebrowserFlashUploadUrl: '../ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash' } ); // --></mce:script> 

     

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

  • 相关阅读:
    互联网改变的产业 汽车 x 互联网 = 汽车革命
    我有一个实现HMI触摸屏的资源【4418开发平台】降d成本
    iTOP-4412开发板裸机开发环境文档分享
    2019年最受欢迎iTOP-4418开发板_新产品研发必备利器
    安卓触控一体机为什么得到大家认可?远比Windows系统一体机大受欢迎
    新手入门嵌入式学习单片机?stm32?树莓派?4412开发板资料大汇报-基础了解
    iTOP-4418开发板-Qt系统下运行摄像头测试程序
    iTOP-4418/6818开发板-QtE4.7WIFI_MT6620热点
    iTOP-4412开发板-使用PartitionManager分区之后tf卡无法识别
    迅为iTOP-4418/6818开发板-MiniLinux-GPS使用文档
  • 原文地址:https://www.cnblogs.com/angells/p/1682141.html
Copyright © 2011-2022 走看看