Add the function of the CKEditor editor to the page editor

CKEditor official demo is to upload pictures and browse the server file features, but we have not downloaded these two features ... Actually also need to download another component: Ckfinder, use it with ckeditor to achieve upload function. The official php,asp.net and ASP three language versions of the Ckfinder, download the address: http://ckfinder.com/download
Unzip the Ckfinder to the Web site directory. The invocation method is as follows (assuming that the ckfinder is in the site root, you can use a relative path): Ckeditor.replace (' Editor1 ', {filebrowserbrowseurl: '/ckfinder/ckfinder.html ', Filebrowserimagebrowseurl: '/ckfinder/ckfinder.html? Type=images ', Filebrowserflashbrowseurl: '/ckfinder/ckfinder.html? Type=flash ', Filebrowseruploadurl: '/ckfinder/core/connector/php/connector.php?command=quickupload&type= Files ', Filebrowserimageuploadurl: '/ckfinder/core/connector/php/connector.php?command=quickupload&type= Images ', Filebrowserflashuploadurl: '/ckfinder/core/connector/php/connector.php?command=quickupload&type= Flash '});

It is also prohibited to upload by default, and you will need to open the config.php in the Ckfinder directory and return false to line 32nd, and change to return true; Here is the Upload permission certification, you can notice that there is a large section of English comments, meaning that it is not simple to change it to return true, but plus such as session validation, etc., otherwise it will be very dangerous ...

The following is the official document, about how to increase the file upload function, to the English good classmate reference, the above method is actually below the example 5:

Basic Configuration The Filebrowserbrowseurl setting is the location of a external file browser, that should to be launched When the "Browse Server" button (1) is pressed. The Filebrowseruploadurl setting is the location of a script that handles file uploads. If set, the "Upload" tab (2) would appear in dialog boxes (only where such functionality are available, i.e. in "Link", "imag E "and" Flash dialog Windows). Example 1 ckeditor.replace (' Editor1 ', {filebrowserbrowseurl: '/browser/browse.php ', Filebrowseruploadurl: '/uploader /upload.php ',}); It is also possible to set a separate URL for a selected dialog box, using the dialog name in file browser Settings:fileb Rowser[dialogname]browseurl and Filebrowser[dialogname]uploadurl. For example to set a special upload URL for the image dialog, set the Filebrowserimageuploadurl property:example 2 ckedit Or.replace (' Editor1 ', {filebrowserbrowseurl: '/browser/browse.php ', Filebrowserimagebrowseurl: '/browser/ Browse.php?type=images ' FilebrowseruPloadurl: '/uploader/upload.php ', Filebrowserimageuploadurl: '/uploader/upload.php?type=images '}); In the example above, Filebrowserbrowseurl and Filebrowseruploadurl settings would be used by default, however in the Image dialog box, CKEditor'll use Filebrowserimagebrowseurl and Filebrowserimageuploadurl configuration settings instead. File Browser window Size The default width of File Browser window in CKEditor be set to 80% of screen width, the default h Ight is set to 70% of the screen height. If for some reasons, the default values are is not suitable for you and can change it to any other value. Use Filebrowserwindowwidth to change width and filebrowserwindowheight to change height of the window. To set the size of the ' window in pixels ', just set the number value (e.g. "800"). If you are prefer to set height and width of the windows in percentage of the screens, remember to add percent sign on the end ( e.g. "60%"). Example 3 ckeditor.replace (' Editor1 ', {filebrowserbrowseurl: '/browser/bRowse.php ', Filebrowseruploadurl: '/uploader/upload.php ', Filebrowserwindowwidth: ' 640 ', Filebrowserwindowheight: ' 480 ',}); To set the window size of file browser inside of a specific dialog box with use Filebrowser[dialogname]windowwidth and Filebro Wser[dialogname]windowheight settings. For example, to the ' Change ' file browser window size only in ' Image ' dialog box, change set the Filebrowserimagewindowwidth and filebrowserimagewindowheight settings. Example 4 ckeditor.replace (' Editor1 ', {filebrowserbrowseurl: '/browser/browse.php ', Filebrowseruploadurl: '/uploader /upload.php ', Filebrowserimagewindowwidth: ' 640 ', Filebrowserimagewindowheight: ' 480 ',}; The Using ckfinder Ckfinder May is easily integrated with CKEditor (the live demo). The integration May is done in two Ways:by setting CKEditor configuration options (example below) or using the CKFINDER.S Etupckeditor () method available the in Ckfinder API. Example 5 ckeditor.replace (' Editor1 ', {filebrowserbrowseurl: '/ckfinder/ckfindEr.html ', Filebrowserimagebrowseurl: '/ckfinder/ckfinder.html? Type=images ', Filebrowserflashbrowseurl: '/ckfinder/ckfinder.html? Type=flash ', Filebrowseruploadurl: '/ckfinder/core/connector/php/connector.php?command=quickupload&type= Files ', Filebrowserimageuploadurl: '/ckfinder/core/connector/php/connector.php?command=quickupload&type= Images ', Filebrowserflashuploadurl: '/ckfinder/core/connector/php/connector.php?command=quickupload&type= Flash '}); The example above is valid for PHP environment. /ckfinder/is a base path to the Ckfinder installation directory. If your using Ckfinder for ASP, asp.net or ColdFusion remember to change ' php ' to ' right ' extension:asp-ckfinder for ASP aspx-ckfinder for asp.net cfm-ckfinder for ColdFusion php-ckfinder for PHP Example 6 ckeditor + ckfinder integra tion with the use of Ckfinder.setupckeditor () Function:var editor = ckeditor.replace (' editor1 '); Ckfinder.setupckeditor (editor, '/ckfinder/'); The second parameter of THe Setupckeditor () was the path to the Ckfinder installation. Please check the _samples/js/ckeditor.html sample distributed with Ckfinder to the ' full working example ' this Integr Ation method.