Configure Ckeditor+Ckfinder in PHP to complete image upload_PHP tutorial

After using fckeditor for a long time, I am used to its slightly outdated interface. I heard that its younger brother CKeditor is cooler and more dazzling. Let’s try it today. The latest version currently is CKEditor 3.4.2.

CKeditor is completely based on plug-ins, which extends components to meet specific needs. For example, the common file upload function is not available by default, and only basic text editing functions are provided. To implement image uploading, another component CKFinder needs to be extended.

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/.

2． The page references CKeditor, the key code is as follows

<script type="text/javascript" src="http://blog.163.com/chudaozhe@126/blog/ckeditor/ckeditor.js"></script> <textarea cols= "80" name="content" rows="10"></textarea>
At this point, the default version of CKeditor has been installed and deployed. At this time, you can configure the editor by modifying /admin/ckeditor/ckeditor.js, such as font, background color, language, interface height and width, editor button distribution, etc.
Just add the content that needs to be set to the middle of this function.

CKEDITOR.editorConfig = function( config )                                                                                                                                                                                                          

Second: Install and configure CKfinder

CKfinder is an official component (note: it is not the same website as ckeditor).

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

2． The default configuration of Ckfinder cannot upload files to the server, so you need to modify the config.php under the ckfinder file and change the return value of CheckAuthentication() in the file from return false to return true.

function CheckAuthentication()                                                                                                                        .

3． Set the file upload path. Open the config.php file in the previous step and find "$baseUrl". This variable defines the directory where ckfinder files are uploaded. Set the value to "$baseurl='../data /'. After the file is uploaded, the program will be here. Corresponding folders such as image, flash, etc. are automatically created in the directory.

Third: Integration to realize image upload function

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

<script type="text/javascript" src="http://blog.163.com/chudaozhe@126/blog/ckeditor/ckfinder/ckfinder.js"></script>

Quote the following code below the editor textarea:

<script type="text/javascript"> : '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>

3． Test the image upload and see if the following screen appears. The button in the red line is the result of the above steps.

Author: Feng Jingbao

http://www.bkjia.com/PHPjc/478083.html

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/478083.htmlTechArticleI have used fckeditor for a long time and am used to its slightly outdated interface. I heard that its younger brother CKeditor is cooler and more dazzling. , come and try it today. The latest version currently is CKEditor 3.4.2. CKeditor is completely basic...