Ckeditor與Ckfinder整合 上傳圖片功能(.net版本)

兩天了,終於實現了Ckeditor與Ckfinder整合  上傳圖片功能。

在這裏我寫一下我的心得吧。

爲了實現新聞的編輯模塊,師兄給我介紹了Ckeditor。

首先在http://ckeditor.com/下載.net版本的Ckeditor,我這裏用的是ckeditor_aspnet_3.6.4。

下載後,解壓開。但是這裏並不是所有都是有用的,所以,可以把其中sample爲例子,source爲源文件,直接刪除,目的是爲了減少editor的體積。然後將整個文件夾直接拷貝到網站的根目錄下.引用ckeditro.net.dll

 在你需要使用editor控件的頁面頭部添加:

<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
<script type="text/javascript">
       window.onload = function () {
            CKEDITOR.replace("txtContent");
        }
</script>

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章