Installation and Use of ckeditor

Source: Internet
Author: User

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>

     

  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.