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