歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux基礎 >> Linux教程 >> CKEditor協同KCFinder實現圖片的遠程管理和圖文並茂的內容發布

CKEditor協同KCFinder實現圖片的遠程管理和圖文並茂的內容發布

日期:2017/2/28 14:37:55   编辑:Linux教程

Ckeditor kcfinder 整合配置:
Ckeditor ----à強大的富文本編輯器
官方推出了ckfinder 在線文件管理模塊配合,但是該模塊並不是和ckeditor一樣開源免費使用;

不過還好有另外一款文件管理器可與其配合使用,實現你想要的功能,即:kcfinder。這是其他組織開發的遠程文件管理模塊,可以用它來協同ckeditor 做文件上傳、實現圖文並茂的文章發布和遠程管理文件資源的操作。

網上下載ckeditor 和 kcfinder 的php版本,將兩者放到你規劃好的同一目錄下,
配置ckeditor :
修改config.js,添加如下配置項:
_++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//kcfinder 文件在線浏覽的url
config.filebrowserBrowseUrl = '/admin/kcfinder/browse.php?type=files';
//kcfinder 在線浏覽圖片資源的url
config.filebrowserImageBrowseUrl = '/admin/kcfinder/browse.php?type=images';
//kcfinder 在線浏覽flash文件的url
config.filebrowserFlashBrowseUrl = '/admin/kcfinder/browse.php?type=flash';
//ckeittor 文件上傳提交的url
config.filebrowserUploadUrl = '/admin/kcfinder/upload.php?type=files';
//ckeittor 上傳圖片的url
config.filebrowserImageUploadUrl = '/admin/kcfinder/upload.php?type=images';
//ckeittor 上傳flash的url
config.filebrowserFlashUploadUrl = '/admin/kcfinder/upload.php?type=flash';

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
經過以上配置,可以在ckeditor 的工具欄裡邊的圖像工具和flash工具裡邊看到多了客戶端本地文件上傳到服務器的菜單項.
但是此時上傳會出問題,還需配置kcfinder 正確響應ckeditor的操作請求,以及配置正確的上傳文件保存路徑:

修改kcfinder 的配置文件config.php 裡邊有兩個地方需要更改:

一是添加權限限制,不能誰誰都可以向你服務器上傳東西:

比如我的一個小應用-----文章發布系統的後台,我在config.php文件的最頂部加入:
+++++++++++++++++++++++++++++++++++++++++++++++++++++++
session_start();
if(!empty($_SESSION['USERNAME'])&&!empty($_SESSION['PASSWORD'])){
$_SESSION['KCFINDER']['disabled'] = false;
}else{
echo "<script>top.location.href='../login.php';</script>";

}
++++++++++++++++++++++++++++++++++++++++++++++++++++++++
以上代碼主要是判斷用戶是否登錄,登錄的話讓kcfinder 的
$_SESSION['KCFINDER']['disabled'] = false;//就是啟用kcfinder
反之就跳轉到登錄頁面登錄;
配置如下:(配置數組方式)

//不允許上的傳文件類型限制
'deniedExts' => "exe com msi bat php phps phtml php3 php4 cgi pl",

'maxImageWidth' => 0, //圖片最大寬度
'maxImageHeight' => 0,//圖片最大高度

'thumbWidth' => 100,//縮略圖的最大寬
'thumbHeight' => 100, //縮略圖的最大高

'jpegQuality' => 90, //圖片質量
//上傳文件保存路徑配置:
'uploadURL' => "../upload/",

以上是一些基本配置,之後kcfinder 就可以一ckeditor模塊的方式協同ckeditor 來做文件上傳、實現圖文並茂的文章發布和遠程管理文件資源的操作。

在需要用到ckeditor 的頁面,包含一下ckeditor/ckeditor.php文件,之後參考以下代碼,實現在頁面合適的位置輸出編輯器:
* $CKEditor = new CKEditor();
* $CKEditor->returnOutput = true;
* $code = $CKEditor->editor("editor1", "<p>Initial value.</p>");
* echo $code;
有不妥,歡迎拍磚。歡迎指正。。。

CKEditor 的詳細介紹:請點這裡
CKEditor 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved