程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> PHP中Ckeditor+Ckfinder配置圖片上傳功能

PHP中Ckeditor+Ckfinder配置圖片上傳功能

編輯:關於PHP編程

從標題來看我們知道Ckeditor不支持圖片上傳功能,它是需要一個組件Ckfinder才可以支持上傳圖片, 本文章就來詳細的介紹了如何配置Ckeditor+Ckfinder實現圖片上傳的功能。

第一:安裝配置CKEditor

在擴展CKfinder實現圖片上傳之前,我們先把最基本的CKeditor編輯器安裝一下。

1.  將下載的ckeditor_3.4.2.zip解壓,復制目錄下的ckeditor文件夾至所需目錄,如/admin/。

第一:安裝配置CKEditor ,可改/admin/ckeditor/ckeditor.js來配置編輯器,如字體、背景色、語言

、界面高寬、編輯器按鈕分布等

 代碼如下 復制代碼 config.language = 'en';
config.skin = 'v2';
config.uiColor = '#AADC6E';
config.toolbar = 'Basic';

….
2、官方的demo大多都喜歡用js配置editor區域,習慣寫php的我就嫌麻煩,只好看內置的php類。

 代碼如下 復制代碼

require_once ROOTPATH . "ckeditor/ckeditor.php";
$CKEditor = new CKEditor();
$CKEditor->returnOutput = true; //設置輸出可用變量的情況
$CKEditor->basePath = '/ckeditor/';//設置路徑
$contentarea =  $CKEditor->editor("content", $rs['contents']); //生成一個以name為content的

textarea
 
echo $contentarea;

頁面引用CKeditor,關鍵代碼如下

 

 代碼如下 復制代碼

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<textarea cols="80" name="content" rows="10"></textarea>


第二步,我們來配置安裝CKfinder

CKfinder是官方組件,下載地址如下:http://ckfinder.com/download (注意:與ckeditor不是同一

網站)。

1.  將下載的ckfinder_php_2.0.1.zip 解壓,復制目錄下的ckfinder文件夾至編輯器目

錄,/admin/ckeditor。

2、需要上傳了 ,只好加入ckfinder。把ckfinder和ckeditor放在同級目錄下。
打開/ckfinder/config.php,  首先設置第一個函數CheckAuthentication(),這個函數需要按照自己的

規則寫,只要return  true的情況才能允許上傳文件到服務器的,當然不建議直接寫return true,這

將導致安全問題。可以采用session來處理比較方便。
我們可以簡單的把子

config.php這樣修改

 代碼如下 復制代碼

function CheckAuthentication()
{

return false;//改為return false
}

或者更安全的做法利用session 關於session用法 [用力點擊]

 代碼如下 復制代碼

session_start();
function CheckAuthentication(){
    if(isset($_SESSION['UseEidtor']))
        return true;
    else
         return  false;
}

找到”$baseUrl”,這個變量定義了ckfinder文件上傳的目錄,將值設為”$baseurl=’../data /’,

文件上傳後程序他會在此目錄下自動建立相應的文件夾如image、flash等。

第三:整合,實現圖片上傳功能

1.  在編輯器頁面頭部引用ckfinder.js文件,代碼如下:

 代碼如下 復制代碼

 <script type="text/javascript" src="ckeditor/ckfinder/ckfinder.js"></script>


下介紹兩調用方法一種php

最後就是使用ckfinder

 代碼如下 復制代碼

require_once ROOTPATH . "ckeditor/ckeditor.php";
    require_once ROOTPATH . 'ckfinder/ckfinder.php' ;
   
     $CKEditor  = new  CKEditor();
    $CKEditor->returnOutput = true;
    $CKEditor->basePath = '/ckeditor/';
 
    CKFinder::SetupCKEditor($CKEditor, '/ckfinder/') ;//注意這裡是相對路徑,相對於根目錄,

不能用絕對路徑
 
    $contentarea =  $CKEditor->editor("content", $rs['contents']);


另一種js或html頁面的修改

 代碼如下 復制代碼

<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl : 'ckeditor/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?

command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?

command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?

command=QuickUpload&type=Flash'
});
</script>

這樣就大功告成了,有想知道Ckeditor Ckfinder配置圖片上傳功能支持javascript html和php調用的朋友可以參考一下本教程

本站原創教程轉載注明來源:http://www.bKjia.c0m/phper/php.html

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved