CKeditor的配置及上传设置

  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引用:
+展开
-HTML
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>  
<!--然后在页面中就能够使用:--> 
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"> 
<!--这里是内容-->



  这样就可以使用了。

  在asp.net下,如果想使用后台取得编辑器里的数据,可以这样来做:
+展开
-HTML
<asp:TextBox ID="txtDescn" runat="server" TextMode="MultiLine"></asp:TextBox> 
<script type="text/javascript">CKEDITOR.replace( '<%= txtDescn.ClientID %>' );</script> 



  <%= txtDescn.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

  通过这个页面先上传个文件试试,没有意外的话,就应该能使用了。

集成CKEditor:

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

集成CKEditor的代码
+展开
-HTML
 <asp:TextBox ID="txtDescn" runat="server" TextMode="MultiLine"></asp:TextBox> 
     <script type="text/javascript">       
         CKEDITOR.replace('<%= txtDescn.ClientID %>',{
         filebrowserBrowseUrl: '../Resource/ckfinder/ckfinder.html',
             filebrowserImageBrowseUrl: '../Resource/ckfinder/ckfinder.html?Type=Images',
             filebrowserFlashBrowseUrl: '../Resource/ckfinder/ckfinder.html?Type=Flash',
             filebrowserUploadUrl: '../Resource/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
             filebrowserImageUploadUrl: '../Resource/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
             filebrowserFlashUploadUrl: '../Resource/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
        });</script>  



  至此配置完成,如果路径正确的话就可以尽情体验CKeditor了!
来源:http://www.cnblogs.com/madn/archive/2009/10/30/1593042.html

加支付宝好友偷能量挖...


评论(0)网络
阅读(225)喜欢(1)JavaScript/Ajax开发技巧