CKEDITOR + CKFINDER image upload configuration (C #/asp.net/php)

CKEDITOR + CKFINDER image upload configuration (C #/asp tutorial. net/php Tutorial)

Php

All the code of keditor is rewritten, but the upload function is not available in it. It is a pure online file editor. To upload images, download ckfinder.

First download the source code from the official website and decompress it in the website root directory (the default ckeditor and ckfinder folders do not need to be changed)

Insert JS on the required page

<Script type = "text/webpage effects" src = "/ckeditor. JS"> </script>

<Script type = "text/javascript" src = "/ckfinder. js"> </script>

<Form action = "Sroan. php" method = "post">

<Textarea cols = "80 & Prime; id =" editor1 & Prime; name = "editor1 & Prime; rows =" 10 & Prime;> </textarea>

<Input type = "submit" value = "Submit"/>

<Script type = "text/javascript">

Var editor = CKEDITOR. replace ('time ');

CKFinder. SetupCKEditor (editor, '../ckfinder/'); // relative path of the total ckfinder directory.

</Script>

Modify the CheckAuthentication function in ckfinder/config. php and change the return value to true (fasle by default)

This enables the upload function.

If the above method does not work, you can try it.

1. Download and install CKEditor:

Http://ckeditor.com/

Decompress the downloaded CKEditor and place it in the website path.

2. Download and install CKFinder:

Http://ckfinder.com/download

Decompress the downloaded CKFinder and put it in the same directory as CKEditor.

3. Use CKEditor and CKFinder on the webpage:

CKEditor actually replaces a textarea tag, so put textarea in a form. When submitted to the php Server, use $ _ GET ['XXX'] or $ _ POST ['XXX'] to obtain the edited data. Note that because CKEditor must replace textarea, the corresponding javascript code "CKEDITOR. replace (xxxxxx)" should be placed behind textarea.

Simply create a new test.html file (in the same directory as ckeditor and ckfinder) and use the following example to modify it. In the browser, view test.html and you will be able to see CKEditor on the webpage.

CKEditor

4. Configure CKFinder to upload images and Flash files.

Click "Image". The Upload button is displayed in the "Upload" tab in the pop-up window, but the Upload fails. Because CKFinder is not configured yet. You need to create the Directory of the uploaded file and modify the three places in ckfinder/config. php:

A. Create a directory to save the uploaded files, such as upload.

(Put the upload folder in the same level as ckeditor and ckfinder. All three directories are in the project directory)

The path is/upload/

[For Linux: Set the permission to be read and written by the php server. The simplest thing is that the php server has the permission to store files in the chmod 777 upload.]

B. Locate row 32nd of the configuration file (ckfinder/config. php) and set function CheckAuthentication () {return false ;}

Change to function CheckAuthentication () {return true ;}

C. Find row 63rd and change the value of $ baseUrl to the URL that saves the Directory of the uploaded file,

For example, $ baseUrl = '/project name/upload/'; (the address here is the absolute path starting from the project directory, and it is determined that the upload directory already exists)

D. find row 82nd and delete $ baseDir = resolveUrl ($ baseUrl). Modify $ baseDir to the absolute path of the file directory to be uploaded. (during local testing, you must start from the disk and directory, that is, the direct directory of C:/or D)

For example, $ baseDir = '/Apache2/htdocs/ck/upload/'; (Apache2 is a direct directory under D)

This is because the resolveUrl ($ baseUrl) function does not work properly.

Now, you can use CKEditor and CKFinder to upload files.

For the server B. php code in the above small example:

Header ("Content-Type: text/html; charset = utf-8 ");

$ Str = $ _ POST ['editor1'];

Echo $ str;

?>

As you can see, after clicking the submit button, the server receives the content in CKEditor and uses echo output to generate a content exactly the same as that edited in CKEditor. On the server side, you can save the received content to the database tutorial. Then, read and display it on the corresponding page.

Bytes ---------------------------------------------------------------------------------------------------------

The fckeditor Upload image contains a function that allows you to browse the server directory. If you are in the background, you can use this function. If you are a front-end user, do not use this function.

However, viewing images is not very convenient. ckfinder is very simple.

Fckeditor is prepared as follows:

Modify file:

Fckeditoreditorfilemanagerconnectorsphpconfig. php

// Change $ Config ['enabled'] to true to allow upload.

$ Config

[

'Enabled'

]

=

True

;

// $ Config ['userfilespath'] setting the upload directory relative to the root directory is useless at present, because the actual upload is in the following preparation

$ Config

[

'Userfilespath'

]

=

"/Upload /"

;

// $ Config ['userfilesabsolutepath'] specifies the location of the uploaded image, including the root directory.

$ Config

[

'Userfilesabsolutepath'

]

=

'/Public/upload /'

;

Set ckfinder config. php

$ BaseUrl

=

'/Upload /'

;

// Change CheckAuthentication to return true. Here you can add your own permission judgment.

Function

CheckAuthentication (

)

{

Return

True

;

}

Use in program code

$ Fckeditor

=

New

FCKeditor (

$ Fckname

)

;

$ Fckeditor

->

BasePath

=

'/Js/fckeditor /'

;

// $ Toolbar_set set Default value of the toolbar: Default

$ Fckeditor

->

ToolbarSet

=

$ Toolbar_set

;

// $ Width

$ Fckeditor

->

Width

    =

$ Width

;

// $ Height

$ Fckeditor

->

Height

    =

$ Height

;

// Path of the skin file

$ Fckeditor

->

Config

     =

Array

(

'Skinpath'

=>

$ SkinPath

)

;

$ Fckeditor

->

Value

     =

$ Value

;

// Use CKFinder before fckedior

CKFinder ::

SetupFCKeditor

(

$ Fckeditor

,

"/Js/ckfinder /"

)

;

$ Fckhtml

=

$ Fckeditor

->

Create

(

)

;

The detailed c # Configuration method is as follows:

The latest versions of CKEditor and CKFinder can be downloaded from the official website (http://cksource.com.

Put the above two resources in the root directory of the website:/CKEditor and/CKFinder (case-insensitive)

Use CKEditor on the page:

<Textarea cols = "80" id = "prcontent" name = "content" rows = "50"> hello world! </Textarea>

<Script type = "text/javascript">

CKEDITOR. replace ('content', {height: 200, width: 520 });

</Script>

CKEditor does not provide the upload function. Therefore, you must use CKFinder to upload files.

Step 1: the website must reference the CKFinder dll (Directory:/CKFinder/bin/Release/CKFinder. dll)

Step 2: Configure CKEditor config. js (Directory:/CKEditor/config. js) and add it to the CKEDITOR. editorConfig function. You can remove unnecessary functions.

Config. filebrowserBrowseUrl = '/ckfinder/ckfinder.html'; // browse service folders when uploading files

Config. filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html? Type = Images; // browse the service folder when uploading Images

Config. filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html? Type = Flash '; // browse service folder when uploading Flash

Config. filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector. aspx? Command = QuickUpload & type = Files '; // upload File button (tag)

Config. filebrowserImageUploadUrl = '/ckfinder/core/connector/aspx/connector. aspx? Command = QuickUpload & type = Images '; // upload image button (tag)

Config. filebrowserFlashUploadUrl = '/ckfinder/core/connector/aspx/connector. aspx? Command = QuickUpload & type = Flash '; // upload the Flash button (tag)

After the configuration is complete, CKEditor provides the upload function. However, if you want to change the image file name to a random file name when uploading an image, what should you do? Next, let's take a look at step 3.

Step 3: modify the CKFinder source code. CKFinder comes with source code, directory:/CKFinde/_ source

Create a new project in VS pointing to CKFinde/_ source/CKFinder. Net. sln

1) open the/Settings/ConfigFile. cs file.

Locate 27 rows and add an attribute: public bool RandomReName; // rename randomly

Locate 67 rows and assign the value to the attribute: RandomReName = true; // The default value is true.

Save closed files

2) open the/Connector/Config. cs file.

Locate row 62 and add an attribute:

Public bool RandomReName

       {

Get {return Settings. ConfigFile. Current. RandomReName ;}

       }

Save closed files

3) open the/Connector/CommandHandlers/FileUploadCommandHandler. cs file.

