How to enable CKEditor image upload function_PHP tutorial-PHP Tutorial-php.cn

How to enable CKEditor image upload function_PHP tutorial

WBOY

Release： 2016-07-13 17:49:23

Original

722 people have browsed it

How to add the function of uploading images to the ckeditor editor in PHP? The official demo of CKEditor has the functions of uploading pictures and browsing server files, but the one we downloaded does not have these two functions...

In fact, you need to download another component: CKFinder, and use it with CKEditor to implement the upload function.

Officially provides three language versions of CKFinder: PHP, Asp.Net and Asp. Download address: http://ckfinder.com/download

Unzip CKFinder to the website directory. The calling method is as follows (assuming CKFinder is in the root directory of the website, you can use relative paths):

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 prohibited by default. You also need to open config.php in the CKFinder directory and change return false; on line 32 to return true;

Here is the authentication of upload permission. You can notice that there is a large English comment above, which means don’t simply change it to return true, but add session verification, etc., otherwise it will be very dangerous...

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

Basic Configuration
The filebrowserBrowseUrl setting is the location of an external file browser, that should 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 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 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',
filebrowserWindowWidth : '640',
filebrowserWindowHeight : '480',
});
To set the window size of file browser inside of a specific dialog box, use filebrowser[dialogName]WindowWidth and filebrowser[dialogName]WindowHeight settings.

For example, to change the 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',
});

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.

摘自顺子网络