How to enable the CKEditor image upload function

How does PHP add the image upload function to the ckeditor editor? The official CKEditor demo provides the function of uploading images and browsing server files. However, we did not download these two functions & hellip; in fact, we still need to download another component: CKFinder, which is used with CKEditor to implement the above... syntaxH

How does PHP add 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'
});

At the same time, uploading is disabled by default. you also need to open config. php in the CKFinder directory and change the return false value of Line 1 to return true;

Here is the upload permission authentication. you can note that there is a large English comment above, which means you should not simply change it to return true, but add session verification, for example, otherwise it will be 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 shoshould 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 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: filebrowser [dialogName] BrowseUrl and filebrowser [dialogName] UploadUrl.

For example to set a special upload url for the image dialog, set the 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 filebrowserImageUploadUrl 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% of 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: '20140901 ',
FilebrowserWindowHeight: '20140901 ',
});
To set the window size of file browser inside of a specific dialog box, use filebrowser [dialogName] into wwidth and filebrowser [dialogName] WindowHeight settings.

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: '20140901 ',
Filebrowserimageappswheight: '20140901 ',
});

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

From Shunzi network