Configuring the image upload function in Ckeditor+Ckfinder in PHP_PHP tutorial

Judging from the title, we know that Ckeditor does not support the image upload function. It requires a component Ckfinder to support uploading images. This article will introduce in detail how to configure Ckeditor+Ckfinder to implement the image upload function.

First: Install and configure CKEditor

Before extending CKfinder to implement image uploading, we first install the most basic CKeditor editor.

1． Unzip the downloaded ckeditor_3.4.2.zip and copy the ckeditor folder in the directory to the desired directory, such as /admin/.

First: Install and configure CKEditor. You can change /admin/ckeditor/ckeditor.js to configure the editor, such as font, background color, and language

, interface height and width, editor button distribution, etc.

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

….
2. Most of the official demos like to use js to configure the editor area. Being used to writing php, I find it troublesome, so I have to look at the built-in php class.

The code is as follows

Copy code

代码如下	复制代码
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;

require_once ROOTPATH ​​. "ckeditor/ckeditor.php";

$CKEditor = new CKEditor();

$CKEditor->returnOutput = true; //Set the output available variables

$CKEditor->basePath = '/ckeditor/';//Set path

$contentarea = $CKEditor->editor("content", $rs['contents']); //Generate a

代码如下	复制代码

with name as content

textarea

echo $contentarea;

The page references CKeditor, the key code is as follows

The code is as follows	Copy code

The second step is to configure and install CKfinder

CKfinder is an official component, the download address is as follows: http://ckfinder.com/download (Note: It is not the same as ckeditor

website).

1． Unzip the downloaded ckfinder_php_2.0.1.zip and copy the ckfinder folder in the directory to the editor directory

代码如下	复制代码
function CheckAuthentication() { return false;//改为return false }

Record, /admin/ckeditor. 2. I need to upload it, so I have to join ckfinder. Place ckfinder and ckeditor in the same directory. Open /ckfinder/config.php, first set the first function CheckAuthentication(), this function needs to follow its own The rules are written to allow files to be uploaded to the server only if return true is required. Of course, it is not recommended to write return true directly. This Will cause security issues. It is more convenient to use session to handle it. We can do it simply Modify config.php like this

The code is as follows	Copy code
function CheckAuthentication() { return false;//Change to return false }

Or it is safer to use session. About session usage [Click hard]

The code is as follows

代码如下	复制代码
session_start(); function CheckAuthentication(){     if(isset($_SESSION['UseEidtor']))         return true;     else          return  false; }

Copy code

session_start();

function CheckAuthentication(){

If(isset($_SESSION['UseEidtor']))

        return true;

else

                                      return false;

代码如下	复制代码

}

Find “$baseUrl”, this variable defines the directory where ckfinder files are uploaded, and set the value to “$baseurl=’../data /’,

代码如下	复制代码
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']);

After the file is uploaded, the program will automatically create corresponding folders such as image, flash, etc. in this directory.

Third: Integration to realize image upload function

代码如下	复制代码
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' });

1． Reference the ckfinder.js file at the head of the editor page, the code is as follows:

The code is as follows	Copy code

The following introduces two calling methods and one php The last step is to use ckfinder

The code is as follows

Copy code

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/') ;//Note that this is a relative path, relative to the root directory, Cannot use absolute paths $contentarea = $CKEditor->editor("content", $rs['contents']); Another modification of js or html page

The code is as follows

Copy code

This is it. Friends who want to know how Ckeditor Ckfinder configures the image upload function to support javascript html and php calls can refer to this tutorial Please indicate the source when reprinting original tutorials on this site: http://www.bKjia.c0m/phper/php.html http://www.bkjia.com/PHPjc/631638.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/631638.htmlTechArticleFrom the title, we know that Ckeditor does not support the image upload function. It requires a component Ckfinder to support uploading images. , this article will introduce in detail how to configure Ckeditor+...