Ckeditor与Ckfinder整合 上传图片功能(.net版本)

test

两天了，终于实现了Ckeditor与Ckfinder整合  上传图片功能。

在这里我写一下我的心得吧。

为了实现新闻的编辑模块，师兄给我介绍了Ckeditor。

首先在 http://ckeditor.com/ 下载.net版本的Ckeditor，我这里用的是ckeditor_aspnet_3.6.4。


          下载后，解压开。但是这里并不是所有都是有用的，所以，可以把
         
            其中sample为例子，source为源文件
            ，直接删除
            ，目的是为了减少editor的体积。然后将整个文件夹直接拷贝到网站的根目录下.引用
            ckeditro.net.dll
         
        


       在你需要使用editor控件的页面头部添加：
   


        
          <scrip去掉t src="/ckeditor/ckeditor.js" type="text/javascrip去掉t"></scrip去掉t>
         

          <scrip去掉t type="text/javascrip去掉t">
         

                 window.onload = function () {
         

                      CKEDITOR.replace("txtContent");
         

                  }
         

          </scrip去掉t>
        
      


        body里面
        ：
      

<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor/" runat="server">
</CKEditor:CKEditorControl>

后台代码也很简单：

article.ARTICLECONTENT = CKEditor1.Text; //这是把编辑的内容赋值给article的model类的ARTICLECONTENT 字段里面。

这样，我的编辑器成功的完成了！

但是一个很大的问题又出现了，那就是Ckeditor没有上传图片的功能，这个真心让人头疼。这么办？上网百度呗。

一上网，发现了有很多的方法可以解决，有的说是，在编辑器的外面自作一个图片上传的功能，然后在传进服务器的时候也顺带着把他的服务器链接路径传进编辑器的当前光标，那就去实现吧，做着做着，突然发现你点外面的上传图片时，光标根本就不在编辑器里了，这怎么办？？？想啊想，唉，以目前的知识，我是没办法搞定的了，只能放弃吧。（如果有哪位大神知道了，留言告诉我一下啊，谢谢）；有的说，自己写一个JS来实现这个功能，然后插在编辑器里，来完成他，这样的文章有很多：

1、 http://www.cnblogs.com/lts8989/archive/2011/08/04/2127326.html

2、 http://www.cnblogs.com/striiiiing/archive/2012/08/15/2640792.html

这两篇我是觉得挺不错的，但是，我自己JS知识薄弱，试着写了一下，但是还是没能成功的实现。

好吧，看来我只能用Ckeditor与Ckfinder整合了，本来很不想用Ckfinder的，因为他是收费的，不爽！！！但是那有啥，不在官网下就好了，我自己直接我网上下资源咯，好吧终于我找到了一个提供了很详细的资源的（在这里要感谢一些这位兄弟！！）网址： http://download.csdn.net/download/q8347901/3887066 （这里有Ckeditor与Ckfinder还有详细的介绍文章，very good！）

把Ckfinder下了下来，然后 复制/bin目录下的ckfinder.dll文件至站点bin目录 ，.复制ckfinder目录至站点根目录下(可另选择路径) ，引用 ckfinder.dll

配置一下：

如果是在要Ckeditor的.aspx页面上的话是如下：

CKEDITOR.replace( '您要启用编辑功能的文本框',
{
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'
}  
);

当然用全局配置的方法

在 Ckeditor插件的 config.js 中配置

config.filebrowserBrowseUrl="/ckfinder/ckfinder.html";
config.filebrowserImageBrowseUrl="/ckfinder/ckfinder.html?Type=Images";
config.filebrowserFlashBrowseUrl="/ckfinder/ckfinder.html?Type=Flash";   
config.filebrowserUploadUrl="/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files";   
config.filebrowserImageUploadUrl="/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images";   
config.filebrowserFlashUploadUrl="/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash";



配置完之后在修改一下ckfinder中的config.ascx

CheckAuthentication()中 返回true 不然会上传不上 需要验证

SetConfig()中 BaseUrl 这个路径是上传的路径 修改一下

还有 注意一下后 别忘了引用 ckfinder中的bll文件

好了，你的整合与上传图片就成功完成了。
另外，如果想隐藏”图像“面板中的”超链接“和”高级“选项卡，可以在CKEditor的plugins/image/dialogs/image.js中

搜索"Link"和”advanced“在”id:'Link',“和”id:'advanced',“加入”hidden:true,“即可。

如果说你那要改善一下外观和优化一下你的网站，就看看下面一些个文章。

1、 http://www.cnblogs.com/netec/archive/2009/11/02/ckeditor_ckfinder.html

2、 http://blog.csdn.net/lulu_jiang/article/details/5532345

3、 http://blog.csdn.net/hzq1074/article/details/5893475