2014-02-20 197 views
2

我在我的cakePHP應用程序中使用ckeditor 4.2。 我已經將它安裝在我的app/webroot/js/ckeditor目錄中。CKEditor圖片上傳不起作用

我想在我的ckeditor中有一個圖像上傳選項,所以我下載了ckeditor圖像插件(http://ckeditor.com/addon/image)。 我使用下面的文檔安裝它(http://www.paulfp.net/blog/2010/10/how-to-add-and-upload-an-image-using-ckeditor/

現在,圖像上傳界面看起來不錯,但是當我點擊「發送到服務器」按鈕時,它不會調用PHP腳本。我已經在我的config.js中設置了「filebrowserUploadUrl」的路徑,但它仍然不起作用。我已經完成了與上述文檔相同的設置,但我無法調用該腳本。

注意:當我點擊「發送給服務器」按鈕,出於某種未知原因,我看到controller_name/undefined操作正在被調用。

+0

請,提供源代碼,這將幫助我們來幫助你。似乎config.js需要,routes.php如果您使用自定義路由和...應該上傳文件的行動的內容。另外,你確定文件權限? – Vadim

回答

0

或者,您可以使用KCFinder。它是免費的開源Web文件管理器。它可以集成到FCKeditor,CKEditor和TinyMCE所見即所得網絡編輯器(或您的自定義網絡應用程序)中,以上載和管理可嵌入到編輯器生成的HTML內容中的圖像,Flash動畫和其他文件。

http://kcfinder.sunhater.com

0

CKEditor的是幾乎所有的Web開發人員最喜愛的基於網絡的文字處理器。但問題是,它沒有內置圖像上傳功能,即CKEditor不知道如何處理圖像上傳。所以我們會分配一個知道如何處理圖片上傳和文件管理的助手。

我們的助手是KCFinder,一個免費的開源Web文件管理器。它可以集成到FCKeditor,CKEditor和TinyMCE所見即所得網絡編輯器(或您的自定義網絡應用程序)中,以上載和管理可嵌入到編輯器生成的HTML內容中的圖像,Flash動畫和其他文件。

我假設您已經將CKEditor設置到您的網頁中。如果您還沒有完成,您可以按照我以前的文章中的說明進行操作:CKEditor: Web-based Word Processor For Your Web Pages

讓我們進入我們的業務。

1)下載KCFinder>http://kcfinder.sunhater.com/download

2)提取.zip文件的kcfinder目錄項目的公共目錄。

3)打開/public/ckeditor/config.js並添加代碼行如下;

CKEDITOR.editorConfig = function(config) { 
// Define changes to default configuration here. For example: 
// config.language = 'fr'; 
// config.uiColor = '#AADC6E'; 

/* Show these image/flash browsing feature only to Admins */ 
config.filebrowserBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=files'; 
config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=images'; 
config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=flash'; 

/* Image/Flash upload feature using kcfinder tool */ 
config.filebrowserUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=files'; 
config.filebrowserImageUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=images'; 
config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=flash'; 

};

如果您不想讓用戶瀏覽服務器中先前上傳的文件,您可以刪除/阻止註釋前三行,並只保留實際上傳部分的最後三行,否則您可以按照您的要求爲每個功能添加用戶級別控制。永遠不要讓用戶看到服務器中的文件。如果他們更改文件,其他文件鏈接可能會被破壞,並且會導致應用程序中的大量混亂。

4)激活KCFinder。

默認情況下,KCFinder禁用。要更改它,請轉到kcfinder/conf/config。PHP和一般設置下,將'disabled'的值更改爲false。現在,用戶可以使用CKEditor界面上傳和管理Web應用程序中的文件(在我們的例子中爲圖像文件)。

您可以查看詳細的步驟在我的博客文章:https://ashenlive.blogspot.com/2016/09/ckeditor-image-upload-with-kcfinder.html