PHP configuration ckeditor+ckfinder Complete image upload _php tutorial

Source: Internet
Author: User
Use for a long time fckeditor, look accustomed to its slightly old interface, heard that his younger brother CKEditor more cool more dazzling, today to try it. The current version is CKEditor 3.4.2.

CKEditor is completely based on plug-ins, and it extends components to meet specific needs. For example, the common file upload function is not the default, only provides basic text editing functions. To implement a picture upload, it needs to be ckfinder by another extension component.

First: Installation configuration CKEditor

Before extending the Ckfinder implementation picture upload, 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. Page reference CKEditor, the key code is as follows


At this point, the default version of CKEditor has been installed, you can modify the/admin/ckeditor/ckeditor.js to configure the editor, such as font, background color, language, interface aspect, editor button distribution, etc.
Add the content you want to set in the middle of the function.

Ckeditor.editorconfig = function (config) {//Define changes to the default configuration here. For example://config.language = ' fr '; Config.uicolor = ' #AADC6E '; };


Second: Installation configuration Ckfinder

Ckfinder is the official component, (note: Not the same site as CKEditor).

1. Unzip the downloaded ckfinder_php_2.0.1.zip, copy the Ckfinder folder from the directory to the editor directory,/admin/ckeditor.

2. Ckfinder default configuration is not able to upload files to the server, so to the Ckfinder file under the config.php to make changes, the Checkauthentication () return value in its file to return false to true.

function Checkauthentication () {return false;//change to return false}


3. Sets the file upload path. Open the config.php file in the previous step and find "$BASEURL", which defines the directory where the Ckfinder file is uploaded and sets the value to "$baseurl =". /data/', File post-upload program he will automatically set up the corresponding folder in this directory, such as image, Flash and so on.

Third: integration, to achieve the image upload function

1. In the editor page, refer to the Ckfinder.js file in the header code as follows:


The following code is referenced in the editor textarea:


3. Test the image upload to see if the following screen appears, where the Red line button is the result of the above steps.
Author: Feng Jingbao

http://www.bkjia.com/PHPjc/478083.html www.bkjia.com true http://www.bkjia.com/PHPjc/478083.html techarticle use for a long time fckeditor, look accustomed to its slightly old interface, heard that his younger brother CKEditor more cool more dazzling, today to try it. The current version is CKEditor 3.4.2. CKEditor is completely base ...

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.