CKEditor image upload Function _php tutorial

How does PHP add images to the CKEditor editor? CKEditor official demo is to upload images and browse the server file function, but we downloaded it ourselves without these two features ...

In fact, you need to download another component: Ckfinder, use it with ckeditor to achieve the upload function.

Officially available in php,asp.net and ASP three language versions of Ckfinder, download address: http://ckfinder.com/download

Unzip the Ckfinder to the site directory. The invocation method is as follows (assuming that Ckfinder is in the Web site root, 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, the default is to prohibit the upload, but also to open the Ckfinder directory of config.php, the 32nd line of return false, change to return true;

Here is the upload permission of the authentication, you can notice that there is a large paragraph of English comments, meaning is not to simply change it to return true, but add such as session verification, etc., otherwise it will be very dangerous ...

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

Basic Configuration
The Filebrowserbrowseurl setting is the location of a external file browser, that should being 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) 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
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 would be used by default, however in the Image dialog box, CKEditor would use Filebrowserimagebrowseurl and Filebrowserimageuploadurl configuration settings instead.

File Browser window Size The default width of file Browser Window in CKEditor are 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 is not suitable for you, and 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 Filebro Wser[dialogname]windowheight settings.

For example, to change the file browser window size is 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 is easily integrated with CKEditor (see Live Demo).

The integration May is done in the Ways:by setting CKEditor configuration options (example below) or using the CKFINDER.S Etupckeditor () 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.
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 Integr Ation method.

From Shun son network

http://www.bkjia.com/PHPjc/478343.html www.bkjia.com true http://www.bkjia.com/PHPjc/478343.html techarticle How does php add images to the CKEditor editor? CKEditor official demo is to upload images and browse the server file function, but we downloaded it ourselves without these two work ...

