Adds the image upload function to the ckeditor editor.

The official CKEditor demo provides the function of uploading images and browsing server files, but we did not download these two functions ...... In fact, you also need to download another component: CKFinder, Which is used with CKEditor to implement the upload function. Official provision of PHP, Asp. Net and Asp three language versions of CKFinder: http://ckfinder.com/download
Decompress CKFinder to the website directory. The call method is as follows (assuming CKFinder is in the root directory of the website, you can use the 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 '});

Upload is disabled by default. You also need to open the config in the CKFinder directory. php: Change the return false of the 32nd rows to return true. Here, the upload permission authentication is used. You can note that the preceding large English comments are provided, this means that you should not simply change it to return true, but add session verification and so on, otherwise it will be very dangerous ......

The following is an official document about how to add the file upload function for good English students. the method mentioned above is actually Example 5 below:

Basic Configuration The filebrowserBrowseUrl setting is the location of an external file browser, that shocould be launched when "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) will appear in dialog boxes (only where such functionality is available, I. e. in "Link", "Image" and "Flash" dialog wind Ows ). 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: filebrowser [dialogName] BrowseUrl and filebrowser [dialogName] UploadUrl. for example to set a special upload url for the image dialog, set th E filebrowserImageUploadUrl property: Example 2 CKEDITOR. 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 will be used by default, however in the Image dialog box, CKEditor will use filebrowserImageBrowseUrl and custom configuration settings instead. file Browser Window Size The default width of file browser window in CKEditor is set to 80% of screen width, the default hight is set to 70% Screen height. if for some reasons, the default values are not suitable for you, you can change it to any other value. use filebrowserwwwwidth 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 prefer to set height and width of the window in percentage of the screen, remember to add Percent sign at the end (e.g. "60% "). example 3 CKEDITOR. replace ('editor1', {filebrowserBrowseUrl: '/browser/browse. php', filebrowserUploadUrl: '/uploader/upload. php', filebrowser1_wwidth: '000000', filebrowser1_wheight: '000000',}); To set the window size of file browser inside of a specific dialog box, use filebrowser [dialogName] export wwidth and filebrowser [dialogName] export wheight setting S. for example, to change the file browser window size only in "Image" dialog box, change set the filebrowserimage1_wwidth and filebrowserimage1_wheight settings. example 4 CKEDITOR. replace ('editor1', {filebrowserBrowseUrl: '/browser/browse. php', filebrowserUploadUrl: '/uploader/upload. php', filebrowserimage1_wwidth: '20160301', filebrowserimage1_wheight: '20160301',}); Using CKFinder CKF Inder may be easily integrated with CKEditor (see live demo ). the integration may be done in two ways: by setting CKEditor configuration options (example below) or using the CKFinder. setupCKEditor () method available 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 the right extension: asp-CKFinder for ASP aspx-CKFinder for ASP. NET cfm-CKFinder for ColdFusion php-CKFinder for PHP Example 6 CKEditor + CKFinder integration with the use of CKFinder. setupCKEditor () function: var editor = CKEDITOR. replace ('editor1'); CKFinder. setupCKEditor (editor, '/ckfinder/'); The second parameter of the SetupCKEditor () method is the path to the CKFinder installation. please check the _ samples/js/ckeditor.html sample distributed with CKFinder to see the full working example of this integration method.