I think everyone is very stressed and interested in developing a blog in the tasks assigned by the intense development lab?
While developing, we also want to develop our own characteristics. Zhang yiqian wants to be a blog system, and whoever registers will generate a new blog. In this way, we must design several templates, database design is also problematic. I want to refine a blog.
Think of the last message board, I think it can actually add the insert expression function, and think of the current popular system, whether it is CMS or BBS, when editing a message, you can change the font, insert an image, and perform other functions. You can imagine that there was an ewebeditor program N years ago (many people did not change the default password for a program with many problems ), it's a pity that I paid for it. Today I finally found a substitute ckeditor. It's good!
: Http://www.cngr.cn/soft/download.asp? Softid = 38187 & downid = 58 & id = 46464
Installation and configuration tutorial
Install
Installing ckeditor is easy. You only need to follow the simple steps below.
1. download the latest ckeditor version from our website http://ckeditor.com.cn.
2. decompress the downloaded file to the "ckeditor" folder under your website directory.
Note: You can also store these files anywhere on your website. The default value is "ckeditor ".
Test your installation
The editor comes with some simple example web pages to verify that the installation results are running properly. For more information, see the "_ samples" directory. Visit the following address for test:
Http: // <your website Domain Name>/<ckeditor installation path>/_ samples/index.html
For example:
Http://www.example.com/ckeditor/_samples/index.html
Integration
You have worked hard to integrate ckeditor Into Your webpage. Here we will introduce the most common implementation methods.
Step 1: Load ckeditor
Ckeditor is a javascript application. You only need to include a file reference in Your webpage to load it. If you have installed ckeditor in the "ckeditor" directory on your website, you can refer to the following example:
<Head> <br/>... <br/> <MCE: Script Type = "text/JavaScript" src = "/ckeditor. JS "mce_src =" ckeditor/ckeditor. JS "> </MCE: SCRIPT> <br/> </pead>
The ckeditor javascript API is ready for loading in the preceding method and can be used.
Step 2: Create an editor instance
Ckeditor works like a text area (textarea) On Your webpage. It provides a simple and easy-to-write user interface, layout, and rich text input areas, however, it is not easy to use text areas to achieve the same effect. It requires the user to input HTML code.
However, in fact, ckeditor still uses a text area to transmit its data to the server. This text area is invisible to users. Therefore, you must create and edit an instance. First, create an instance:
<Textarea name = "editor1"> <p> initial value. </P>
Note: If you want to load some data to the editor, such as reading data from the database, you only need to put the data in the text area (textarea, just like the example above. In this example, we have named the "editor1" in the text area (textarea). This name will be used for server operations when receiving data submitted by post. Now, we start to use the ckeditor javascript API. We use an editor instance to "replace" the common text area (textarea). Therefore, a javascript command is required:
<MCE: Script Type = "text/JavaScript"> <! -- <Br/> ckeditor. Replace ('editor1'); <br/> // --> </MCE: SCRIPT>
The preceding script block can only be contained after the <textarea> label of the webpage. You can also run this replacement process in the
<MCE: Script Type = "text/JavaScript"> <! -- <Br/> window. onload = function () <br/>{< br/> ckeditor. replace ('editor1'); <br/>}; <br/> // --> </MCE: SCRIPT>
Step 3: Save the editor content data
According to the previous descriptions, the editor works just like a text area (textarea). Therefore, when you submit a form that contains an editor instance, its data will also be passed easily, use the name of the text area (textarea) as the Health name to receive data. For example, in PHP, we need to process data as follows:
<? Php <br/> $ editor_data =$ _ post ['editor1']; <br/>?>
Client Data Processing
Some applications (such as Ajax applications) need to process all the data on the client, and then send the data to the server in its own way. In these cases, using the ckeditor API can easily obtain the content in the editor instance. For example:
<SCRIPT type = "text/JavaScript"> <br/> var editor_data = ckeditor. Instances. editor1.getdata ();
</SCRIPT>
Complete example
<HTML> <br/> <pead> <br/> <title> sample-ckeditor </title> <br/> <MCE: script Type = "text/JavaScript" src = "/ckeditor. JS "mce_src =" ckeditor/ckeditor. JS "> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <form method = "Post"> <br/> <p> <br/> my editor: <br/> <textarea name = "editor1"> <p> initial value. </P>