CKEditor is a WYSIWYG text editor dedicated to the use of open source code on Web pages. FCKeditor is its predecessor. CKEditor does not provide the file upload function. To implement the upload function, use CKFinder.
1. Download CKEditor and CFinder
CKEditor: http://ckeditor.com/download
CKFinder: http://ckfinder.com/download
My version: ckeditor 4.0.1 + ckfinder 2.3.1
2. Unzip and install
Decompress the CKEditor and place the ckeditor in the root directory of the website.
Decompress CKFinder and put ckfinder in/ckeditor /.
3. Client webpage code
Including loading ckeditor. js, loading ckfinder. js, creating CKEditor instances, and setting CKEditor for CKFinder.
Configure the upload in ckeditor/config. js and add the following code:
/*** @ License Copyright (c) 2003-2013, CKSource-Frederico Knabben. all rights reserved. * For licensing, see LICENSE.html or http = // ckeditor.com/license */CKEDITOR. editorConfig = function (config) {// Define changes to default configuration here. // For the complete reference: // http://docs.ckeditor.com /#! /Api/CKEDITOR. config // The toolbar groups arrangement, optimized for two toolbar rows. config. toolbarGroups = [{name: 'clipboard', groups: ['clipboard', 'undo ']}, {name: 'editing', groups: ['Find ', 'selection ', 'shellchecker']}, {name: 'link'}, {name: 'insert'}, {name: 'form'}, {name: 'tools'}, {name: 'document', groups: ['Mode', 'document', 'doctool']}, {name: 'others '}, '/', {name: 'Basicstyles ', groups: ['basicstyles', 'cleanup']}, {name: 'paragraph', groups: ['LIST', 'indent ', 'blocks ', 'align ']}, {name: 'styles'}, {name: 'colors '}, {name: 'about'}]; // Remove some buttons, provided by the standard plugins, which we don't // need to have in the Standard (s) toolbar. config. removeButtons = 'underline, Subscript, superscript'; // The configuration code config is added below. filebrowserBrowseUrl = 'C Kfinder/ckfinder.html '; config. filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Type = Images '; config. filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Type = Flash '; config. filebrowserUploadUrl = 'ckfinder/core/connector/php/connector. php? Command = QuickUpload & type = Files '; config. filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector. php? Command = QuickUpload & type = Images '; config. filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector. php? Command = QuickUpload & type = Flash ';};
Then add the corresponding js information in html. the html code is as follows:
<! DOCTYPE html>4. server PHP code
Write a sample_postdata.php file to receive data transmitted by CKEditor. Use the textarea name on the client web page as the field name to obtain the data from $ _ POST. The passed data is escaped, and all ', ", \ is preceded by a backslash. Therefore, if you want to save the data to the database, you do not need to escape the data. If you want to directly display data as webpage code, you need to call stripslashes before echo to remove all the backslashes.
Sample_postdata.php
<?php $content=$_POST['editor1'];?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">5. Other necessary configurations for implementing the file upload function
(1)/ckeditor/ckfinder/config. php
Set $ baseUrl to $ baseUrl = '/ckeditor/ckfinder/userfiles/', which is the storage location of the uploaded files.
Change "return false" in CheckAuthentication to "return true;" to set the upload permission. If you only want the authorized user to upload files, you can perform some processing through SESSION, for example, a field in the SESSION indicates whether the user has logged on. If yes, return true, and if no, return false.
Function CheckAuthentication (){
Return true;
}(2)/ckeditor/config. js
Add the following sentence to the CKEDITOR. editorConfig = function (config) function body:
Config. font_names = '; _ GB2312;; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana; ';
Set the font that can be used in CKEditor. By default, CKEditor only has the English font.
6. Remove test and authorization prompts
Test Image Upload to see if the following screen is displayed. The buttons in the red line are the results of the above steps.
(1) how to remove the authorization information in the lower left corner of the image list:
Search in ckfinder/ckfinder. js
VaR P = "\ x3c \ x64 \ 151 \ x76 \ 040 \ 143 \ x6c \ 141 \ x73 \ 163 \ 075 \ x27 \ 166 \ 151 \ X65 \ 167 \ 040 \ x74 \ x6f \ 157 \ 154 \ x5f \ 160 \ x61 \ 156 \ X65 \ x6c \ x27 \ x20 \ 163 \ 164 \ x79 \ 154 \ 145 \ 075 \ x27 \ 141 \ \ x64 \ x64 \ x69 \ 156 \ x67 \ 072 \ 062 \ User \ 170 \ 073 \ x64 \ 151 \ User \ x73 \ User \ 154 \ User \ x61 \ User \ \ 157 \ 143 \ x6b \ 040 \ X21 \ x69 \ x6d \ 157 \ x72 \ x74 \ 141 \ 156 \ 164 \ 073 \ 157 \ x73 \ 151 \ 164 \ \ 151 \ x6f \ x6e \ 072 \ 163 \ x74 \ x61 \ x74 \ 151 \ 143 \ x20 \ 041 \ x69 \ 155 \ 160 \ x6f \ 162 \ x61 \ x6e \ 164 \ 073 \ x63 \ 157 \ x6c \ x6f \ x72 \ x3a \ 142 \ 154 \ 141 \ 143 \ 040 \ 041 \ x69 \ 153 \ cross city \ x6f \ x72 \ 164 \ x61 \ 156 \ x74 \ 073 \ 142 \ 141 \ x63 \ x6b \ 147 \ 162 \ x6f \ 165 \ 156 \ 144 \ 055 \ x63 \ x6f \ x6c \ 157 \ x72 \ x3a \ x77 \ x68 \ x69 \ x74 \ 145 \ x20 \ X21 \ 151 \ 155 \ cross city \ 157 \ x72 \ 164 \ x61 \ 156 \ x74 \ x3b \ x27 \ 076 ", Q = "\ x3c \ x2f \ 144 \ x69 \ x76 \ 076 ", R = P + "\ x54 \ 150 \ x69 \ 163 \ 040 \ x69 \ x73 \ x20 \ x74 \ 150 \ 145 \ x20 \ x44 \ 105 \ x4d \ x4f \ x20 \ 166 \ 145 \ 162 \ x73 \ x69 \ x6f \ x6e \ x20 \ 157 \ 146 \ 040 \ x43 \ x4b \ X46 \ 151 \ 156 \ x64 \ 145 \ x72 \ x2e \ 040 \ x50 \ x6c \ X65 \ x61 \ x73 \ 145 \ 040 \ x76 \ x69 \ x73 \ x69 \ x74 \ x20 \ 164 \ x68 \ X65 \ x20 \ 074 \ 141 \ 040 \ 150 \ 162 \ 145 \ x66 \ X3D \ 047 \ 150 \ 164 \ x74 \ 160 \ x3a \ 057 \ x2f \ x63 \ 153 \ 163 \ x6f \ x75 \ x72 \ 143 \ X65 \ 056 \ 143 \ x6f \ x6d \ 057 \ x63 \ x6b \ x66 \ 151 \ 156 \ x64 \ 145 \ x72 \ 047 \ 040 \ x74 \ 141 \ x72 \ 147 \ 145 \ 164 \ X3D \ x27 \ 137 \ x62 \ x6c \ x61 \ 156 \ x6b \ 047 \ 076 \ x43 \ x4b \ X46 \ 151 \ 156 \ 144 \ 145 \ 162 \ x20 \ x77 \ X65 \ 142 \ x20 \ 163 \ 151 \ 164 \ 074 \ 057 \ 145 \ 076 \ 040 \ x74 \ 141 \ x20 \ x6f \ x62 \ 164 \ x61 \ x69 \ x6e \ 040 \ x61 \ 040 \ x76 \ x61 \ 154 \ x69 \ 144 \ x20 \ 154 \ 151 \ x63 \ 145 \ x6e \ 163 \ X65 \ 056 "+ Q, S = P + "\ x43 \ 113 \ X46 \ 151 \ 156 \ x64 \ X65 \ x72 \ x20 \ x44 \ 145 \ 166 \ 145 \ x6c \ x6f \ 145 \ 162 \ 040 \ 114 \ 151 \ x63 \ 145 \ 156 \ x73 \ 145 \ x3c \ 142 \ x72 \ x2f \ x3e \ x4c \ 151 \ x63 \ X65 \ x6e \ 163 \ x65 \ x64 \ 040 \ 164 \ 157 \ x3a \ 040 ";
Replace:
Var p = "\ x20", q = "\ x20", r = p + "\ x20" + q, s = p + "\ x20 ";
(2) Remove This is the DEMO version of CKFinder. Please visit the CKFinder web site to obtain a valid license displayed on the top of the file list.
Search in ckfinder/ckfinder. js
If (T. eu &&! Y | X) & T. mj) {V. addClass ('files _ message'); this. tools. of (). setHtml (T. mj )}
Changed:
If (T. eu &&! Y | X) & T. mj) {V. addClass ('files _ message'); if (T. mj = M) this. tools. of (). hide (); else {this. tools. of (). setHtml (T. mj); this. tools. of (). show ()}}7. Download Sample Code
Click to download
I heard that Baidu's ueditor is quite powerful, so I have time to study it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