Locate 64 rows and add a judgment code:

If (Config. Current. RandomReName) // use a random name

SFileName = DateTime. Now. ToString ("yyyyMMddHHmmssfff") + "." + sExtension;

Save closed files

4) regenerate the project and run/ckfinder/_ source/bin/Debug/CKFinder. dll overwrite/ckfinder/bin/Release/CKFinder. dll or website project remove the reference previously added and then re-import from CKFinder.. Net project Dll

Last step: open/ckfinder/config. ascx

Locate 42 rows and add a property: (in fact, this addition can be done without adding, because the default value is set before, but it must be set to false when using the original name)

// Use random file names after uploading

RandomReName = true;

Save close

Now that the configuration is successful, CKEditor has the upload function. Other function settings are available for further research ~

Note: the CKEditor and CKFinder folders have many unnecessary things, such as the ones whose names are prefixed with underscores, and the. net project does not require php or asp.

If an error occurs during file uploading: the file cannot be browsed due to security reasons, contact the system administrator and check the CKFinder configuration file.

You need to modify the config. ascx file

Public override bool CheckAuthentication ()

{

Reture false;

}

To:

Public override bool CheckAuthentication ()

{

// Used for form verification

Return Request. IsAuthenticated;

// Reture true; not recommended

}

Alibaba Cloud Hot Products
Elastic Compute Service (ECS)	Dedicated Host (DDH)	ApsaraDB RDS for MySQL (RDS)	ApsaraDB for PolarDB(PolarDB)	AnalyticDB for PostgreSQL (ADB for PG)
AnalyticDB for MySQL(ADB for MySQL)	Data Transmission Service (DTS)	Server Load Balancer (SLB)	Global Accelerator (GA)	Cloud Enterprise Network (CEN)
Object Storage Service (OSS)	Content Delivery Network (CDN)	Short Message Service (SMS)	Container Service for Kubernetes (ACK)	Data Lake Analytics (DLA)
ApsaraDB for Redis (Redis)	ApsaraDB for MongoDB (MongoDB)	NAT Gateway	VPN Gateway	Cloud Firewall
Anti-DDoS	Web Application Firewall (WAF)	Log Service	DataWorks	MaxCompute
Elastic MapReduce (EMR)	Elasticsearch