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