How to use the ck editor

There are many kinds of online editors. ckeditor is the best in it. its predecessor is fckeditor, which was officially renamed ckeditor in. it has powerful functions and can meet our web development needs.

I. usage of Ckeditor

There are many types of online editors. the most excellent one is ckeditor. its predecessor is fckeditor, which was officially renamed ckeditor in,

It is very powerful and can meet our web development needs.

Ckeditor is written in js and has nothing to do with the background programming language.

How to use ckeditor?

1. get ckeditor,

2. create a page,

Ckeditor is based on textarea, that is, we must first create a textarea.

3. copy the ckeditor folder to our corresponding directory.

4. introduce ckeditor on the page, that is, js reference.

5. using ckeditor on the page is actually replacing textarea with an online editor through code.

Note: try to write this code behind the form.

6. test whether it can be used or not.

In the background, php directly obtains its content, which is not changed.

In front-end, how can I obtain it using js?

7. test whether the formatted content can be submitted. In two cases

(1). copy directly on the Internet, (OK)

Online network address,

So, you are connected to the Internet, and the content on the server is still there.

(2) original, first wrote a word document, (bad)

 

Why?

Because the image exists locally. So now we are faced with the question: how to upload images?

In fact, fckeditor provides the image upload function. However, after the revision, we split it into two parts: ckeditor and ckfinder. This adopts the object-oriented thinking: the single responsibility principle allows them to execute different functions.

II. Use of Ckfinder

Ckfinder is an ajax file manager.

1. Download

Different from ckeditor, ckfinder must interact with the server, so it has programming languages. we need to select the correct version when downloading.

2. design an interface

3. copy ckfinder to the corresponding directory and introduce the ckfinder file.

4. write js to complete the upload function

 

This window is displayed, but the following message is displayed:

Modify the php configuration file of ckfinder. Open the config. php file and change it to three places.

1. change permission settings

2. create a folder, uploads, and set its path.

3. set the absolute path

Add the following code:

After you select an image, the url is displayed in the text box.

Garbled characters are generated for images with Chinese names. To solve

What should I do?

Idea: rename an image with a Chinese name.

In D: \ wamp \ Apache2.2 \ htdocs \ cftest \ ckfinder \ core \ connector \ php \ php5 \ CommandHandler, there is a file fileupload. php, add the following code:

3. Ckeditor integration ckfinder

It is very simple, it is a setup, the code is particularly troublesome, do not remember, but you need to know how to configure.

1. copy ckfinder to the same directory as ckeditor.

2. create an uploads folder,

3. change config. php in ckfinder. Note that there are three changes.

4. modify the fileupload. php file to process images with Chinese names.

5. introduce ckfinder while creating ckeditor. (These files can be found in ckfinder \ core \ ckfinder_php5.php.

// Set six parameters to import the ckfinder. // The file browsing path is indirectly introduced through this file. jsfilebrowserBrowseUrl: "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"

There are several options for configuration. 4. personalized ckeditor,

• You can configure it in the config. js configuration file.
• You can configure the ckeditor object when creating it.